2694 lines
140 KiB
HTML
2694 lines
140 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}System Administration - Delphi Database{% endblock %}
|
|
|
|
{% block bridge_css %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-12 h-12 bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-400 rounded-xl">
|
|
<i class="fa-solid fa-shield-halved text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">System Administration</h1>
|
|
<p class="text-neutral-600 dark:text-neutral-400">Manage users, settings, and system operations</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button id="refreshStatsBtn" class="flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-rotate-right"></i>
|
|
<span>Refresh</span>
|
|
</button>
|
|
<div class="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 rounded-lg border border-green-200 dark:border-green-800">
|
|
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span class="text-sm font-medium">System Online</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enhanced Stats Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- System Status Card -->
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center justify-center w-12 h-12 bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300 rounded-lg">
|
|
<i class="fa-solid fa-heart-pulse text-xl"></i>
|
|
</div>
|
|
<div id="system-status" class="text-2xl">
|
|
<i class="fas fa-circle text-green-500"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">System Status</h3>
|
|
<p class="text-2xl font-bold text-neutral-900 dark:text-white mt-1" id="system-status-text">Healthy</p>
|
|
<div class="mt-2 flex items-center text-xs text-green-600 dark:text-green-400">
|
|
<i class="fa-solid fa-arrow-up mr-1"></i>
|
|
<span>All systems operational</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Card -->
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center justify-center w-12 h-12 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-lg">
|
|
<i class="fa-solid fa-users text-xl"></i>
|
|
</div>
|
|
<button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="openTab(event, 'users')">
|
|
<i class="fa-solid fa-external-link"></i>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">Total Users</h3>
|
|
<p class="text-3xl font-bold text-neutral-900 dark:text-white mt-1" id="total-users">0</p>
|
|
<div class="mt-2 flex items-center text-xs text-blue-600 dark:text-blue-400">
|
|
<span id="active-users-count">0 active</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database Card -->
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center justify-center w-12 h-12 bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-300 rounded-lg">
|
|
<i class="fa-solid fa-database text-xl"></i>
|
|
</div>
|
|
<button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="openTab(event, 'maintenance')">
|
|
<i class="fa-solid fa-external-link"></i>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">Database Size</h3>
|
|
<p class="text-2xl font-bold text-neutral-900 dark:text-white mt-1" id="db-size">0 MB</p>
|
|
<div class="mt-2 flex items-center text-xs text-purple-600 dark:text-purple-400">
|
|
<span id="db-growth">+0% this week</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Uptime Card -->
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-black/20 transition-all duration-200">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center justify-center w-12 h-12 bg-amber-100 dark:bg-amber-800 text-amber-600 dark:text-amber-300 rounded-lg">
|
|
<i class="fa-solid fa-clock text-xl"></i>
|
|
</div>
|
|
<div class="text-xs text-neutral-500 dark:text-neutral-400">
|
|
99.9% uptime
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-neutral-600 dark:text-neutral-300 uppercase tracking-wide">System Uptime</h3>
|
|
<p class="text-xl font-bold text-neutral-900 dark:text-white mt-1" id="system-uptime">Unknown</p>
|
|
<div class="mt-2 flex items-center text-xs text-amber-600 dark:text-amber-400">
|
|
<span>Last restart: Never</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modern Navigation Tabs -->
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700 mb-8">
|
|
<nav class="flex flex-wrap border-b border-neutral-200 dark:border-neutral-700" role="tablist">
|
|
<button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-primary-600 text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 transition-all duration-200 rounded-t-xl active" id="overview-tab" data-tab-target="#overview" type="button" role="tab">
|
|
<i class="fa-solid fa-chart-line"></i>
|
|
<span>Overview</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="users-tab" data-tab-target="#users" type="button" role="tab">
|
|
<i class="fa-solid fa-users-gear"></i>
|
|
<span>Users</span>
|
|
<span class="ml-1 px-2 py-0.5 bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-400 text-xs rounded-full" id="users-badge">0</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="settings-tab" data-tab-target="#settings" type="button" role="tab">
|
|
<i class="fa-solid fa-sliders"></i>
|
|
<span>Settings</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="maintenance-tab" data-tab-target="#maintenance" type="button" role="tab">
|
|
<i class="fa-solid fa-wrench"></i>
|
|
<span>Maintenance</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="import-tab" data-tab-target="#import" type="button" role="tab">
|
|
<i class="fa-solid fa-file-import"></i>
|
|
<span>Import</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="backup-tab" data-tab-target="#backup" type="button" role="tab">
|
|
<i class="fa-solid fa-shield-halved"></i>
|
|
<span>Backup</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-transparent hover:border-primary-300 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-all duration-200" id="issues-tab" data-tab-target="#issues" type="button" role="tab">
|
|
<i class="fa-solid fa-bug"></i>
|
|
<span>Issues</span>
|
|
<span class="ml-1 px-2 py-0.5 bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-400 text-xs rounded-full hidden" id="issues-badge">0</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Tab Content -->
|
|
<div id="adminTabContent" class="space-y-6">
|
|
<!-- Overview Tab -->
|
|
<div id="overview" role="tabpanel" class="space-y-6">
|
|
<!-- Quick Stats Overview -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- System Statistics -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
|
|
<i class="fa-solid fa-chart-bar text-primary-600 dark:text-primary-400"></i>
|
|
System Statistics
|
|
</h3>
|
|
<button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="loadSystemStats()">
|
|
<i class="fa-solid fa-rotate-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
|
|
<div>
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-300">Total Customers</p>
|
|
<p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-customers">0</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-lg flex items-center justify-center">
|
|
<i class="fa-solid fa-users"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
|
|
<div>
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-300">Total Files</p>
|
|
<p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-files">0</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300 rounded-lg flex items-center justify-center">
|
|
<i class="fa-solid fa-folder"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
|
|
<div>
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-300">Transactions</p>
|
|
<p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-transactions">0</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-300 rounded-lg flex items-center justify-center">
|
|
<i class="fa-solid fa-receipt"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
|
|
<div>
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-300">QDROs</p>
|
|
<p class="text-2xl font-bold text-neutral-900 dark:text-white" id="stat-qdros">0</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-800 text-amber-600 dark:text-amber-300 rounded-lg flex items-center justify-center">
|
|
<i class="fa-solid fa-file-contract"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="text-center">
|
|
<p class="text-lg font-bold text-neutral-900 dark:text-white" id="stat-active-users">0</p>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-300">Active Users</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-lg font-bold text-neutral-900 dark:text-white" id="stat-admins">0</p>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-300">Admin Users</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-300">Last updated</p>
|
|
<p class="text-sm font-medium" id="stats-updated">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Alerts -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
|
|
<i class="fa-solid fa-bell text-amber-500"></i>
|
|
System Alerts
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div id="system-alerts" class="space-y-3">
|
|
<div class="flex items-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 rounded-lg">
|
|
<i class="fa-solid fa-check-circle"></i>
|
|
<div>
|
|
<p class="text-sm font-medium">All Systems Normal</p>
|
|
<p class="text-xs opacity-75">No issues detected</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="mt-6 bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
|
|
<i class="fa-solid fa-bolt text-primary-600 dark:text-primary-400"></i>
|
|
Quick Actions
|
|
</h3>
|
|
</div>
|
|
<div class="p-6 space-y-3">
|
|
<button class="w-full flex items-center gap-3 p-3 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg transition-colors" onclick="openTab(event, 'users')">
|
|
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-lg flex items-center justify-center">
|
|
<i class="fa-solid fa-user-plus text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-neutral-900 dark:text-white">Add User</p>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-300">Create new user account</p>
|
|
</div>
|
|
</button>
|
|
<button class="w-full flex items-center gap-3 p-3 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg transition-colors" onclick="openTab(event, 'backup')">
|
|
<div class="w-8 h-8 bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300 rounded-lg flex items-center justify-center">
|
|
<i class="fa-solid fa-download text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-neutral-900 dark:text-white">Backup Now</p>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-300">Create system backup</p>
|
|
</div>
|
|
</button>
|
|
<button class="w-full flex items-center gap-3 p-3 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg transition-colors" onclick="openTab(event, 'settings')">
|
|
<div class="w-8 h-8 bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-300 rounded-lg flex items-center justify-center">
|
|
<i class="fa-solid fa-cog text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-neutral-900 dark:text-white">System Settings</p>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-300">Configure system options</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
|
|
<i class="fa-solid fa-clock-rotate-left text-primary-600 dark:text-primary-400"></i>
|
|
Recent Activity
|
|
</h3>
|
|
<button class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 text-sm">
|
|
View All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div id="recent-activity" class="space-y-4">
|
|
<div class="flex items-center gap-4 p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
|
|
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300 rounded-full flex items-center justify-center">
|
|
<i class="fa-solid fa-user text-sm"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-neutral-900 dark:text-white">Loading recent activity...</p>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-300">Please wait...</p>
|
|
</div>
|
|
<div class="text-xs text-neutral-500 dark:text-neutral-400">
|
|
--
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Tab -->
|
|
<div id="users" role="tabpanel" class="hidden space-y-6">
|
|
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm dark:shadow-none border border-neutral-200 dark:border-neutral-700">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-neutral-900 dark:text-white flex items-center gap-2">
|
|
<i class="fa-solid fa-users-gear text-primary-600 dark:text-primary-400"></i>
|
|
User Management
|
|
</h3>
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-300 mt-1">Manage user accounts and permissions</p>
|
|
</div>
|
|
<button type="button" class="flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors duration-200" onclick="showCreateUserModal()">
|
|
<i class="fa-solid fa-user-plus"></i>
|
|
<span>Add User</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter Controls -->
|
|
<div class="px-6 py-4 bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fa-solid fa-magnifying-glass text-neutral-400"></i>
|
|
</div>
|
|
<input type="text" class="w-full pl-10 pr-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent placeholder-neutral-500"
|
|
id="user-search" placeholder="Search users by name, email, or username..." onkeyup="searchUsers()">
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<select class="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="user-filter" onchange="filterUsers()">
|
|
<option value="all">All Users</option>
|
|
<option value="active">Active Only</option>
|
|
<option value="inactive">Inactive Only</option>
|
|
<option value="admin">Admins Only</option>
|
|
</select>
|
|
<button type="button" class="px-4 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors" onclick="loadUsers()">
|
|
<i class="fa-solid fa-rotate-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-neutral-200 dark:border-neutral-700">
|
|
<th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">User</th>
|
|
<th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Role</th>
|
|
<th class="px-6 py-4 text-left text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Last Login</th>
|
|
<th class="px-6 py-4 text-right text-xs font-medium text-neutral-600 dark:text-neutral-400 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-table-body" class="divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-12 text-center">
|
|
<div class="flex flex-col items-center gap-3">
|
|
<div class="w-12 h-12 bg-neutral-100 dark:bg-neutral-700 rounded-full flex items-center justify-center">
|
|
<i class="fa-solid fa-spinner fa-spin text-neutral-400"></i>
|
|
</div>
|
|
<p class="text-neutral-600 dark:text-neutral-400">Loading users...</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
|
|
<nav class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-400">
|
|
<span id="users-count-display">0 users total</span>
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2" id="users-pagination">
|
|
<!-- Pagination will be inserted here -->
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="settings" role="tabpanel" class="hidden">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-sliders-h"></i> System Settings</h5>
|
|
<button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="showCreateSettingModal()">
|
|
<i class="fas fa-plus"></i> Add Setting
|
|
</button>
|
|
</div>
|
|
<div class="p-4">
|
|
<!-- Quick Setting: Inactivity Warning Minutes -->
|
|
<div class="mb-4 p-4 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-lg">
|
|
<div class="flex items-end gap-3 flex-wrap">
|
|
<div class="flex-1 min-w-[220px]">
|
|
<label for="inactivityMinutesInput" class="block text-sm font-medium mb-1">Inactivity warning (minutes)</label>
|
|
<input id="inactivityMinutesInput" type="number" min="1" step="1" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="e.g. 240">
|
|
<p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">User will see a warning after this many minutes of inactivity. Auto-logout occurs a few minutes after the warning.</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" class="px-3 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="saveInactivitySetting()">
|
|
<i class="fa-solid fa-floppy-disk"></i> Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
|
|
<table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<thead class="bg-primary-600 text-white">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Setting Key</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Value</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Type</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Description</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="settings-table-body" class="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<tr>
|
|
<td colspan="5" class="text-center px-4 py-4 text-neutral-500">Loading settings...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Maintenance Tab -->
|
|
<div id="maintenance" role="tabpanel" class="hidden">
|
|
<div class="flex flex-wrap -mx-4">
|
|
<div class="w-full md:w-1/2 px-4">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-database"></i> Database Maintenance</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<p class="text-neutral-700 dark:text-neutral-300">Optimize database performance and clean up data.</p>
|
|
<div class="grid gap-2">
|
|
<button type="button" class="px-4 py-2 bg-warning-600 hover:bg-warning-700 text-white rounded" onclick="vacuumDatabase()">
|
|
<i class="fas fa-compress-alt"></i> Vacuum Database
|
|
</button>
|
|
<button type="button" class="px-4 py-2 bg-info-600 hover:bg-info-700 text-white rounded" onclick="analyzeDatabase()">
|
|
<i class="fas fa-chart-line"></i> Analyze Statistics
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-4 mt-4 md:mt-0">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-table"></i> Lookup Tables</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div id="lookup-tables">
|
|
<p class="text-neutral-500 dark:text-neutral-400">Loading lookup table information...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-history"></i> Maintenance Log</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div id="maintenance-log">
|
|
<p class="text-neutral-500 dark:text-neutral-400">No maintenance operations performed yet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Import Tab -->
|
|
<div id="import" role="tabpanel" class="hidden">
|
|
<div class="flex flex-wrap -mx-4">
|
|
<div class="w-full px-4">
|
|
<h4 class="mb-4 text-xl font-semibold"><i class="fa-solid fa-upload"></i> Data Import Management</h4>
|
|
|
|
<!-- Import Status Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-4">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
|
|
<h5 class="m-0 font-semibold"><i class="fa-solid fa-circle-info"></i> Current Database Status</h5>
|
|
<button class="px-3 py-1.5 border border-info-600 text-info-700 dark:text-info-200 rounded text-sm hover:bg-info-50 dark:hover:bg-info-900/20" onclick="loadImportStatus()">
|
|
<i class="fa-solid fa-rotate-right"></i> Refresh
|
|
</button>
|
|
</div>
|
|
<div class="p-4">
|
|
<div id="importStatus">
|
|
<div class="text-center">
|
|
<div class="inline-block w-6 h-6 border-2 border-neutral-300 border-t-primary-600 rounded-full animate-spin"></div>
|
|
<p class="mt-2">Loading import status...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSV File Upload Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-4">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fa-regular fa-file-arrow-up"></i> Upload CSV Files</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<form id="adminImportForm" enctype="multipart/form-data">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full md:w-1/3 px-3 mb-3">
|
|
<label for="adminFileType" class="block text-sm font-medium mb-1">Data Type *</label>
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="adminFileType" name="fileType" required>
|
|
<option value="">Select data type...</option>
|
|
</select>
|
|
<div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1" id="adminFileTypeDescription"></div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-3 mb-3">
|
|
<label for="adminCsvFile" class="block text-sm font-medium mb-1">CSV File *</label>
|
|
<input type="file" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="adminCsvFile" name="csvFile" accept=".csv" required>
|
|
<div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Select the CSV file to import</div>
|
|
</div>
|
|
<div class="w-full md:w-1/6 px-3 mb-3">
|
|
<label class="block text-sm font-medium mb-1"> </label>
|
|
<label class="inline-flex items-center gap-2">
|
|
<input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="adminReplaceExisting" name="replaceExisting">
|
|
<span>Replace existing data</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<div class="flex flex-wrap gap-2">
|
|
<button type="button" class="px-4 py-2 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="validateAdminFile()">
|
|
<i class="fa-regular fa-circle-check"></i> Validate File
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded" id="adminImportBtn">
|
|
<i class="fa-solid fa-upload"></i> Import Data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Validation Results Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-4 hidden" id="adminValidationPanel">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fa-solid fa-clipboard-check"></i> File Validation Results</h5>
|
|
</div>
|
|
<div class="p-4" id="adminValidationResults">
|
|
<!-- Validation results will be shown here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import Progress Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-4 hidden" id="adminProgressPanel">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fa-solid fa-hourglass-half"></i> Import Progress</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="w-full bg-neutral-100 dark:bg-neutral-700 rounded h-3 overflow-hidden mb-3">
|
|
<div class="h-3 bg-primary-600 transition-all" style="width: 0%" id="adminProgressBar"></div>
|
|
</div>
|
|
<div id="adminProgressStatus">Ready to import...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import Results Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-4 hidden" id="adminResultsPanel">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fa-solid fa-circle-check"></i> Import Results</h5>
|
|
</div>
|
|
<div class="p-4" id="adminImportResults">
|
|
<!-- Import results will be shown here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Management Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fa-solid fa-database"></i> Data Management</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex flex-wrap -mx-4">
|
|
<div class="w-full md:w-1/2 px-4">
|
|
<h6 class="font-semibold">Clear Table Data</h6>
|
|
<p class="text-neutral-500 dark:text-neutral-400 text-sm">Remove all records from a specific table (cannot be undone)</p>
|
|
<div class="flex items-center gap-2">
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="adminClearTableType">
|
|
<option value="">Select table to clear...</option>
|
|
</select>
|
|
<button class="px-3 py-2 bg-danger-600 hover:bg-danger-700 text-white rounded" onclick="clearAdminTable()">
|
|
<i class="fa-solid fa-trash"></i> Clear Table
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-4 mt-4 md:mt-0">
|
|
<h6 class="font-semibold">Quick Actions</h6>
|
|
<div class="grid gap-2">
|
|
<button class="px-3 py-2 border border-info-600 text-info-700 dark:text-info-200 rounded hover:bg-info-50 dark:hover:bg-info-900/20" onclick="viewImportLogs()">
|
|
<i class="fa-regular fa-file-lines"></i> View Import Logs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup Tab -->
|
|
<div id="backup" role="tabpanel" class="hidden">
|
|
<div class="flex flex-wrap -mx-4">
|
|
<div class="w-full md:w-1/2 px-4">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-download"></i> Create Backup</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<p class="text-neutral-700 dark:text-neutral-300">Create a manual backup of the database.</p>
|
|
<button type="button" class="w-full px-4 py-2 bg-success-600 hover:bg-success-700 text-white rounded text-lg" onclick="createBackup()">
|
|
<i class="fas fa-download"></i> Create Backup Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-4 mt-4 md:mt-0">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-info-circle"></i> Backup Information</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<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="mt-4">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-list"></i> Available Backups</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
|
|
<table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<thead class="bg-primary-600 text-white">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Filename</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Size</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Created</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Type</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="backup-list" class="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<tr>
|
|
<td colspan="5" class="text-center px-4 py-4 text-neutral-500">Loading backups...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Issues Tab -->
|
|
<div id="issues" role="tabpanel" class="hidden">
|
|
<div class="mb-4 grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<!-- Issue Statistics Cards -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-danger-300 dark:border-danger-700 rounded-lg shadow p-4 text-center">
|
|
<h2 class="text-danger-600 text-2xl font-semibold" id="high-priority-count">0</h2>
|
|
<h6>High Priority</h6>
|
|
</div>
|
|
<div class="bg-white dark:bg-neutral-800 border border-warning-300 dark:border-warning-700 rounded-lg shadow p-4 text-center">
|
|
<h2 class="text-warning-600 text-2xl font-semibold" id="open-issues-count">0</h2>
|
|
<h6>Open Issues</h6>
|
|
</div>
|
|
<div class="bg-white dark:bg-neutral-800 border border-info-300 dark:border-info-700 rounded-lg shadow p-4 text-center">
|
|
<h2 class="text-info-600 text-2xl font-semibold" id="in-progress-count">0</h2>
|
|
<h6>In Progress</h6>
|
|
</div>
|
|
<div class="bg-white dark:bg-neutral-800 border border-success-300 dark:border-success-700 rounded-lg shadow p-4 text-center">
|
|
<h2 class="text-success-600 text-2xl font-semibold" id="resolved-count">0</h2>
|
|
<h6>Resolved</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Issue Management -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700 flex items-center justify-between">
|
|
<h5 class="m-0 font-semibold"><i class="fas fa-bug"></i> Internal Issues & Bugs</h5>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" class="px-3 py-1.5 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-sm hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="loadIssues()">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
<button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="openSupportModal()">
|
|
<i class="fas fa-plus"></i> New Issue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<!-- Filters -->
|
|
<div class="flex flex-wrap -mx-2 mb-3 items-center">
|
|
<div class="w-full md:w-1/4 px-2 mb-3 md:mb-0">
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm" id="issueStatusFilter" onchange="filterIssues()">
|
|
<option value="">All Statuses</option>
|
|
<option value="open">Open</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="resolved">Resolved</option>
|
|
<option value="closed">Closed</option>
|
|
</select>
|
|
</div>
|
|
<div class="w-full md:w-1/4 px-2 mb-3 md:mb-0">
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm" id="issuePriorityFilter" onchange="filterIssues()">
|
|
<option value="">All Priorities</option>
|
|
<option value="urgent">Urgent</option>
|
|
<option value="high">High</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
</div>
|
|
<div class="w-full md:w-1/4 px-2 mb-3 md:mb-0">
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm" id="issueCategoryFilter" onchange="filterIssues()">
|
|
<option value="">All Categories</option>
|
|
<option value="bug_report">Bug Reports</option>
|
|
<option value="qa_issue">QA Issues</option>
|
|
<option value="feature_request">Feature Requests</option>
|
|
<option value="database_issue">Database Issues</option>
|
|
<option value="system_error">System Errors</option>
|
|
<option value="performance">Performance</option>
|
|
<option value="user_access">User Access</option>
|
|
<option value="configuration">Configuration</option>
|
|
<option value="documentation">Documentation</option>
|
|
<option value="testing">Testing</option>
|
|
</select>
|
|
</div>
|
|
<div class="w-full md:w-1/4 px-2">
|
|
<label class="inline-flex items-center gap-2 text-sm">
|
|
<input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="assignedToMeFilter" onchange="filterIssues()">
|
|
<span>Assigned to me</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Issues Table -->
|
|
<div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
|
|
<table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<thead class="bg-primary-600 text-white">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">ID</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Type</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Priority</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Subject</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Reporter</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Status</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Assigned</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Created</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="issues-table-body" class="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<tr>
|
|
<td colspan="9" class="text-center px-4 py-4 text-neutral-500">Loading issues...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Issue Detail Modal -->
|
|
<div id="issueDetailModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
|
|
<div class="mx-auto w-full max-w-7xl max-h-[90vh] overflow-y-auto">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="font-semibold flex items-center gap-2" id="issueDetailModalTitle">
|
|
<i class="fas fa-bug"></i>
|
|
<span>Issue Details</span>
|
|
</h5>
|
|
<button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('issueDetailModal')">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-4 py-4">
|
|
<div class="flex flex-wrap -mx-4">
|
|
<!-- Left Column - Issue Details -->
|
|
<div class="w-full md:w-2/3 px-4">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-3">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="px-2 py-1 rounded bg-primary-600 text-white text-xs" id="issueDetailNumber">ST-2025-XXXX</span>
|
|
<span class="px-2 py-1 rounded bg-primary-100 text-primary-700 dark:bg-primary-800 dark:text-primary-200 text-xs" id="issueDetailCategory">category</span>
|
|
<span class="px-2 py-1 rounded bg-neutral-200 dark:bg-neutral-700 text-xs" id="issueDetailPriority">priority</span>
|
|
</div>
|
|
<span class="px-2 py-1 rounded text-xs bg-neutral-200 dark:bg-neutral-700" id="issueDetailStatus">status</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<h5 class="font-semibold" id="issueDetailSubject">Issue subject</h5>
|
|
<div class="mt-3">
|
|
<h6 class="font-medium">Description:</h6>
|
|
<div id="issueDetailDescription" class="whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800/50 p-4 rounded"></div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<h6 class="font-medium">Context Information:</h6>
|
|
<div class="flex flex-wrap -mx-4">
|
|
<div class="w-full md:w-1/2 px-4">
|
|
<small><strong>Page:</strong> <span id="issueDetailPage">-</span></small>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-4">
|
|
<small><strong>Browser:</strong> <span id="issueDetailBrowser">-</span></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Responses Section -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="m-0 font-semibold">Comments & Updates</h6>
|
|
</div>
|
|
<div class="p-4">
|
|
<div id="issueResponses">
|
|
<p class="text-neutral-500 dark:text-neutral-400">No comments yet.</p>
|
|
</div>
|
|
|
|
<!-- Add Response Form -->
|
|
<div class="mt-3 border-t pt-3">
|
|
<textarea class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg mb-2" id="newResponseText" rows="3" placeholder="Add a comment..."></textarea>
|
|
<div class="flex items-center justify-between">
|
|
<label class="inline-flex items-center gap-2">
|
|
<input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="internalResponseCheck">
|
|
<span>Internal note (not visible to reporter)</span>
|
|
</label>
|
|
<button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded text-sm" onclick="addResponse()">
|
|
<i class="fas fa-comment"></i> Add Comment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column - Issue Management -->
|
|
<div class="w-full md:w-1/3 px-4">
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow mb-3">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="m-0 font-semibold">Issue Management</h6>
|
|
</div>
|
|
<div class="p-4">
|
|
<form id="issueUpdateForm">
|
|
<input type="hidden" id="currentIssueId">
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-sm font-medium mb-1">Status</label>
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-sm" id="updateStatus">
|
|
<option value="open">Open</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="resolved">Resolved</option>
|
|
<option value="closed">Closed</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-sm font-medium mb-1">Priority</label>
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-sm" id="updatePriority">
|
|
<option value="low">Low</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="high">High</option>
|
|
<option value="urgent">Urgent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-sm font-medium mb-1">Assign To</label>
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-sm" id="updateAssignee">
|
|
<option value="">Unassigned</option>
|
|
<!-- Will be populated with users -->
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button" class="w-full px-3 py-2 bg-success-600 hover:bg-success-700 text-white rounded text-sm" onclick="updateIssue()">
|
|
<i class="fas fa-save"></i> Update Issue
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow">
|
|
<div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="m-0 font-semibold">Issue Info</h6>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="mb-2">
|
|
<small class="text-neutral-500">Reporter:</small><br>
|
|
<span id="issueDetailReporter">-</span>
|
|
</div>
|
|
<div class="mb-2">
|
|
<small class="text-neutral-500">Email:</small><br>
|
|
<span id="issueDetailEmail">-</span>
|
|
</div>
|
|
<div class="mb-2">
|
|
<small class="text-neutral-500">Created:</small><br>
|
|
<span id="issueDetailCreated">-</span>
|
|
</div>
|
|
<div class="mb-2">
|
|
<small class="text-neutral-500">Last Updated:</small><br>
|
|
<span id="issueDetailUpdated">-</span>
|
|
</div>
|
|
<div class="mb-2" id="issueResolvedInfo" style="display: none;">
|
|
<small class="text-neutral-500">Resolved:</small><br>
|
|
<span id="issueDetailResolved">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Management Modal -->
|
|
<div id="userModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
|
|
<div class="mx-auto w-full max-w-xl">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="font-semibold" id="userModalTitle">Add User</h5>
|
|
<button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('userModal')">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-4 py-4">
|
|
<form id="userForm">
|
|
<input type="hidden" id="userId">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div>
|
|
<label for="username" class="block text-sm font-medium mb-1">Username *</label>
|
|
<input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="username" required>
|
|
</div>
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium mb-1">Email *</label>
|
|
<input type="email" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="email" required>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div>
|
|
<label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
|
|
<input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="firstName">
|
|
</div>
|
|
<div>
|
|
<label for="lastName" class="block text-sm font-medium mb-1">Last Name</label>
|
|
<input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="lastName">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3" id="passwordFields">
|
|
<label for="password" class="block text-sm font-medium mb-1">Password *</label>
|
|
<input type="password" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="password" required>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="inline-flex items-center gap-2">
|
|
<input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="isAdmin">
|
|
<span>Administrator</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="inline-flex items-center gap-2">
|
|
<input class="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" type="checkbox" id="isActive" checked>
|
|
<span>Active</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700">
|
|
<button type="button" class="px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="closeModal('userModal')">Cancel</button>
|
|
<button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="saveUser()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
|
|
<div class="mx-auto w-full max-w-xl">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="font-semibold" id="settingModalTitle">Add Setting</h5>
|
|
<button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('settingModal')">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-4 py-4">
|
|
<form id="settingForm">
|
|
<div class="mb-3">
|
|
<label for="settingKey" class="block text-sm font-medium mb-1">Setting Key *</label>
|
|
<input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="settingKey" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="settingValue" class="block text-sm font-medium mb-1">Setting Value *</label>
|
|
<input type="text" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="settingValue" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="settingType" class="block text-sm font-medium mb-1">Setting Type</label>
|
|
<select class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" 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="block text-sm font-medium mb-1">Description</label>
|
|
<textarea class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="settingDescription" rows="3"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700">
|
|
<button type="button" class="px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="closeModal('settingModal')">Cancel</button>
|
|
<button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="saveSetting()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Reset Modal -->
|
|
<div id="passwordModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
|
|
<div class="mx-auto w-full max-w-md">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="font-semibold">Reset Password</h5>
|
|
<button type="button" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" onclick="closeModal('passwordModal')">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-4 py-4">
|
|
<form id="passwordForm">
|
|
<input type="hidden" id="resetUserId">
|
|
<div class="mb-3">
|
|
<label for="newPassword" class="block text-sm font-medium mb-1">New Password *</label>
|
|
<input type="password" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="newPassword" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="confirmPassword" class="block text-sm font-medium mb-1">Confirm Password *</label>
|
|
<input type="password" class="w-full px-3 py-2 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="confirmPassword" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-neutral-200 dark:border-neutral-700">
|
|
<button type="button" class="px-3 py-1.5 border border-neutral-300 dark:border-neutral-600 rounded hover:bg-neutral-50 dark:hover:bg-neutral-700" onclick="closeModal('passwordModal')">Cancel</button>
|
|
<button type="button" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded" onclick="resetPassword()">Reset Password</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Close main admin content container and tab content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Global variables
|
|
let currentUsers = [];
|
|
let currentSettings = [];
|
|
let userPagination = { page: 1, limit: 10 };
|
|
|
|
// Helper function for authenticated API calls
|
|
function getAuthHeaders() {
|
|
const token = localStorage.getItem('auth_token');
|
|
return {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
};
|
|
}
|
|
|
|
// Check if current user has admin access
|
|
async function checkAdminAccess() {
|
|
const token = localStorage.getItem('auth_token');
|
|
if (!token) {
|
|
window.location.href = '/login';
|
|
return false;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/me', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
window.location.href = '/login';
|
|
return false;
|
|
}
|
|
|
|
const user = await response.json();
|
|
return user.is_admin === true;
|
|
} catch (error) {
|
|
console.error('Error checking admin access:', error);
|
|
window.location.href = '/login';
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Minimal UI helpers (Tailwind modals)
|
|
function openModal(id) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal(id) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.classList.add('hidden');
|
|
}
|
|
|
|
function initializeTabs() {
|
|
const tabs = document.querySelectorAll('nav[role="tablist"] button[role="tab"]');
|
|
const panes = document.querySelectorAll('#adminTabContent > div[role="tabpanel"]');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', (event) => {
|
|
openTab(event, tab.getAttribute('data-tab-target')?.replace('#', ''));
|
|
});
|
|
});
|
|
}
|
|
|
|
function openTab(event, tabName) {
|
|
const tabs = document.querySelectorAll('nav[role="tablist"] button[role="tab"]');
|
|
const panes = document.querySelectorAll('#adminTabContent > div[role="tabpanel"]');
|
|
|
|
// Remove active states
|
|
tabs.forEach(t => {
|
|
t.classList.remove('border-primary-600', 'text-primary-600', 'bg-primary-50', 'dark:bg-primary-900/20', 'active');
|
|
t.classList.add('border-transparent', 'text-neutral-600', 'dark:text-neutral-400');
|
|
});
|
|
|
|
// Hide all panes
|
|
panes.forEach(p => p.classList.add('hidden'));
|
|
|
|
// Activate clicked tab
|
|
if (event && event.currentTarget) {
|
|
event.currentTarget.classList.remove('border-transparent', 'text-neutral-600', 'dark:text-neutral-400');
|
|
event.currentTarget.classList.add('border-primary-600', 'text-primary-600', 'dark:text-primary-400', 'bg-primary-50', 'dark:bg-primary-900/20', 'active');
|
|
}
|
|
|
|
// Show target pane
|
|
const targetPane = document.getElementById(tabName);
|
|
if (targetPane) {
|
|
targetPane.classList.remove('hidden');
|
|
}
|
|
|
|
// Load tab-specific content
|
|
onTabShown(tabName);
|
|
}
|
|
|
|
function onTabShown(tabName) {
|
|
if (tabName === 'issues') {
|
|
loadIssues();
|
|
loadIssueStats();
|
|
} else if (tabName === 'import') {
|
|
loadAvailableImportFiles();
|
|
loadImportStatus();
|
|
} else if (tabName === 'backup') {
|
|
loadBackups();
|
|
} else if (tabName === 'users') {
|
|
loadUsers();
|
|
} else if (tabName === 'settings') {
|
|
loadSettings();
|
|
}
|
|
}
|
|
|
|
// Initialize admin dashboard
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check admin permissions first
|
|
checkAdminAccess().then(hasAccess => {
|
|
if (!hasAccess) {
|
|
window.location.href = '/customers'; // Redirect to a safe page
|
|
return;
|
|
}
|
|
|
|
loadSystemHealth();
|
|
loadSystemStats();
|
|
loadUsers();
|
|
loadSettings();
|
|
loadLookupTables();
|
|
loadBackups();
|
|
// Tabs setup
|
|
initializeTabs();
|
|
|
|
// Auto-refresh every 5 minutes
|
|
setInterval(loadSystemHealth, 300000);
|
|
|
|
});
|
|
});
|
|
|
|
// System Health Functions
|
|
async function loadSystemHealth() {
|
|
try {
|
|
const response = await fetch('/api/admin/health', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
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-600"></i>';
|
|
statusTextElement.textContent = 'Healthy';
|
|
} else {
|
|
statusElement.innerHTML = '<i class="fas fa-circle text-danger-600"></i>';
|
|
statusTextElement.textContent = 'Unhealthy';
|
|
}
|
|
|
|
// Update system info with better formatting
|
|
const formatUptime = (uptime) => {
|
|
if (!uptime || uptime === 'Unknown') return 'Unknown';
|
|
|
|
// Parse the uptime string (format: "0:00:05" or "1 day, 0:00:05")
|
|
const parts = uptime.split(', ');
|
|
if (parts.length === 1) {
|
|
// Less than a day: "0:00:05"
|
|
const [hours, minutes, seconds] = parts[0].split(':');
|
|
return `${parseInt(hours)}h ${parseInt(minutes)}m ${parseInt(seconds)}s`;
|
|
} else {
|
|
// More than a day: "1 day, 0:00:05"
|
|
const days = parts[0];
|
|
const [hours, minutes, seconds] = parts[1].split(':');
|
|
return `${days}, ${parseInt(hours)}h ${parseInt(minutes)}m`;
|
|
}
|
|
};
|
|
|
|
document.getElementById('system-uptime').textContent = formatUptime(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="bg-warning-50 border-l-4 border-warning-500 text-warning-700 text-sm p-2 rounded mb-1">${alert}</div>`
|
|
).join('');
|
|
} else {
|
|
alertsElement.innerHTML = '<p class="text-neutral-500 dark:text-neutral-400">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', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
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-b pb-2 mb-2">
|
|
<small class="text-neutral-500 dark:text-neutral-400">${activity.timestamp ? new Date(activity.timestamp).toLocaleString() : 'Recent'}</small><br>
|
|
${activity.description}
|
|
</div>`
|
|
).join('');
|
|
} else {
|
|
activityElement.innerHTML = '<p class="text-neutral-500 dark:text-neutral-400">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, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
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="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${user.is_active ? 'bg-success-100 text-success-800 dark:bg-success-800 dark:text-success-200' : 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'}">${user.is_active ? 'Active' : 'Inactive'}</span>
|
|
</td>
|
|
<td>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${user.is_admin ? 'bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200' : 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'}">${user.is_admin ? 'Admin' : 'User'}</span>
|
|
</td>
|
|
<td>${user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never'}</td>
|
|
<td>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-2 py-1 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-xs hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="editUser(${user.id})" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="px-2 py-1 border border-warning-600 text-warning-700 dark:text-warning-200 rounded text-xs hover:bg-warning-50 dark:hover:bg-warning-900/20" onclick="showPasswordModal(${user.id})" title="Reset Password">
|
|
<i class="fas fa-key"></i>
|
|
</button>
|
|
<button class="px-2 py-1 border border-danger-600 text-danger-700 dark:text-danger-200 rounded text-xs hover:bg-danger-50 dark:hover:bg-danger-900/20" 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;
|
|
openModal('userModal');
|
|
}
|
|
|
|
async function editUser(userId) {
|
|
try {
|
|
const response = await fetch('/api/admin/users/' + userId, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
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';
|
|
|
|
openModal('userModal');
|
|
|
|
} 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: getAuthHeaders(),
|
|
body: JSON.stringify(userData)
|
|
});
|
|
|
|
if (response.ok) {
|
|
closeModal('userModal');
|
|
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();
|
|
openModal('passwordModal');
|
|
}
|
|
|
|
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: getAuthHeaders(),
|
|
body: JSON.stringify({
|
|
new_password: newPassword,
|
|
confirm_password: confirmPassword
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
closeModal('passwordModal');
|
|
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',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
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', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
const data = await response.json();
|
|
currentSettings = data.settings;
|
|
|
|
renderSettingsTable(data.settings);
|
|
// Sync quick-setting input
|
|
syncInactivitySettingUI();
|
|
|
|
} 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="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300">${setting.setting_type}</span></td>
|
|
<td>${setting.description || '-'}</td>
|
|
<td>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-2 py-1 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-xs hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="editSetting('${setting.setting_key}')" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="px-2 py-1 border border-danger-600 text-danger-700 dark:text-danger-200 rounded text-xs hover:bg-danger-50 dark:hover:bg-danger-900/20" 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;
|
|
document.getElementById('settingModal').classList.remove('hidden');
|
|
}
|
|
|
|
async function editSetting(settingKey) {
|
|
try {
|
|
const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey), {
|
|
headers: getAuthHeaders()
|
|
});
|
|
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 || '';
|
|
|
|
document.getElementById('settingModal').classList.remove('hidden');
|
|
|
|
} 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: getAuthHeaders(),
|
|
body: JSON.stringify(isEdit ? {
|
|
setting_value: settingData.setting_value,
|
|
description: settingData.description
|
|
} : settingData)
|
|
});
|
|
|
|
if (response.ok) {
|
|
document.getElementById('settingModal').classList.add('hidden');
|
|
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');
|
|
}
|
|
}
|
|
|
|
// Inactivity quick-setting helpers
|
|
function getSettingValueByKey(key) {
|
|
const found = (currentSettings || []).find(s => s.setting_key === key);
|
|
return found ? found.setting_value : null;
|
|
}
|
|
|
|
function syncInactivitySettingUI() {
|
|
const input = document.getElementById('inactivityMinutesInput');
|
|
if (!input) return;
|
|
let value = getSettingValueByKey('inactivity_warning_minutes');
|
|
if (!value) value = '240';
|
|
input.value = value;
|
|
}
|
|
|
|
async function saveInactivitySetting() {
|
|
const input = document.getElementById('inactivityMinutesInput');
|
|
const raw = (input?.value || '').trim();
|
|
const minutes = parseInt(raw, 10);
|
|
if (!Number.isFinite(minutes) || minutes <= 0) {
|
|
if (window.alerts) window.alerts.error('Please enter a valid positive number of minutes.', { duration: 4000 });
|
|
return;
|
|
}
|
|
|
|
const existing = (currentSettings || []).some(s => s.setting_key === 'inactivity_warning_minutes');
|
|
const url = existing ? '/api/admin/settings/' + encodeURIComponent('inactivity_warning_minutes') : '/api/admin/settings';
|
|
const method = existing ? 'PUT' : 'POST';
|
|
const body = existing ? {
|
|
setting_value: String(minutes),
|
|
description: 'Minutes of inactivity before session warning',
|
|
} : {
|
|
setting_key: 'inactivity_warning_minutes',
|
|
setting_value: String(minutes),
|
|
description: 'Minutes of inactivity before session warning',
|
|
setting_type: 'INTEGER'
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method,
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify(body)
|
|
});
|
|
if (!response.ok) throw new Error('Failed to save setting');
|
|
|
|
// Refresh settings list/UI
|
|
await loadSettings();
|
|
if (window.alerts) window.alerts.success('Inactivity warning setting saved.', { duration: 3000 });
|
|
} catch (err) {
|
|
console.error(err);
|
|
if (window.alerts) window.alerts.error('Could not save inactivity setting.', { duration: 4000 });
|
|
}
|
|
}
|
|
|
|
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',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
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', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
const data = await response.json();
|
|
|
|
const element = document.getElementById('lookup-tables');
|
|
element.innerHTML = data.tables.map(table => `
|
|
<div class="flex justify-between items-center border-b pb-2 mb-2">
|
|
<div>
|
|
<strong>${table.display_name}</strong><br>
|
|
<small class="text-neutral-500 dark:text-neutral-400">${table.description}</small>
|
|
</div>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-info-100 text-info-800 dark:bg-info-800 dark:text-info-200">${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-600 dark:text-danger-400">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',
|
|
headers: getAuthHeaders()
|
|
});
|
|
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',
|
|
headers: getAuthHeaders()
|
|
});
|
|
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-b pb-2 mb-2">
|
|
<small class="text-neutral-500 dark:text-neutral-400">${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', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
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="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${backup.backup_type === 'manual' ? 'bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200' : 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'}">${backup.backup_type}</span>
|
|
</td>
|
|
<td>
|
|
<button class="px-2 py-1 border border-success-600 text-success-700 dark:text-success-200 rounded text-xs hover:bg-success-50 dark:hover:bg-success-900/20" 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-600 dark:text-danger-400">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',
|
|
headers: getAuthHeaders()
|
|
});
|
|
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');
|
|
}
|
|
}
|
|
|
|
async function downloadBackup(filename) {
|
|
try {
|
|
const response = await fetch('/api/admin/backup/download', {
|
|
method: 'GET',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
let errorMsg = 'Failed to download backup';
|
|
try {
|
|
const err = await response.json();
|
|
errorMsg = err.detail || errorMsg;
|
|
} catch (_) {}
|
|
showAlert(errorMsg, 'error');
|
|
return;
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
|
|
// Try to extract filename from headers if provided
|
|
let suggestedName = filename || 'database_backup.db';
|
|
const disp = response.headers.get('Content-Disposition') || response.headers.get('content-disposition');
|
|
if (disp) {
|
|
const match = /filename\*=UTF-8''([^;]+)|filename="?([^";]+)"?/i.exec(disp);
|
|
const extracted = match && (match[1] || match[2]);
|
|
if (extracted) {
|
|
try { suggestedName = decodeURIComponent(extracted); } catch (_) { suggestedName = extracted; }
|
|
}
|
|
}
|
|
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = suggestedName;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
console.error('Backup download failed:', error);
|
|
showAlert('Failed to download backup', 'error');
|
|
}
|
|
}
|
|
|
|
// Utility Functions
|
|
function refreshDashboard() {
|
|
loadSystemHealth();
|
|
loadSystemStats();
|
|
loadUsers();
|
|
loadSettings();
|
|
loadLookupTables();
|
|
loadBackups();
|
|
|
|
// Only refresh issues if on issues tab
|
|
if (document.getElementById('issues-tab').classList.contains('active')) {
|
|
loadIssues();
|
|
loadIssueStats();
|
|
}
|
|
|
|
showAlert('Dashboard refreshed', 'info');
|
|
}
|
|
|
|
// Issue Tracking Functions
|
|
let currentIssues = [];
|
|
let allUsers = [];
|
|
|
|
async function loadIssues() {
|
|
try {
|
|
const statusFilter = document.getElementById('issueStatusFilter').value;
|
|
const priorityFilter = document.getElementById('issuePriorityFilter').value;
|
|
const categoryFilter = document.getElementById('issueCategoryFilter').value;
|
|
const assignedToMe = document.getElementById('assignedToMeFilter').checked;
|
|
|
|
let url = '/api/support/tickets?';
|
|
if (statusFilter) url += 'status=' + encodeURIComponent(statusFilter) + '&';
|
|
if (priorityFilter) url += 'priority=' + encodeURIComponent(priorityFilter) + '&';
|
|
if (categoryFilter) url += 'category=' + encodeURIComponent(categoryFilter) + '&';
|
|
if (assignedToMe) url += 'assigned_to_me=true&';
|
|
|
|
const response = await fetch(url, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load issues');
|
|
}
|
|
|
|
const issues = await response.json();
|
|
currentIssues = issues;
|
|
|
|
renderIssuesTable(issues);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load issues:', error);
|
|
document.getElementById('issues-table-body').innerHTML = '<tr><td colspan="9" class="text-center text-danger-600 dark:text-danger-400">Failed to load issues</td></tr>';
|
|
showAlert('Failed to load issues', 'error');
|
|
}
|
|
}
|
|
|
|
async function loadIssueStats() {
|
|
try {
|
|
const response = await fetch('/api/support/stats', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load issue stats');
|
|
}
|
|
|
|
const stats = await response.json();
|
|
|
|
// Update dashboard cards
|
|
const updateElement = (id, value) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.textContent = value || 0;
|
|
}
|
|
};
|
|
|
|
updateElement('high-priority-count', (stats.high_priority_tickets || 0) + (stats.urgent_tickets || 0));
|
|
updateElement('open-issues-count', stats.open_tickets || 0);
|
|
updateElement('in-progress-count', stats.in_progress_tickets || 0);
|
|
updateElement('resolved-count', stats.resolved_tickets || 0);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load issue stats:', error);
|
|
showAlert('Failed to load issue statistics', 'error');
|
|
}
|
|
}
|
|
|
|
function renderIssuesTable(issues) {
|
|
const tbody = document.getElementById('issues-table-body');
|
|
|
|
if (issues.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="9" class="text-center">No issues found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = issues.map(issue => {
|
|
const priorityClass = {
|
|
'urgent': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
|
|
'high': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200',
|
|
'medium': 'bg-info-100 text-info-800 dark:bg-info-800 dark:text-info-200',
|
|
'low': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
|
|
}[issue.priority] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300';
|
|
|
|
const statusClass = {
|
|
'open': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
|
|
'in_progress': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200',
|
|
'resolved': 'bg-success-100 text-success-800 dark:bg-success-800 dark:text-success-200',
|
|
'closed': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
|
|
}[issue.status] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300';
|
|
|
|
const categoryDisplay = {
|
|
'bug_report': 'Bug Report',
|
|
'qa_issue': 'QA Issue',
|
|
'feature_request': 'Feature Request',
|
|
'database_issue': 'Database Issue',
|
|
'system_error': 'System Error',
|
|
'user_access': 'User Access',
|
|
'performance': 'Performance',
|
|
'documentation': 'Documentation',
|
|
'configuration': 'Configuration',
|
|
'testing': 'Testing'
|
|
}[issue.category] || issue.category;
|
|
|
|
return `
|
|
<tr>
|
|
<td><strong>${issue.ticket_number}</strong></td>
|
|
<td>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200">${categoryDisplay}</span>
|
|
</td>
|
|
<td>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${priorityClass}">${issue.priority.toUpperCase()}</span>
|
|
</td>
|
|
<td>
|
|
<div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;">
|
|
${issue.subject}
|
|
</div>
|
|
</td>
|
|
<td>${issue.contact_name}</td>
|
|
<td>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusClass}">${issue.status.replace('_', ' ').toUpperCase()}</span>
|
|
</td>
|
|
<td>${issue.assigned_admin_name || 'Unassigned'}</td>
|
|
<td>${new Date(issue.created_at).toLocaleDateString()}</td>
|
|
<td>
|
|
<button class="px-2 py-1 border border-primary-600 text-primary-700 dark:text-primary-200 rounded text-xs hover:bg-primary-50 dark:hover:bg-primary-900/20" onclick="viewIssue(${issue.id})" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function filterIssues() {
|
|
loadIssues();
|
|
}
|
|
|
|
async function viewIssue(issueId) {
|
|
try {
|
|
const response = await fetch('/api/support/tickets/' + issueId, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load issue details');
|
|
}
|
|
|
|
const issue = await response.json();
|
|
|
|
// Populate issue detail modal
|
|
document.getElementById('issueDetailNumber').textContent = issue.ticket_number;
|
|
document.getElementById('issueDetailSubject').textContent = issue.subject;
|
|
document.getElementById('issueDetailDescription').textContent = issue.description;
|
|
|
|
// Update badges
|
|
const categoryDisplay = {
|
|
'bug_report': 'Bug Report',
|
|
'qa_issue': 'QA Issue',
|
|
'feature_request': 'Feature Request',
|
|
'database_issue': 'Database Issue',
|
|
'system_error': 'System Error',
|
|
'user_access': 'User Access',
|
|
'performance': 'Performance',
|
|
'documentation': 'Documentation',
|
|
'configuration': 'Configuration',
|
|
'testing': 'Testing'
|
|
}[issue.category] || issue.category;
|
|
|
|
document.getElementById('issueDetailCategory').textContent = categoryDisplay;
|
|
document.getElementById('issueDetailCategory').className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200';
|
|
|
|
document.getElementById('issueDetailPriority').textContent = issue.priority.toUpperCase();
|
|
document.getElementById('issueDetailPriority').className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ml-2 ' + ({
|
|
'urgent': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
|
|
'high': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200',
|
|
'medium': 'bg-info-100 text-info-800 dark:bg-info-800 dark:text-info-200',
|
|
'low': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
|
|
}[issue.priority] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300');
|
|
|
|
document.getElementById('issueDetailStatus').textContent = issue.status.replace('_', ' ').toUpperCase();
|
|
document.getElementById('issueDetailStatus').className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ' + ({
|
|
'open': 'bg-danger-100 text-danger-800 dark:bg-danger-800 dark:text-danger-200',
|
|
'in_progress': 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200',
|
|
'resolved': 'bg-success-100 text-success-800 dark:bg-success-800 dark:text-success-200',
|
|
'closed': 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'
|
|
}[issue.status] || 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300');
|
|
|
|
// Update context info
|
|
document.getElementById('issueCurrentPage').textContent = issue.current_page || 'Unknown';
|
|
document.getElementById('issueBrowserInfo').textContent = issue.browser_info || 'Unknown';
|
|
document.getElementById('issueIpAddress').textContent = issue.ip_address || 'Unknown';
|
|
|
|
// Update sidebar info
|
|
document.getElementById('issueDetailReporter').textContent = issue.contact_name;
|
|
document.getElementById('issueDetailEmail').textContent = issue.contact_email;
|
|
document.getElementById('issueDetailCreated').textContent = new Date(issue.created_at).toLocaleString();
|
|
document.getElementById('issueDetailUpdated').textContent = issue.updated_at ? new Date(issue.updated_at).toLocaleString() : 'Never';
|
|
|
|
if (issue.resolved_at) {
|
|
document.getElementById('issueDetailResolved').textContent = new Date(issue.resolved_at).toLocaleString();
|
|
document.getElementById('issueResolvedInfo').style.display = 'block';
|
|
} else {
|
|
document.getElementById('issueResolvedInfo').style.display = 'none';
|
|
}
|
|
|
|
// Update form fields for editing
|
|
document.getElementById('updateStatus').value = issue.status;
|
|
document.getElementById('updatePriority').value = issue.priority;
|
|
document.getElementById('updateAssignee').value = issue.assigned_to || '';
|
|
|
|
// Store current issue ID for updates
|
|
window.currentIssueId = issue.id;
|
|
|
|
// Load users for assignment dropdown
|
|
await loadUsersForAssignment();
|
|
|
|
// Load and display responses
|
|
displayIssueResponses(issue.responses);
|
|
|
|
// Show modal
|
|
openModal('issueDetailModal');
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load issue details:', error);
|
|
showAlert('Failed to load issue details', 'error');
|
|
}
|
|
}
|
|
|
|
async function loadUsersForAssignment() {
|
|
try {
|
|
if (allUsers.length === 0) {
|
|
const response = await fetch('/api/admin/users', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
allUsers = await response.json();
|
|
}
|
|
|
|
const select = document.getElementById('updateAssignee');
|
|
select.innerHTML = '<option value="">Unassigned</option>';
|
|
|
|
allUsers.filter(user => user.is_admin && user.is_active).forEach(user => {
|
|
select.innerHTML += `<option value="${user.id}">${user.first_name} ${user.last_name} (${user.username})</option>`;
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load users for assignment:', error);
|
|
}
|
|
}
|
|
|
|
function displayIssueResponses(responses) {
|
|
const container = document.getElementById('issueResponsesList');
|
|
|
|
if (responses.length === 0) {
|
|
container.innerHTML = '<p class="text-neutral-500 dark:text-neutral-400">No responses yet.</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = responses.map(response => {
|
|
const isInternal = response.is_internal;
|
|
const badgeClass = isInternal
|
|
? 'bg-warning-100 text-warning-800 dark:bg-warning-800 dark:text-warning-200'
|
|
: 'bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200';
|
|
const badgeText = isInternal ? 'Internal' : 'Public';
|
|
|
|
return `
|
|
<div class="border border-neutral-200 dark:border-neutral-700 rounded p-3 mb-3">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<strong>${response.author_name}</strong>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${badgeClass} ml-2">${badgeText}</span>
|
|
</div>
|
|
<small class="text-neutral-500 dark:text-neutral-400">${new Date(response.created_at).toLocaleString()}</small>
|
|
</div>
|
|
<div style="white-space: pre-wrap;">${response.message}</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
async function updateIssue() {
|
|
if (!window.currentIssueId) {
|
|
showAlert('No issue selected for update', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const updateData = {
|
|
status: document.getElementById('updateStatus').value,
|
|
priority: document.getElementById('updatePriority').value,
|
|
assigned_to: document.getElementById('updateAssignee').value || null
|
|
};
|
|
|
|
const response = await fetch('/api/support/tickets/' + window.currentIssueId, {
|
|
method: 'PUT',
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify(updateData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to update issue');
|
|
}
|
|
|
|
showAlert('Issue updated successfully', 'success');
|
|
|
|
// Refresh the issue details and table
|
|
await viewIssue(window.currentIssueId);
|
|
await loadIssues();
|
|
await loadIssueStats();
|
|
|
|
} catch (error) {
|
|
console.error('Failed to update issue:', error);
|
|
showAlert('Failed to update issue', 'error');
|
|
}
|
|
}
|
|
|
|
async function addResponse() {
|
|
const message = document.getElementById('newResponseMessage').value.trim();
|
|
const isInternal = document.getElementById('newResponseInternal').checked;
|
|
|
|
if (!message) {
|
|
showAlert('Please enter a response message', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!window.currentIssueId) {
|
|
showAlert('No issue selected for response', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/support/tickets/' + window.currentIssueId + '/responses', {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify({
|
|
message: message,
|
|
is_internal: isInternal
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to add response');
|
|
}
|
|
|
|
showAlert('Response added successfully', 'success');
|
|
|
|
// Clear form
|
|
document.getElementById('newResponseMessage').value = '';
|
|
document.getElementById('newResponseInternal').checked = false;
|
|
|
|
// Refresh the issue details
|
|
await viewIssue(window.currentIssueId);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to add response:', error);
|
|
showAlert('Failed to add response', 'error');
|
|
}
|
|
}
|
|
|
|
// Import Management Functions
|
|
let availableImportFiles = {};
|
|
let importInProgress = false;
|
|
|
|
async function loadAvailableImportFiles() {
|
|
try {
|
|
const response = await fetch('/api/import/available-files', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load available files');
|
|
|
|
const data = await response.json();
|
|
availableImportFiles = data;
|
|
|
|
// Populate file type dropdowns
|
|
const fileTypeSelect = document.getElementById('adminFileType');
|
|
const clearTableSelect = document.getElementById('adminClearTableType');
|
|
|
|
fileTypeSelect.innerHTML = '<option value="">Select data type...</option>';
|
|
clearTableSelect.innerHTML = '<option value="">Select table to clear...</option>';
|
|
|
|
data.available_files.forEach(fileType => {
|
|
const description = data.descriptions[fileType] || fileType;
|
|
|
|
const option1 = document.createElement('option');
|
|
option1.value = fileType;
|
|
option1.textContent = `${fileType} - ${description}`;
|
|
fileTypeSelect.appendChild(option1);
|
|
|
|
const option2 = document.createElement('option');
|
|
option2.value = fileType;
|
|
option2.textContent = `${fileType} - ${description}`;
|
|
clearTableSelect.appendChild(option2);
|
|
});
|
|
|
|
// Setup form listener
|
|
document.getElementById('adminImportForm').addEventListener('submit', handleAdminImport);
|
|
|
|
// File type change listener
|
|
document.getElementById('adminFileType').addEventListener('change', updateAdminFileTypeDescription);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading available files:', error);
|
|
showAlert('Error loading available file types: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function loadImportStatus() {
|
|
try {
|
|
const response = await fetch('/api/import/status', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load import status');
|
|
|
|
const status = await response.json();
|
|
displayImportStatus(status);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading import status:', error);
|
|
document.getElementById('importStatus').innerHTML =
|
|
`<div class="bg-danger-50 text-danger-800 border-l-4 border-danger-500 p-3 rounded">Error loading import status: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function displayImportStatus(status) {
|
|
const container = document.getElementById('importStatus');
|
|
|
|
let html = '<div class="grid grid-cols-1 md:grid-cols-3 gap-2">';
|
|
let totalRecords = 0;
|
|
|
|
Object.entries(status).forEach(([fileType, info], index) => {
|
|
totalRecords += info.record_count || 0;
|
|
|
|
const statusClass = info.error ? 'danger' : (info.record_count > 0 ? 'success' : 'secondary');
|
|
const statusIcon = info.error ? 'triangle-exclamation' : (info.record_count > 0 ? 'circle-check' : 'circle');
|
|
|
|
// grid handles wrapping; no manual row breaks needed
|
|
|
|
html += `
|
|
<div>
|
|
<div class="border rounded-lg p-2 ${statusClass === 'danger' ? 'border-danger-300 dark:border-danger-700' : statusClass === 'success' ? 'border-success-300 dark:border-success-700' : 'border-neutral-200 dark:border-neutral-700'}">
|
|
<div class="p-0.5">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<small class="font-semibold">${fileType}</small><br>
|
|
<small class="text-neutral-500 dark:text-neutral-400">${info.table_name}</small>
|
|
</div>
|
|
<div class="text-right">
|
|
<i class="fa-solid fa-${statusIcon} ${statusClass === 'danger' ? 'text-danger-600' : statusClass === 'success' ? 'text-success-600' : 'text-neutral-400'}"></i><br>
|
|
<small class="font-semibold">${info.record_count || 0}</small>
|
|
</div>
|
|
</div>
|
|
${info.error ? `<div class="text-danger-600 dark:text-danger-400 text-xs mt-1">${info.error}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
html += `<div class="mt-3 text-center">
|
|
<strong>Total Records: ${totalRecords.toLocaleString()}</strong>
|
|
</div>`;
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
function updateAdminFileTypeDescription() {
|
|
const fileType = document.getElementById('adminFileType').value;
|
|
const description = availableImportFiles.descriptions && availableImportFiles.descriptions[fileType];
|
|
document.getElementById('adminFileTypeDescription').textContent = description || '';
|
|
}
|
|
|
|
async function validateAdminFile() {
|
|
const fileType = document.getElementById('adminFileType').value;
|
|
const fileInput = document.getElementById('adminCsvFile');
|
|
|
|
if (!fileType || !fileInput.files[0]) {
|
|
showAlert('Please select both file type and CSV file', 'error');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
|
|
try {
|
|
showAdminProgress(true, 'Validating file...');
|
|
|
|
const response = await fetch(`/api/import/validate/${fileType}`, {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Validation failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
displayAdminValidationResults(result);
|
|
|
|
} catch (error) {
|
|
console.error('Validation error:', error);
|
|
showAlert('Validation failed: ' + error.message, 'error');
|
|
} finally {
|
|
showAdminProgress(false);
|
|
}
|
|
}
|
|
|
|
function displayAdminValidationResults(result) {
|
|
const panel = document.getElementById('adminValidationPanel');
|
|
const container = document.getElementById('adminValidationResults');
|
|
|
|
let html = '';
|
|
|
|
// Overall status
|
|
const statusClass = result.valid ? 'success' : 'danger';
|
|
const statusIcon = result.valid ? 'circle-check' : 'triangle-exclamation';
|
|
|
|
html += `
|
|
<div class="${statusClass === 'success' ? 'bg-success-50 text-success-700 border-success-500' : 'bg-danger-50 text-danger-700 border-danger-500'} border-l-4 p-3 rounded">
|
|
<i class="fa-solid fa-${statusIcon}"></i>
|
|
File validation ${result.valid ? 'passed' : 'failed'}
|
|
</div>
|
|
`;
|
|
|
|
// Headers validation
|
|
html += '<h6>Column Headers</h6>';
|
|
if (result.headers.missing.length > 0) {
|
|
html += `<div class="bg-warning-50 text-warning-800 border-l-4 border-warning-500 p-3 rounded">
|
|
<strong>Missing columns:</strong> ${result.headers.missing.join(', ')}
|
|
</div>`;
|
|
}
|
|
if (result.headers.extra.length > 0) {
|
|
html += `<div class="bg-info-50 text-info-800 border-l-4 border-info-500 p-3 rounded">
|
|
<strong>Extra columns:</strong> ${result.headers.extra.join(', ')}
|
|
</div>`;
|
|
}
|
|
if (result.headers.missing.length === 0 && result.headers.extra.length === 0) {
|
|
html += '<div class="bg-success-50 text-success-800 border-l-4 border-success-500 p-3 rounded">All expected columns found</div>';
|
|
}
|
|
|
|
// Sample data
|
|
if (result.sample_data && result.sample_data.length > 0) {
|
|
html += '<h6>Sample Data (First 10 rows)</h6>';
|
|
html += '<div class="overflow-x-auto">';
|
|
html += '<table class="min-w-full text-sm">';
|
|
html += '<thead><tr>';
|
|
Object.keys(result.sample_data[0]).forEach(header => {
|
|
html += `<th class="px-2 py-1 text-left border-b border-neutral-200 dark:border-neutral-700">${header}</th>`;
|
|
});
|
|
html += '</tr></thead><tbody>';
|
|
|
|
result.sample_data.forEach(row => {
|
|
html += '<tr class="odd:bg-neutral-50 dark:odd:bg-neutral-800/50">';
|
|
Object.values(row).forEach(value => {
|
|
html += `<td class="px-2 py-1">${value || ''}</td>`;
|
|
});
|
|
html += '</tr>';
|
|
});
|
|
html += '</tbody></table></div>';
|
|
}
|
|
|
|
// Validation errors
|
|
if (result.validation_errors && result.validation_errors.length > 0) {
|
|
html += '<h6>Data Issues Found</h6>';
|
|
html += '<div class="bg-warning-50 text-warning-800 border-l-4 border-warning-500 p-3 rounded">';
|
|
result.validation_errors.forEach(error => {
|
|
html += `<div>Row ${error.row}, Field "${error.field}": ${error.error}</div>`;
|
|
});
|
|
if (result.total_errors > result.validation_errors.length) {
|
|
html += `<div class="mt-2"><strong>... and ${result.total_errors - result.validation_errors.length} more errors</strong></div>`;
|
|
}
|
|
html += '</div>';
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
panel.style.display = 'block';
|
|
}
|
|
|
|
async function handleAdminImport(event) {
|
|
event.preventDefault();
|
|
|
|
if (importInProgress) {
|
|
showAlert('Import already in progress', 'error');
|
|
return;
|
|
}
|
|
|
|
const fileType = document.getElementById('adminFileType').value;
|
|
const fileInput = document.getElementById('adminCsvFile');
|
|
const replaceExisting = document.getElementById('adminReplaceExisting').checked;
|
|
|
|
if (!fileType || !fileInput.files[0]) {
|
|
showAlert('Please select both file type and CSV file', 'error');
|
|
return;
|
|
}
|
|
|
|
importInProgress = true;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
formData.append('replace_existing', replaceExisting);
|
|
|
|
try {
|
|
showAdminProgress(true, 'Importing data...');
|
|
|
|
const response = await fetch(`/api/import/upload/${fileType}`, {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Import failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
displayAdminImportResults(result);
|
|
|
|
// Refresh status after successful import
|
|
await loadImportStatus();
|
|
|
|
// Reset form
|
|
document.getElementById('adminImportForm').reset();
|
|
|
|
} catch (error) {
|
|
console.error('Import error:', error);
|
|
showAlert('Import failed: ' + error.message, 'error');
|
|
} finally {
|
|
importInProgress = false;
|
|
showAdminProgress(false);
|
|
}
|
|
}
|
|
|
|
function displayAdminImportResults(result) {
|
|
const panel = document.getElementById('adminResultsPanel');
|
|
const container = document.getElementById('adminImportResults');
|
|
|
|
const successClass = result.errors && result.errors.length > 0 ? 'warning' : 'success';
|
|
|
|
let html = `
|
|
<div class="${successClass === 'warning' ? 'bg-warning-50 text-warning-800 border-warning-500' : 'bg-success-50 text-success-800 border-success-500'} border-l-4 p-3 rounded">
|
|
<h6 class="font-semibold flex items-center gap-2"><i class="fa-regular fa-circle-check"></i> Import Completed</h6>
|
|
<p class="mb-0">
|
|
<strong>File Type:</strong> ${result.file_type}<br>
|
|
<strong>Records Imported:</strong> ${result.imported_count}<br>
|
|
<strong>Errors:</strong> ${result.total_errors || 0}
|
|
</p>
|
|
</div>
|
|
`;
|
|
|
|
if (result.errors && result.errors.length > 0) {
|
|
html += '<h6>Import Errors</h6>';
|
|
html += '<div class="bg-danger-50 text-danger-800 border-l-4 border-danger-500 p-3 rounded">';
|
|
result.errors.forEach(error => {
|
|
html += `<div><strong>Row ${error.row}:</strong> ${error.error}</div>`;
|
|
});
|
|
if (result.total_errors > result.errors.length) {
|
|
html += `<div class="mt-2"><strong>... and ${result.total_errors - result.errors.length} more errors</strong></div>`;
|
|
}
|
|
html += '</div>';
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
panel.style.display = 'block';
|
|
}
|
|
|
|
function showAdminProgress(show, message = '') {
|
|
const panel = document.getElementById('adminProgressPanel');
|
|
const status = document.getElementById('adminProgressStatus');
|
|
const bar = document.getElementById('adminProgressBar');
|
|
|
|
if (show) {
|
|
status.textContent = message;
|
|
bar.style.width = '100%';
|
|
bar.textContent = 'Processing...';
|
|
panel.style.display = 'block';
|
|
} else {
|
|
panel.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function clearAdminTable() {
|
|
const fileType = document.getElementById('adminClearTableType').value;
|
|
|
|
if (!fileType) {
|
|
showAlert('Please select a table to clear', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!confirm(`Are you sure you want to clear all data from ${fileType}? This action cannot be undone.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/import/clear/${fileType}`, {
|
|
method: 'DELETE',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Clear operation failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
showAlert(`Successfully cleared ${result.deleted_count} records from ${result.table_name}`, 'success');
|
|
|
|
// Refresh status
|
|
await loadImportStatus();
|
|
|
|
} catch (error) {
|
|
console.error('Clear table error:', error);
|
|
showAlert('Clear operation failed: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function viewImportLogs() {
|
|
showAlert('Import logs functionality coming soon', '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') {
|
|
if (window.alerts && typeof window.alerts.show === 'function') {
|
|
window.alerts.show(message, type);
|
|
} else if (window.showNotification) {
|
|
window.showNotification(message, type);
|
|
} else {
|
|
alert(String(message));
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |