897 lines
23 KiB
HTML
897 lines
23 KiB
HTML
<div class="users-view">
|
|
<div class="page-header">
|
|
<div class="header-left">
|
|
<h1>User Management</h1>
|
|
<p class="subtitle">Manage users, roles, and permissions</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn-primary" onclick="document.getElementById('create-user-modal').showModal()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="8.5" cy="7" r="4"></circle>
|
|
<line x1="20" y1="8" x2="20" y2="14"></line>
|
|
<line x1="23" y1="11" x2="17" y2="11"></line>
|
|
</svg>
|
|
Add User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filters -->
|
|
<div class="toolbar">
|
|
<div class="search-box">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
<input type="text"
|
|
placeholder="Search users..."
|
|
name="q"
|
|
hx-get="/users/search"
|
|
hx-trigger="keyup changed delay:300ms"
|
|
hx-target="#users-table-body"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
<div class="filters">
|
|
<select name="role"
|
|
hx-get="/users/list"
|
|
hx-trigger="change"
|
|
hx-target="#users-table-body"
|
|
hx-swap="innerHTML"
|
|
hx-include="[name='status']">
|
|
<option value="">All Roles</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="moderator">Moderator</option>
|
|
<option value="user">User</option>
|
|
</select>
|
|
<select name="status"
|
|
hx-get="/users/list"
|
|
hx-trigger="change"
|
|
hx-target="#users-table-body"
|
|
hx-swap="innerHTML"
|
|
hx-include="[name='role']">
|
|
<option value="">All Status</option>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
<option value="suspended">Suspended</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<input type="checkbox" id="select-all" onchange="toggleSelectAll(this)">
|
|
</th>
|
|
<th>User</th>
|
|
<th>Email</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
<th>Last Active</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-table-body"
|
|
hx-get="/users/list"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
<tr>
|
|
<td colspan="7" class="loading-cell">
|
|
<div class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p>Loading users...</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="pagination" id="users-pagination"
|
|
hx-get="/users/list/pagination"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Detail Panel (slides in from right) -->
|
|
<div class="detail-panel" id="user-detail-panel">
|
|
<div class="panel-header">
|
|
<h2 id="panel-user-name">User Details</h2>
|
|
<button class="close-btn" onclick="closeDetailPanel()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="panel-tabs">
|
|
<button class="tab-btn active" data-tab="profile" onclick="switchTab(this, 'profile')">Profile</button>
|
|
<button class="tab-btn" data-tab="settings" onclick="switchTab(this, 'settings')">Settings</button>
|
|
<button class="tab-btn" data-tab="permissions" onclick="switchTab(this, 'permissions')">Permissions</button>
|
|
<button class="tab-btn" data-tab="security" onclick="switchTab(this, 'security')">Security</button>
|
|
<button class="tab-btn" data-tab="activity" onclick="switchTab(this, 'activity')">Activity</button>
|
|
</div>
|
|
<div class="panel-content" id="user-detail-content">
|
|
<!-- Content loaded via HTMX -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create User Modal -->
|
|
<dialog id="create-user-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Create New User</h2>
|
|
<button type="button" class="close-btn" onclick="document.getElementById('create-user-modal').close()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form hx-post="/users/create"
|
|
hx-target="#users-table-body"
|
|
hx-swap="innerHTML"
|
|
hx-on::after-request="if(event.detail.successful) { document.getElementById('create-user-modal').close(); showToast('User created successfully'); }">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Username <span class="required">*</span></label>
|
|
<input type="text" name="username" required placeholder="johndoe">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Display Name</label>
|
|
<input type="text" name="display_name" placeholder="John Doe">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email <span class="required">*</span></label>
|
|
<input type="email" name="email" required placeholder="john@example.com">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Password <span class="required">*</span></label>
|
|
<input type="password" name="password" required placeholder="••••••••" minlength="8">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Confirm Password <span class="required">*</span></label>
|
|
<input type="password" name="password_confirm" required placeholder="••••••••">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Role</label>
|
|
<select name="role">
|
|
<option value="user">User</option>
|
|
<option value="moderator">Moderator</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Status</label>
|
|
<select name="status">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="send_welcome_email" checked>
|
|
<span>Send welcome email</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="require_password_change">
|
|
<span>Require password change on first login</span>
|
|
</label>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn-secondary" onclick="document.getElementById('create-user-modal').close()">Cancel</button>
|
|
<button type="submit" class="btn-primary">Create User</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Edit User Modal -->
|
|
<dialog id="edit-user-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Edit User</h2>
|
|
<button type="button" class="close-btn" onclick="document.getElementById('edit-user-modal').close()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="edit-user-form-container">
|
|
<!-- Form loaded via HTMX -->
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<dialog id="delete-user-modal" class="modal modal-small">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Delete User</h2>
|
|
<button type="button" class="close-btn" onclick="document.getElementById('delete-user-modal').close()">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="warning-icon">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
|
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
</svg>
|
|
</div>
|
|
<p>Are you sure you want to delete <strong id="delete-user-name"></strong>?</p>
|
|
<p class="warning-text">This action cannot be undone. All user data will be permanently removed.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn-secondary" onclick="document.getElementById('delete-user-modal').close()">Cancel</button>
|
|
<button type="button" class="btn-danger" id="confirm-delete-btn"
|
|
hx-delete="/users/{user_id}/delete"
|
|
hx-target="#users-table-body"
|
|
hx-swap="innerHTML"
|
|
hx-on::after-request="document.getElementById('delete-user-modal').close(); showToast('User deleted');">
|
|
Delete User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<style>
|
|
/* Users View */
|
|
.users-view {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.header-left h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.header-left .subtitle {
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Toolbar */
|
|
.toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
flex: 1;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.search-box svg {
|
|
color: var(--text-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-box input {
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
.filters {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.filters select {
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Table */
|
|
.table-container {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.data-table th,
|
|
.data-table td {
|
|
padding: 14px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.data-table th {
|
|
background: var(--surface-hover);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.data-table tbody tr:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.data-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.loading-cell {
|
|
text-align: center;
|
|
}
|
|
|
|
/* User Cell */
|
|
.user-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.user-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.user-username {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Status Badge */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-badge.active {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: #10b981;
|
|
}
|
|
|
|
.status-badge.inactive {
|
|
background: rgba(107, 114, 128, 0.1);
|
|
color: #6b7280;
|
|
}
|
|
|
|
.status-badge.suspended {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
/* Role Badge */
|
|
.role-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.role-badge.admin {
|
|
background: rgba(168, 85, 247, 0.1);
|
|
color: #a855f7;
|
|
}
|
|
|
|
.role-badge.moderator {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.role-badge.user {
|
|
background: rgba(107, 114, 128, 0.1);
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.action-btn.danger:hover {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.page-btn {
|
|
padding: 8px 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.page-btn:hover:not(:disabled) {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.page-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.page-btn.active {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
/* Detail Panel */
|
|
.detail-panel {
|
|
position: fixed;
|
|
top: 56px;
|
|
right: -480px;
|
|
width: 480px;
|
|
height: calc(100vh - 56px);
|
|
background: var(--surface);
|
|
border-left: 1px solid var(--border);
|
|
z-index: 100;
|
|
transition: right 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-panel.open {
|
|
right: 0;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.panel-header h2 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0 20px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tab-btn {
|
|
padding: 12px 16px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.tab-btn.active {
|
|
color: var(--primary);
|
|
border-bottom-color: var(--primary);
|
|
}
|
|
|
|
.panel-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal {
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 16px;
|
|
background: var(--surface);
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
max-width: 560px;
|
|
width: 90%;
|
|
}
|
|
|
|
.modal.modal-small {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.modal::backdrop {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.modal-header h2 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.warning-icon {
|
|
color: #f59e0b;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.warning-text {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.modal form {
|
|
padding: 24px;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-group label .required {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.checkbox-label input {
|
|
width: auto;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--surface-hover);
|
|
border-radius: 0 0 16px 16px;
|
|
}
|
|
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn-secondary {
|
|
padding: 10px 20px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.btn-danger {
|
|
padding: 10px 20px;
|
|
background: #ef4444;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #dc2626;
|
|
}
|
|
|
|
/* Loading */
|
|
.loading-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid var(--border);
|
|
border-top-color: var(--primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.page-header {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.toolbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.search-box {
|
|
max-width: none;
|
|
}
|
|
|
|
.filters {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-panel {
|
|
width: 100%;
|
|
right: -100%;
|
|
}
|
|
|
|
.data-table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script></script>
|
|
function toggleSelectAll(checkbox) {
|
|
const checkboxes = document.querySelectorAll('#users-table-body input[type="checkbox"]');
|
|
checkboxes.forEach(cb => cb.checked = checkbox.checked);
|
|
}
|
|
|
|
function openDetailPanel(userId) {
|
|
const panel = document.getElementById('user-detail-panel');
|
|
panel.classList.add('open');
|
|
|
|
// Load user profile by default
|
|
htmx.ajax('GET', `/users/${userId}/profile`, {target: '#user-detail-content'});
|
|
}
|
|
|
|
function closeDetailPanel() {
|
|
document.getElementById('user-detail-panel').classList.remove('open');
|
|
}
|
|
|
|
function switchTab(btn, tab) {
|
|
// Update active tab
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
// Get current user ID from panel
|
|
const userId = document.getElementById('user-detail-panel').dataset.userId;
|
|
if (userId) {
|
|
htmx.ajax('GET', `/users/${userId}/${tab}`, {target: '#user-detail-content'});
|
|
}
|
|
}
|
|
|
|
function editUser(userId) {
|
|
htmx.ajax('GET', `/users/${userId}/edit`, {target: '#edit-user-form-container'});
|
|
document.getElementById('edit-user-modal').showModal();
|
|
}
|
|
|
|
function confirmDeleteUser(userId, userName) {
|
|
document.getElementById('delete-user-name').textContent = userName;
|
|
const deleteBtn = document.getElementById('confirm-delete-btn');
|
|
deleteBtn.setAttribute('hx-delete', `/users/${userId}/delete`);
|
|
htmx.process(deleteBtn);
|
|
document.getElementById('delete-user-modal').showModal();
|
|
}
|
|
|
|
function showToast(message) {
|
|
// Simple toast notification
|
|
const toast = document.createElement('div');
|
|
toast.className = 'toast';
|
|
toast.textContent = message;
|
|
toast.style.cssText = `
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
z-index: 1000;
|
|
animation: slideIn 0.3s ease;
|
|
`;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
}
|
|
</script>
|