1128 lines
46 KiB
HTML
1128 lines
46 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}System Administration{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1><i class="fas fa-cogs"></i> System Administration</h1>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-info" onclick="refreshDashboard()">
|
|
<i class="fas fa-sync-alt"></i> Refresh
|
|
</button>
|
|
<button type="button" class="btn btn-outline-success" onclick="createBackup()">
|
|
<i class="fas fa-download"></i> Create Backup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Health Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card border-primary">
|
|
<div class="card-body text-center">
|
|
<div id="system-status" class="display-6 mb-2">
|
|
<i class="fas fa-circle text-success"></i>
|
|
</div>
|
|
<h6 class="card-title">System Status</h6>
|
|
<p class="card-text small" id="system-status-text">Healthy</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-info">
|
|
<div class="card-body text-center">
|
|
<div class="display-6 mb-2">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<h6 class="card-title">Total Users</h6>
|
|
<p class="card-text h4" id="total-users">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-warning">
|
|
<div class="card-body text-center">
|
|
<div class="display-6 mb-2">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<h6 class="card-title">Database Size</h6>
|
|
<p class="card-text h6" id="db-size">0 MB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-success">
|
|
<div class="card-body text-center">
|
|
<div class="display-6 mb-2">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
<h6 class="card-title">System Uptime</h6>
|
|
<p class="card-text small" id="system-uptime">Unknown</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Navigation Tabs -->
|
|
<ul class="nav nav-tabs mb-4" id="adminTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview"
|
|
type="button" role="tab">
|
|
<i class="fas fa-tachometer-alt"></i> Overview
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users"
|
|
type="button" role="tab">
|
|
<i class="fas fa-users"></i> User Management
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings"
|
|
type="button" role="tab">
|
|
<i class="fas fa-sliders-h"></i> System Settings
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="maintenance-tab" data-bs-toggle="tab" data-bs-target="#maintenance"
|
|
type="button" role="tab">
|
|
<i class="fas fa-tools"></i> Maintenance
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="backup-tab" data-bs-toggle="tab" data-bs-target="#backup"
|
|
type="button" role="tab">
|
|
<i class="fas fa-hdd"></i> Backup & Restore
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="adminTabContent">
|
|
<!-- Overview Tab -->
|
|
<div class="tab-pane fade show active" id="overview" role="tabpanel">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-chart-bar"></i> System Statistics</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-sm-6 mb-3">
|
|
<strong>Total Customers:</strong>
|
|
<span id="stat-customers" class="float-end">0</span>
|
|
</div>
|
|
<div class="col-sm-6 mb-3">
|
|
<strong>Total Files:</strong>
|
|
<span id="stat-files" class="float-end">0</span>
|
|
</div>
|
|
<div class="col-sm-6 mb-3">
|
|
<strong>Total Transactions:</strong>
|
|
<span id="stat-transactions" class="float-end">0</span>
|
|
</div>
|
|
<div class="col-sm-6 mb-3">
|
|
<strong>Total QDROs:</strong>
|
|
<span id="stat-qdros" class="float-end">0</span>
|
|
</div>
|
|
<div class="col-sm-6 mb-3">
|
|
<strong>Active Users:</strong>
|
|
<span id="stat-active-users" class="float-end">0</span>
|
|
</div>
|
|
<div class="col-sm-6 mb-3">
|
|
<strong>Admin Users:</strong>
|
|
<span id="stat-admins" class="float-end">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> System Alerts</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="system-alerts">
|
|
<p class="text-muted">No alerts</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-history"></i> Recent Activity</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="recent-activity">
|
|
<p class="text-muted">Loading recent activity...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Tab -->
|
|
<div class="tab-pane fade" id="users" role="tabpanel">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="fas fa-users"></i> User Management</h5>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="showCreateUserModal()">
|
|
<i class="fas fa-plus"></i> Add User
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" id="user-search"
|
|
placeholder="Search users..." onkeyup="searchUsers()">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="user-filter" onchange="filterUsers()">
|
|
<option value="all">All Users</option>
|
|
<option value="active">Active Only</option>
|
|
<option value="admin">Admins Only</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<button type="button" class="btn btn-outline-secondary" onclick="loadUsers()">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th>Role</th>
|
|
<th>Last Login</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-table-body">
|
|
<tr>
|
|
<td colspan="7" class="text-center">Loading users...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="pagination justify-content-center" id="users-pagination">
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div class="tab-pane fade" id="settings" role="tabpanel">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="fas fa-sliders-h"></i> System Settings</h5>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="showCreateSettingModal()">
|
|
<i class="fas fa-plus"></i> Add Setting
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>Setting Key</th>
|
|
<th>Value</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="settings-table-body">
|
|
<tr>
|
|
<td colspan="5" class="text-center">Loading settings...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Maintenance Tab -->
|
|
<div class="tab-pane fade" id="maintenance" role="tabpanel">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-database"></i> Database Maintenance</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">Optimize database performance and clean up data.</p>
|
|
<div class="d-grid gap-2">
|
|
<button type="button" class="btn btn-warning" onclick="vacuumDatabase()">
|
|
<i class="fas fa-compress-alt"></i> Vacuum Database
|
|
</button>
|
|
<button type="button" class="btn btn-info" onclick="analyzeDatabase()">
|
|
<i class="fas fa-chart-line"></i> Analyze Statistics
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-table"></i> Lookup Tables</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="lookup-tables">
|
|
<p class="text-muted">Loading lookup table information...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-history"></i> Maintenance Log</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="maintenance-log">
|
|
<p class="text-muted">No maintenance operations performed yet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup Tab -->
|
|
<div class="tab-pane fade" id="backup" role="tabpanel">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-download"></i> Create Backup</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">Create a manual backup of the database.</p>
|
|
<button type="button" class="btn btn-success btn-lg w-100" onclick="createBackup()">
|
|
<i class="fas fa-download"></i> Create Backup Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-info-circle"></i> Backup Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Last Backup:</strong> <span id="last-backup">Unknown</span></p>
|
|
<p><strong>Backup Location:</strong> ./backups/</p>
|
|
<p><strong>Retention:</strong> 10 most recent backups</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="fas fa-list"></i> Available Backups</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>Filename</th>
|
|
<th>Size</th>
|
|
<th>Created</th>
|
|
<th>Type</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="backup-list">
|
|
<tr>
|
|
<td colspan="5" class="text-center">Loading backups...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Management Modal -->
|
|
<div class="modal fade" id="userModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="userModalTitle">Add User</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="userForm">
|
|
<input type="hidden" id="userId">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="username" class="form-label">Username *</label>
|
|
<input type="text" class="form-control" id="username" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="email" class="form-label">Email *</label>
|
|
<input type="email" class="form-control" id="email" required>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="firstName" class="form-label">First Name</label>
|
|
<input type="text" class="form-control" id="firstName">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="lastName" class="form-label">Last Name</label>
|
|
<input type="text" class="form-control" id="lastName">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3" id="passwordFields">
|
|
<label for="password" class="form-label">Password *</label>
|
|
<input type="password" class="form-control" id="password" required>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="isAdmin">
|
|
<label class="form-check-label" for="isAdmin">
|
|
Administrator
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="isActive" checked>
|
|
<label class="form-check-label" for="isActive">
|
|
Active
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveUser()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="modal fade" id="settingModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="settingModalTitle">Add Setting</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="settingForm">
|
|
<div class="mb-3">
|
|
<label for="settingKey" class="form-label">Setting Key *</label>
|
|
<input type="text" class="form-control" id="settingKey" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="settingValue" class="form-label">Setting Value *</label>
|
|
<input type="text" class="form-control" id="settingValue" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="settingType" class="form-label">Setting Type</label>
|
|
<select class="form-select" id="settingType">
|
|
<option value="STRING">String</option>
|
|
<option value="INTEGER">Integer</option>
|
|
<option value="FLOAT">Float</option>
|
|
<option value="BOOLEAN">Boolean</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="settingDescription" class="form-label">Description</label>
|
|
<textarea class="form-control" id="settingDescription" rows="3"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveSetting()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Reset Modal -->
|
|
<div class="modal fade" id="passwordModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Reset Password</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="passwordForm">
|
|
<input type="hidden" id="resetUserId">
|
|
<div class="mb-3">
|
|
<label for="newPassword" class="form-label">New Password *</label>
|
|
<input type="password" class="form-control" id="newPassword" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="confirmPassword" class="form-label">Confirm Password *</label>
|
|
<input type="password" class="form-control" id="confirmPassword" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="resetPassword()">Reset Password</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Global variables
|
|
let currentUsers = [];
|
|
let currentSettings = [];
|
|
let userPagination = { page: 1, limit: 10 };
|
|
|
|
// Initialize admin dashboard
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadSystemHealth();
|
|
loadSystemStats();
|
|
loadUsers();
|
|
loadSettings();
|
|
loadLookupTables();
|
|
loadBackups();
|
|
|
|
// Auto-refresh every 5 minutes
|
|
setInterval(loadSystemHealth, 300000);
|
|
});
|
|
|
|
// System Health Functions
|
|
async function loadSystemHealth() {
|
|
try {
|
|
const response = await fetch('/api/admin/health');
|
|
const data = await response.json();
|
|
|
|
// Update status indicator
|
|
const statusElement = document.getElementById('system-status');
|
|
const statusTextElement = document.getElementById('system-status-text');
|
|
|
|
if (data.status === 'healthy') {
|
|
statusElement.innerHTML = '<i class="fas fa-circle text-success"></i>';
|
|
statusTextElement.textContent = 'Healthy';
|
|
} else {
|
|
statusElement.innerHTML = '<i class="fas fa-circle text-danger"></i>';
|
|
statusTextElement.textContent = 'Unhealthy';
|
|
}
|
|
|
|
// Update system info
|
|
document.getElementById('system-uptime').textContent = data.uptime;
|
|
|
|
// Update alerts
|
|
const alertsElement = document.getElementById('system-alerts');
|
|
if (data.alerts && data.alerts.length > 0) {
|
|
alertsElement.innerHTML = data.alerts.map(alert =>
|
|
'<div class="alert alert-warning alert-sm mb-1">' + alert + '</div>'
|
|
).join('');
|
|
} else {
|
|
alertsElement.innerHTML = '<p class="text-muted">No alerts</p>';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load system health:', error);
|
|
showAlert('Failed to load system health', 'error');
|
|
}
|
|
}
|
|
|
|
async function loadSystemStats() {
|
|
try {
|
|
const response = await fetch('/api/admin/stats');
|
|
const data = await response.json();
|
|
|
|
// Update dashboard cards
|
|
document.getElementById('total-users').textContent = data.total_users;
|
|
document.getElementById('db-size').textContent = data.database_size;
|
|
|
|
// Update detailed stats
|
|
document.getElementById('stat-customers').textContent = data.total_customers.toLocaleString();
|
|
document.getElementById('stat-files').textContent = data.total_files.toLocaleString();
|
|
document.getElementById('stat-transactions').textContent = data.total_transactions.toLocaleString();
|
|
document.getElementById('stat-qdros').textContent = data.total_qdros.toLocaleString();
|
|
document.getElementById('stat-active-users').textContent = data.total_active_users;
|
|
document.getElementById('stat-admins').textContent = data.total_admins;
|
|
|
|
// Update recent activity
|
|
const activityElement = document.getElementById('recent-activity');
|
|
if (data.recent_activity && data.recent_activity.length > 0) {
|
|
activityElement.innerHTML = data.recent_activity.map(activity =>
|
|
'<div class="border-bottom pb-2 mb-2">' +
|
|
'<small class="text-muted">' + (activity.timestamp ? new Date(activity.timestamp).toLocaleString() : 'Recent') + '</small><br>' +
|
|
activity.description +
|
|
'</div>'
|
|
).join('');
|
|
} else {
|
|
activityElement.innerHTML = '<p class="text-muted">No recent activity</p>';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load system stats:', error);
|
|
showAlert('Failed to load system statistics', 'error');
|
|
}
|
|
}
|
|
|
|
// User Management Functions
|
|
async function loadUsers() {
|
|
try {
|
|
const search = document.getElementById('user-search').value;
|
|
const filter = document.getElementById('user-filter').value;
|
|
|
|
let url = '/api/admin/users?';
|
|
if (search) url += 'search=' + encodeURIComponent(search) + '&';
|
|
if (filter === 'active') url += 'active_only=true&';
|
|
|
|
const response = await fetch(url);
|
|
const users = await response.json();
|
|
currentUsers = users;
|
|
|
|
renderUsersTable(users);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load users:', error);
|
|
showAlert('Failed to load users', 'error');
|
|
}
|
|
}
|
|
|
|
function renderUsersTable(users) {
|
|
const tbody = document.getElementById('users-table-body');
|
|
|
|
if (users.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="7" class="text-center">No users found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = users.map(user => `
|
|
<tr>
|
|
<td>${user.username}</td>
|
|
<td>${user.email}</td>
|
|
<td>${(user.first_name || '') + ' ' + (user.last_name || '')}</td>
|
|
<td>
|
|
<span class="badge ${user.is_active ? 'bg-success' : 'bg-secondary'}">
|
|
${user.is_active ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge ${user.is_admin ? 'bg-primary' : 'bg-secondary'}">
|
|
${user.is_admin ? 'Admin' : 'User'}
|
|
</span>
|
|
</td>
|
|
<td>${user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never'}</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-outline-primary" onclick="editUser(${user.id})" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-outline-warning" onclick="showPasswordModal(${user.id})" title="Reset Password">
|
|
<i class="fas fa-key"></i>
|
|
</button>
|
|
<button class="btn btn-outline-danger" onclick="deactivateUser(${user.id})" title="Deactivate">
|
|
<i class="fas fa-user-times"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function showCreateUserModal() {
|
|
document.getElementById('userModalTitle').textContent = 'Add User';
|
|
document.getElementById('userForm').reset();
|
|
document.getElementById('userId').value = '';
|
|
document.getElementById('passwordFields').style.display = 'block';
|
|
document.getElementById('isActive').checked = true;
|
|
new bootstrap.Modal(document.getElementById('userModal')).show();
|
|
}
|
|
|
|
async function editUser(userId) {
|
|
try {
|
|
const response = await fetch('/api/admin/users/' + userId);
|
|
const user = await response.json();
|
|
|
|
document.getElementById('userModalTitle').textContent = 'Edit User';
|
|
document.getElementById('userId').value = user.id;
|
|
document.getElementById('username').value = user.username;
|
|
document.getElementById('email').value = user.email;
|
|
document.getElementById('firstName').value = user.first_name || '';
|
|
document.getElementById('lastName').value = user.last_name || '';
|
|
document.getElementById('isAdmin').checked = user.is_admin;
|
|
document.getElementById('isActive').checked = user.is_active;
|
|
document.getElementById('passwordFields').style.display = 'none';
|
|
|
|
new bootstrap.Modal(document.getElementById('userModal')).show();
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load user:', error);
|
|
showAlert('Failed to load user details', 'error');
|
|
}
|
|
}
|
|
|
|
async function saveUser() {
|
|
const userId = document.getElementById('userId').value;
|
|
const isEdit = !!userId;
|
|
|
|
const userData = {
|
|
username: document.getElementById('username').value,
|
|
email: document.getElementById('email').value,
|
|
first_name: document.getElementById('firstName').value,
|
|
last_name: document.getElementById('lastName').value,
|
|
is_admin: document.getElementById('isAdmin').checked,
|
|
is_active: document.getElementById('isActive').checked
|
|
};
|
|
|
|
if (!isEdit) {
|
|
userData.password = document.getElementById('password').value;
|
|
}
|
|
|
|
try {
|
|
const url = isEdit ? '/api/admin/users/' + userId : '/api/admin/users';
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(userData)
|
|
});
|
|
|
|
if (response.ok) {
|
|
bootstrap.Modal.getInstance(document.getElementById('userModal')).hide();
|
|
showAlert(isEdit ? 'User updated successfully' : 'User created successfully', 'success');
|
|
loadUsers();
|
|
} else {
|
|
const error = await response.json();
|
|
showAlert(error.detail || 'Failed to save user', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to save user:', error);
|
|
showAlert('Failed to save user', 'error');
|
|
}
|
|
}
|
|
|
|
function showPasswordModal(userId) {
|
|
document.getElementById('resetUserId').value = userId;
|
|
document.getElementById('passwordForm').reset();
|
|
new bootstrap.Modal(document.getElementById('passwordModal')).show();
|
|
}
|
|
|
|
async function resetPassword() {
|
|
const userId = document.getElementById('resetUserId').value;
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
showAlert('Passwords do not match', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/users/' + userId + '/reset-password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
new_password: newPassword,
|
|
confirm_password: confirmPassword
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
bootstrap.Modal.getInstance(document.getElementById('passwordModal')).hide();
|
|
showAlert('Password reset successfully', 'success');
|
|
} else {
|
|
const error = await response.json();
|
|
showAlert(error.detail || 'Failed to reset password', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to reset password:', error);
|
|
showAlert('Failed to reset password', 'error');
|
|
}
|
|
}
|
|
|
|
async function deactivateUser(userId) {
|
|
if (!confirm('Are you sure you want to deactivate this user?')) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/users/' + userId, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
showAlert('User deactivated successfully', 'success');
|
|
loadUsers();
|
|
} else {
|
|
const error = await response.json();
|
|
showAlert(error.detail || 'Failed to deactivate user', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to deactivate user:', error);
|
|
showAlert('Failed to deactivate user', 'error');
|
|
}
|
|
}
|
|
|
|
// Settings Management Functions
|
|
async function loadSettings() {
|
|
try {
|
|
const response = await fetch('/api/admin/settings');
|
|
const data = await response.json();
|
|
currentSettings = data.settings;
|
|
|
|
renderSettingsTable(data.settings);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load settings:', error);
|
|
showAlert('Failed to load settings', 'error');
|
|
}
|
|
}
|
|
|
|
function renderSettingsTable(settings) {
|
|
const tbody = document.getElementById('settings-table-body');
|
|
|
|
if (settings.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center">No settings found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = settings.map(setting => `
|
|
<tr>
|
|
<td><code>${setting.setting_key}</code></td>
|
|
<td>${setting.setting_value}</td>
|
|
<td><span class="badge bg-secondary">${setting.setting_type}</span></td>
|
|
<td>${setting.description || '-'}</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-outline-primary" onclick="editSetting('${setting.setting_key}')" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn btn-outline-danger" onclick="deleteSetting('${setting.setting_key}')" title="Delete">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function showCreateSettingModal() {
|
|
document.getElementById('settingModalTitle').textContent = 'Add Setting';
|
|
document.getElementById('settingForm').reset();
|
|
document.getElementById('settingKey').readOnly = false;
|
|
new bootstrap.Modal(document.getElementById('settingModal')).show();
|
|
}
|
|
|
|
async function editSetting(settingKey) {
|
|
try {
|
|
const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey));
|
|
const setting = await response.json();
|
|
|
|
document.getElementById('settingModalTitle').textContent = 'Edit Setting';
|
|
document.getElementById('settingKey').value = setting.setting_key;
|
|
document.getElementById('settingKey').readOnly = true;
|
|
document.getElementById('settingValue').value = setting.setting_value;
|
|
document.getElementById('settingType').value = setting.setting_type;
|
|
document.getElementById('settingDescription').value = setting.description || '';
|
|
|
|
new bootstrap.Modal(document.getElementById('settingModal')).show();
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load setting:', error);
|
|
showAlert('Failed to load setting details', 'error');
|
|
}
|
|
}
|
|
|
|
async function saveSetting() {
|
|
const settingKey = document.getElementById('settingKey').value;
|
|
const isEdit = document.getElementById('settingKey').readOnly;
|
|
|
|
const settingData = {
|
|
setting_key: settingKey,
|
|
setting_value: document.getElementById('settingValue').value,
|
|
setting_type: document.getElementById('settingType').value,
|
|
description: document.getElementById('settingDescription').value
|
|
};
|
|
|
|
try {
|
|
const url = isEdit ? '/api/admin/settings/' + encodeURIComponent(settingKey) : '/api/admin/settings';
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(isEdit ? {
|
|
setting_value: settingData.setting_value,
|
|
description: settingData.description
|
|
} : settingData)
|
|
});
|
|
|
|
if (response.ok) {
|
|
bootstrap.Modal.getInstance(document.getElementById('settingModal')).hide();
|
|
showAlert(isEdit ? 'Setting updated successfully' : 'Setting created successfully', 'success');
|
|
loadSettings();
|
|
} else {
|
|
const error = await response.json();
|
|
showAlert(error.detail || 'Failed to save setting', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to save setting:', error);
|
|
showAlert('Failed to save setting', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteSetting(settingKey) {
|
|
if (!confirm('Are you sure you want to delete this setting?')) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey), {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
showAlert('Setting deleted successfully', 'success');
|
|
loadSettings();
|
|
} else {
|
|
const error = await response.json();
|
|
showAlert(error.detail || 'Failed to delete setting', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to delete setting:', error);
|
|
showAlert('Failed to delete setting', 'error');
|
|
}
|
|
}
|
|
|
|
// Maintenance Functions
|
|
async function loadLookupTables() {
|
|
try {
|
|
const response = await fetch('/api/admin/lookups/tables');
|
|
const data = await response.json();
|
|
|
|
const element = document.getElementById('lookup-tables');
|
|
element.innerHTML = data.tables.map(table => `
|
|
<div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
|
|
<div>
|
|
<strong>${table.display_name}</strong><br>
|
|
<small class="text-muted">${table.description}</small>
|
|
</div>
|
|
<span class="badge bg-info">${table.record_count} records</span>
|
|
</div>
|
|
`).join('');
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load lookup tables:', error);
|
|
document.getElementById('lookup-tables').innerHTML = '<p class="text-danger">Failed to load lookup tables</p>';
|
|
}
|
|
}
|
|
|
|
async function vacuumDatabase() {
|
|
if (!confirm('This will optimize the database. Continue?')) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/maintenance/vacuum', { method: 'POST' });
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
showAlert('Database vacuum completed in ' + result.duration_seconds.toFixed(2) + ' seconds', 'success');
|
|
addMaintenanceLog('Database Vacuum', 'Completed successfully');
|
|
} else {
|
|
showAlert(result.detail || 'Database vacuum failed', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to vacuum database:', error);
|
|
showAlert('Failed to vacuum database', 'error');
|
|
}
|
|
}
|
|
|
|
async function analyzeDatabase() {
|
|
if (!confirm('This will analyze database statistics. Continue?')) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/maintenance/analyze', { method: 'POST' });
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
showAlert('Database analysis completed in ' + result.duration_seconds.toFixed(2) + ' seconds', 'success');
|
|
addMaintenanceLog('Database Analysis', 'Completed successfully');
|
|
} else {
|
|
showAlert(result.detail || 'Database analysis failed', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to analyze database:', error);
|
|
showAlert('Failed to analyze database', 'error');
|
|
}
|
|
}
|
|
|
|
function addMaintenanceLog(operation, message) {
|
|
const logElement = document.getElementById('maintenance-log');
|
|
const timestamp = new Date().toLocaleString();
|
|
const logEntry = `
|
|
<div class="border-bottom pb-2 mb-2">
|
|
<small class="text-muted">${timestamp}</small><br>
|
|
<strong>${operation}:</strong> ${message}
|
|
</div>
|
|
`;
|
|
|
|
if (logElement.innerHTML.includes('No maintenance operations')) {
|
|
logElement.innerHTML = logEntry;
|
|
} else {
|
|
logElement.innerHTML = logEntry + logElement.innerHTML;
|
|
}
|
|
}
|
|
|
|
// Backup Functions
|
|
async function loadBackups() {
|
|
try {
|
|
const response = await fetch('/api/admin/backup/list');
|
|
const data = await response.json();
|
|
|
|
const tbody = document.getElementById('backup-list');
|
|
|
|
if (data.backups.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center">No backups found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = data.backups.map(backup => `
|
|
<tr>
|
|
<td><code>${backup.filename}</code></td>
|
|
<td>${backup.size}</td>
|
|
<td>${new Date(backup.created_at).toLocaleString()}</td>
|
|
<td><span class="badge ${backup.backup_type === 'manual' ? 'bg-primary' : 'bg-secondary'}">${backup.backup_type}</span></td>
|
|
<td>
|
|
<button class="btn btn-outline-success btn-sm" onclick="downloadBackup('${backup.filename}')" title="Download">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
// Update last backup info
|
|
if (data.backups.length > 0) {
|
|
document.getElementById('last-backup').textContent = new Date(data.backups[0].created_at).toLocaleString();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load backups:', error);
|
|
document.getElementById('backup-list').innerHTML = '<tr><td colspan="5" class="text-center text-danger">Failed to load backups</td></tr>';
|
|
}
|
|
}
|
|
|
|
async function createBackup() {
|
|
if (!confirm('Create a new database backup?')) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/backup/create', { method: 'POST' });
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
showAlert('Backup created successfully: ' + result.backup_info.filename, 'success');
|
|
loadBackups();
|
|
} else {
|
|
showAlert(result.detail || 'Failed to create backup', 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to create backup:', error);
|
|
showAlert('Failed to create backup', 'error');
|
|
}
|
|
}
|
|
|
|
function downloadBackup(filename) {
|
|
window.open('/api/admin/backup/download', '_blank');
|
|
}
|
|
|
|
// Utility Functions
|
|
function refreshDashboard() {
|
|
loadSystemHealth();
|
|
loadSystemStats();
|
|
loadUsers();
|
|
loadSettings();
|
|
loadLookupTables();
|
|
loadBackups();
|
|
showAlert('Dashboard refreshed', 'info');
|
|
}
|
|
|
|
function searchUsers() {
|
|
const searchTerm = document.getElementById('user-search').value.toLowerCase();
|
|
const filteredUsers = currentUsers.filter(user =>
|
|
user.username.toLowerCase().includes(searchTerm) ||
|
|
user.email.toLowerCase().includes(searchTerm) ||
|
|
(user.first_name && user.first_name.toLowerCase().includes(searchTerm)) ||
|
|
(user.last_name && user.last_name.toLowerCase().includes(searchTerm))
|
|
);
|
|
renderUsersTable(filteredUsers);
|
|
}
|
|
|
|
function filterUsers() {
|
|
loadUsers(); // Reload with current filter
|
|
}
|
|
|
|
function showAlert(message, type = 'info') {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
|
|
alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
|
|
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
document.body.appendChild(alertDiv);
|
|
|
|
// Auto-remove after 5 seconds
|
|
setTimeout(() => {
|
|
if (alertDiv.parentNode) {
|
|
alertDiv.parentNode.removeChild(alertDiv);
|
|
}
|
|
}, 5000);
|
|
}
|
|
</script>
|
|
{% endblock %} |