v2
This commit is contained in:
HotSwapp
@@ -94,6 +94,18 @@
|
||||
<i class="fas fa-tools"></i> Maintenance
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="issues-tab" data-bs-toggle="tab" data-bs-target="#issues"
|
||||
type="button" role="tab">
|
||||
<i class="fas fa-bug"></i> Issue Tracking
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="import-tab" data-bs-toggle="tab" data-bs-target="#import"
|
||||
type="button" role="tab">
|
||||
<i class="bi bi-upload"></i> Data Import
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="backup-tab" data-bs-toggle="tab" data-bs-target="#backup"
|
||||
type="button" role="tab">
|
||||
@@ -373,6 +385,283 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Issues Tab -->
|
||||
<div class="tab-pane fade" id="issues" role="tabpanel">
|
||||
<div class="row mb-4">
|
||||
<!-- Issue Statistics Cards -->
|
||||
<div class="col-md-3">
|
||||
<div class="card border-danger">
|
||||
<div class="card-body text-center">
|
||||
<h2 class="text-danger" id="high-priority-count">0</h2>
|
||||
<h6>High Priority</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-warning">
|
||||
<div class="card-body text-center">
|
||||
<h2 class="text-warning" id="open-issues-count">0</h2>
|
||||
<h6>Open Issues</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-info">
|
||||
<div class="card-body text-center">
|
||||
<h2 class="text-info" id="in-progress-count">0</h2>
|
||||
<h6>In Progress</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-success">
|
||||
<div class="card-body text-center">
|
||||
<h2 class="text-success" id="resolved-count">0</h2>
|
||||
<h6>Resolved</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Issue Management -->
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="fas fa-bug"></i> Internal Issues & Bugs</h5>
|
||||
<div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm me-2" onclick="loadIssues()">
|
||||
<i class="fas fa-sync"></i> Refresh
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-sm" onclick="openSupportModal()">
|
||||
<i class="fas fa-plus"></i> New Issue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Filters -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<select class="form-select form-select-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="col-md-3">
|
||||
<select class="form-select form-select-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="col-md-3">
|
||||
<select class="form-select form-select-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="col-md-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="assignedToMeFilter" onchange="filterIssues()">
|
||||
<label class="form-check-label" for="assignedToMeFilter">
|
||||
Assigned to me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Issues Table -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Type</th>
|
||||
<th>Priority</th>
|
||||
<th>Subject</th>
|
||||
<th>Reporter</th>
|
||||
<th>Status</th>
|
||||
<th>Assigned</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="issues-table-body">
|
||||
<tr>
|
||||
<td colspan="9" class="text-center">Loading issues...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Issue Detail Modal -->
|
||||
<div class="modal fade" id="issueDetailModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="issueDetailModalTitle">
|
||||
<i class="fas fa-bug me-2"></i>Issue Details
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<!-- Left Column - Issue Details -->
|
||||
<div class="col-md-8">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="badge bg-primary me-2" id="issueDetailNumber">ST-2025-XXXX</span>
|
||||
<span class="badge" id="issueDetailCategory">category</span>
|
||||
<span class="badge ms-2" id="issueDetailPriority">priority</span>
|
||||
</div>
|
||||
<span class="badge fs-6" id="issueDetailStatus">status</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 id="issueDetailSubject">Issue subject</h5>
|
||||
<div class="mt-3">
|
||||
<h6>Description:</h6>
|
||||
<div id="issueDetailDescription" style="white-space: pre-wrap; background: #f8f9fa; padding: 1rem; border-radius: 0.375rem;"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h6>Context Information:</h6>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<small><strong>Page:</strong> <span id="issueDetailPage">-</span></small>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<small><strong>Browser:</strong> <span id="issueDetailBrowser">-</span></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Responses Section -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Comments & Updates</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="issueResponses">
|
||||
<p class="text-muted">No comments yet.</p>
|
||||
</div>
|
||||
|
||||
<!-- Add Response Form -->
|
||||
<div class="mt-3 border-top pt-3">
|
||||
<textarea class="form-control mb-2" id="newResponseText" rows="3" placeholder="Add a comment..."></textarea>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="internalResponseCheck">
|
||||
<label class="form-check-label" for="internalResponseCheck">
|
||||
Internal note (not visible to reporter)
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-sm" onclick="addResponse()">
|
||||
<i class="fas fa-comment"></i> Add Comment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Issue Management -->
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Issue Management</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="issueUpdateForm">
|
||||
<input type="hidden" id="currentIssueId">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Status</label>
|
||||
<select class="form-select form-select-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="form-label">Priority</label>
|
||||
<select class="form-select form-select-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="form-label">Assign To</label>
|
||||
<select class="form-select form-select-sm" id="updateAssignee">
|
||||
<option value="">Unassigned</option>
|
||||
<!-- Will be populated with users -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-success btn-sm w-100" onclick="updateIssue()">
|
||||
<i class="fas fa-save"></i> Update Issue
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Issue Info</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Reporter:</small><br>
|
||||
<span id="issueDetailReporter">-</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Email:</small><br>
|
||||
<span id="issueDetailEmail">-</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Created:</small><br>
|
||||
<span id="issueDetailCreated">-</span>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Last Updated:</small><br>
|
||||
<span id="issueDetailUpdated">-</span>
|
||||
</div>
|
||||
<div class="mb-2" id="issueResolvedInfo" style="display: none;">
|
||||
<small class="text-muted">Resolved:</small><br>
|
||||
<span id="issueDetailResolved">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -515,6 +804,15 @@ 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'
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize admin dashboard
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadSystemHealth();
|
||||
@@ -523,15 +821,25 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
loadSettings();
|
||||
loadLookupTables();
|
||||
loadBackups();
|
||||
loadIssues();
|
||||
loadIssueStats();
|
||||
|
||||
// Auto-refresh every 5 minutes
|
||||
setInterval(loadSystemHealth, 300000);
|
||||
|
||||
// Load issue stats when Issue Tracking tab is clicked
|
||||
document.getElementById('issues-tab').addEventListener('shown.bs.tab', function() {
|
||||
loadIssues();
|
||||
loadIssueStats();
|
||||
});
|
||||
});
|
||||
|
||||
// System Health Functions
|
||||
async function loadSystemHealth() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/health');
|
||||
const response = await fetch('/api/admin/health', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// Update status indicator
|
||||
@@ -567,7 +875,9 @@ async function loadSystemHealth() {
|
||||
|
||||
async function loadSystemStats() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/stats');
|
||||
const response = await fetch('/api/admin/stats', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// Update dashboard cards
|
||||
@@ -611,7 +921,9 @@ async function loadUsers() {
|
||||
if (search) url += 'search=' + encodeURIComponent(search) + '&';
|
||||
if (filter === 'active') url += 'active_only=true&';
|
||||
|
||||
const response = await fetch(url);
|
||||
const response = await fetch(url, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const users = await response.json();
|
||||
currentUsers = users;
|
||||
|
||||
@@ -675,7 +987,9 @@ function showCreateUserModal() {
|
||||
|
||||
async function editUser(userId) {
|
||||
try {
|
||||
const response = await fetch('/api/admin/users/' + userId);
|
||||
const response = await fetch('/api/admin/users/' + userId, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const user = await response.json();
|
||||
|
||||
document.getElementById('userModalTitle').textContent = 'Edit User';
|
||||
@@ -719,9 +1033,7 @@ async function saveUser() {
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
|
||||
@@ -759,9 +1071,7 @@ async function resetPassword() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/users/' + userId + '/reset-password', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
new_password: newPassword,
|
||||
confirm_password: confirmPassword
|
||||
@@ -787,7 +1097,8 @@ async function deactivateUser(userId) {
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/users/' + userId, {
|
||||
method: 'DELETE'
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
@@ -807,7 +1118,9 @@ async function deactivateUser(userId) {
|
||||
// Settings Management Functions
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/settings');
|
||||
const response = await fetch('/api/admin/settings', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const data = await response.json();
|
||||
currentSettings = data.settings;
|
||||
|
||||
@@ -856,7 +1169,9 @@ function showCreateSettingModal() {
|
||||
|
||||
async function editSetting(settingKey) {
|
||||
try {
|
||||
const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey));
|
||||
const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey), {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const setting = await response.json();
|
||||
|
||||
document.getElementById('settingModalTitle').textContent = 'Edit Setting';
|
||||
@@ -891,9 +1206,7 @@ async function saveSetting() {
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(isEdit ? {
|
||||
setting_value: settingData.setting_value,
|
||||
description: settingData.description
|
||||
@@ -920,7 +1233,8 @@ async function deleteSetting(settingKey) {
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/settings/' + encodeURIComponent(settingKey), {
|
||||
method: 'DELETE'
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
@@ -940,7 +1254,9 @@ async function deleteSetting(settingKey) {
|
||||
// Maintenance Functions
|
||||
async function loadLookupTables() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/lookups/tables');
|
||||
const response = await fetch('/api/admin/lookups/tables', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
const element = document.getElementById('lookup-tables');
|
||||
@@ -964,7 +1280,10 @@ async function vacuumDatabase() {
|
||||
if (!confirm('This will optimize the database. Continue?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/maintenance/vacuum', { method: 'POST' });
|
||||
const response = await fetch('/api/admin/maintenance/vacuum', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
@@ -984,7 +1303,10 @@ async function analyzeDatabase() {
|
||||
if (!confirm('This will analyze database statistics. Continue?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/maintenance/analyze', { method: 'POST' });
|
||||
const response = await fetch('/api/admin/maintenance/analyze', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
@@ -1020,7 +1342,9 @@ function addMaintenanceLog(operation, message) {
|
||||
// Backup Functions
|
||||
async function loadBackups() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/backup/list');
|
||||
const response = await fetch('/api/admin/backup/list', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
const tbody = document.getElementById('backup-list');
|
||||
@@ -1059,7 +1383,10 @@ async function createBackup() {
|
||||
if (!confirm('Create a new database backup?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/backup/create', { method: 'POST' });
|
||||
const response = await fetch('/api/admin/backup/create', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
@@ -1087,9 +1414,360 @@ function refreshDashboard() {
|
||||
loadSettings();
|
||||
loadLookupTables();
|
||||
loadBackups();
|
||||
loadIssues();
|
||||
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">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
|
||||
document.getElementById('high-priority-count').textContent = stats.high_priority_tickets + stats.urgent_tickets;
|
||||
document.getElementById('open-count').textContent = stats.open_tickets;
|
||||
document.getElementById('in-progress-count').textContent = stats.in_progress_tickets;
|
||||
document.getElementById('resolved-count').textContent = stats.resolved_tickets;
|
||||
|
||||
} 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',
|
||||
'high': 'bg-warning',
|
||||
'medium': 'bg-info',
|
||||
'low': 'bg-secondary'
|
||||
}[issue.priority] || 'bg-secondary';
|
||||
|
||||
const statusClass = {
|
||||
'open': 'bg-danger',
|
||||
'in_progress': 'bg-warning',
|
||||
'resolved': 'bg-success',
|
||||
'closed': 'bg-secondary'
|
||||
}[issue.status] || 'bg-secondary';
|
||||
|
||||
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="badge bg-primary">${categoryDisplay}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge ${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="badge ${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="btn btn-outline-primary btn-sm" 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 = 'badge bg-primary';
|
||||
|
||||
document.getElementById('issueDetailPriority').textContent = issue.priority.toUpperCase();
|
||||
document.getElementById('issueDetailPriority').className = 'badge ms-2 ' + ({
|
||||
'urgent': 'bg-danger',
|
||||
'high': 'bg-warning',
|
||||
'medium': 'bg-info',
|
||||
'low': 'bg-secondary'
|
||||
}[issue.priority] || 'bg-secondary');
|
||||
|
||||
document.getElementById('issueDetailStatus').textContent = issue.status.replace('_', ' ').toUpperCase();
|
||||
document.getElementById('issueDetailStatus').className = 'badge fs-6 ' + ({
|
||||
'open': 'bg-danger',
|
||||
'in_progress': 'bg-warning',
|
||||
'resolved': 'bg-success',
|
||||
'closed': 'bg-secondary'
|
||||
}[issue.status] || 'bg-secondary');
|
||||
|
||||
// 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
|
||||
new bootstrap.Modal(document.getElementById('issueDetailModal')).show();
|
||||
|
||||
} 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-muted">No responses yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = responses.map(response => {
|
||||
const isInternal = response.is_internal;
|
||||
const badgeClass = isInternal ? 'bg-warning' : 'bg-primary';
|
||||
const badgeText = isInternal ? 'Internal' : 'Public';
|
||||
|
||||
return `
|
||||
<div class="border rounded p-3 mb-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<strong>${response.author_name}</strong>
|
||||
<span class="badge ${badgeClass} ms-2">${badgeText}</span>
|
||||
</div>
|
||||
<small class="text-muted">${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');
|
||||
}
|
||||
}
|
||||
|
||||
function searchUsers() {
|
||||
const searchTerm = document.getElementById('user-search').value.toLowerCase();
|
||||
const filteredUsers = currentUsers.filter(user =>
|
||||
|
||||
@@ -8,15 +8,51 @@
|
||||
<!-- Bootstrap 5.3 CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link href="/static/css/main.css" rel="stylesheet">
|
||||
<link href="/static/css/themes.css" rel="stylesheet">
|
||||
<link href="/static/css/components.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Footer Enhancements */
|
||||
footer .btn-outline-primary:hover {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
footer .text-primary:hover {
|
||||
color: #0056b3 !important;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
footer small {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
#currentPageDisplay {
|
||||
color: #495057 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive footer adjustments */
|
||||
@media (max-width: 768px) {
|
||||
footer .row {
|
||||
text-align: center !important;
|
||||
}
|
||||
footer .col-md-6:first-child {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
@@ -50,11 +86,6 @@
|
||||
<i class="bi bi-file-text"></i> Documents <small>(Alt+D)</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/import" data-shortcut="Alt+I">
|
||||
<i class="bi bi-upload"></i> Import <small>(Alt+I)</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/search" data-shortcut="Ctrl+F">
|
||||
<i class="bi bi-search"></i> Search <small>(Ctrl+F)</small>
|
||||
@@ -79,9 +110,37 @@
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container-fluid mt-3">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<main class="flex-grow-1">
|
||||
<div class="container-fluid mt-3 mb-4">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="mt-auto py-3 border-top shadow-sm" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-color: #dee2e6 !important;">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<small class="text-muted">
|
||||
© 2024 Delphi Consulting Group Database System
|
||||
<span class="mx-2">|</span>
|
||||
<span id="currentPageDisplay">Loading...</span>
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm me-3" onclick="openSupportModal()">
|
||||
<i class="fas fa-bug me-1"></i>Report Issue
|
||||
</button>
|
||||
<small class="text-muted">
|
||||
Found a bug? <a href="#" onclick="openSupportModal()" class="text-primary text-decoration-none">Report Issue</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Include Support Modal -->
|
||||
{% include 'support_modal.html' %}
|
||||
|
||||
<!-- Keyboard Shortcuts Help Modal -->
|
||||
<div class="modal fade" id="shortcutsModal" tabindex="-1" aria-labelledby="shortcutsModalLabel" aria-hidden="true">
|
||||
@@ -158,13 +217,153 @@
|
||||
// Initialize keyboard shortcuts on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeKeyboardShortcuts();
|
||||
updateCurrentPageDisplay();
|
||||
initializeAuthManager();
|
||||
});
|
||||
|
||||
// Logout function
|
||||
function logout() {
|
||||
// Update current page display in footer
|
||||
function updateCurrentPageDisplay() {
|
||||
const path = window.location.pathname;
|
||||
const pageNames = {
|
||||
'/': 'Dashboard',
|
||||
'/login': 'Login',
|
||||
'/customers': 'Customer Management',
|
||||
'/files': 'File Cabinet',
|
||||
'/financial': 'Financial/Ledger',
|
||||
'/documents': 'Document Management',
|
||||
'/import': 'Data Import',
|
||||
'/search': 'Advanced Search',
|
||||
'/admin': 'System Administration'
|
||||
};
|
||||
|
||||
const currentPage = pageNames[path] || `Page: ${path}`;
|
||||
const displayElement = document.getElementById('currentPageDisplay');
|
||||
if (displayElement) {
|
||||
displayElement.textContent = `Current: ${currentPage}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Authentication Manager
|
||||
function initializeAuthManager() {
|
||||
// Check if we have a valid token on page load
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (token && !isLoginPage()) {
|
||||
// Verify token is still valid
|
||||
checkTokenValidity();
|
||||
|
||||
// Set up periodic token refresh (every hour)
|
||||
setInterval(refreshTokenIfNeeded, 3600000); // 1 hour
|
||||
|
||||
// Set up activity monitoring for auto-refresh
|
||||
setupActivityMonitoring();
|
||||
} else if (!isLoginPage() && !token) {
|
||||
// No token and not on login page - redirect to login
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
|
||||
function isLoginPage() {
|
||||
return window.location.pathname === '/login' || window.location.pathname === '/';
|
||||
}
|
||||
|
||||
async function checkTokenValidity() {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) return false;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/me', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
// Token is invalid, remove it and redirect to login
|
||||
localStorage.removeItem('auth_token');
|
||||
if (!isLoginPage()) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error checking token validity:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshTokenIfNeeded() {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
// Try to get a new token
|
||||
const response = await fetch('/api/auth/refresh', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
localStorage.setItem('auth_token', data.access_token);
|
||||
console.log('Token refreshed successfully');
|
||||
} else {
|
||||
// If refresh fails, check if current token is still valid
|
||||
const isValid = await checkTokenValidity();
|
||||
if (!isValid) {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error refreshing token:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function setupActivityMonitoring() {
|
||||
let lastActivity = Date.now();
|
||||
|
||||
// Track user activity
|
||||
const activityEvents = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
|
||||
|
||||
activityEvents.forEach(event => {
|
||||
document.addEventListener(event, () => {
|
||||
lastActivity = Date.now();
|
||||
});
|
||||
});
|
||||
|
||||
// Check every 30 minutes if user has been inactive for more than 4 hours
|
||||
setInterval(() => {
|
||||
const now = Date.now();
|
||||
const fourHours = 4 * 60 * 60 * 1000;
|
||||
|
||||
if (now - lastActivity > fourHours) {
|
||||
// User has been inactive for 4+ hours, logout
|
||||
logout('Session expired due to inactivity');
|
||||
}
|
||||
}, 30 * 60 * 1000); // Check every 30 minutes
|
||||
}
|
||||
|
||||
// Enhanced logout function
|
||||
function logout(reason = null) {
|
||||
localStorage.removeItem('auth_token');
|
||||
if (reason) {
|
||||
// Store logout reason to show on login page
|
||||
sessionStorage.setItem('logout_reason', reason);
|
||||
}
|
||||
window.location.href = '/login';
|
||||
}
|
||||
|
||||
// Make functions globally available
|
||||
window.authManager = {
|
||||
checkTokenValidity,
|
||||
refreshTokenIfNeeded,
|
||||
logout
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -78,10 +78,18 @@
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if already logged in
|
||||
// Check for logout reason
|
||||
const logoutReason = sessionStorage.getItem('logout_reason');
|
||||
if (logoutReason) {
|
||||
showAlert(logoutReason, 'warning');
|
||||
sessionStorage.removeItem('logout_reason');
|
||||
}
|
||||
|
||||
// Check if already logged in with valid token
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (token) {
|
||||
window.location.href = '/customers';
|
||||
// Verify token is still valid before redirecting
|
||||
checkTokenAndRedirect(token);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -150,6 +158,28 @@
|
||||
document.getElementById('username').focus();
|
||||
});
|
||||
|
||||
async function checkTokenAndRedirect(token) {
|
||||
try {
|
||||
const response = await fetch('/api/auth/me', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Token is valid, redirect to customers page
|
||||
window.location.href = '/customers';
|
||||
} else {
|
||||
// Token is invalid, remove it
|
||||
localStorage.removeItem('auth_token');
|
||||
}
|
||||
} catch (error) {
|
||||
// Error checking token, remove it
|
||||
localStorage.removeItem('auth_token');
|
||||
console.error('Error checking token:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function showAlert(message, type = 'info') {
|
||||
// Remove existing alerts
|
||||
const existingAlerts = document.querySelectorAll('.alert');
|
||||
|
||||
286
templates/support_modal.html
Normal file
286
templates/support_modal.html
Normal file
@@ -0,0 +1,286 @@
|
||||
<!-- Support Ticket Modal -->
|
||||
<div class="modal fade" id="supportModal" tabindex="-1" aria-labelledby="supportModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-primary text-white">
|
||||
<h5 class="modal-title" id="supportModalLabel">
|
||||
<i class="fas fa-bug me-2"></i>Submit Internal Issue
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="supportForm">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="contactName" class="form-label">Reporter Name *</label>
|
||||
<input type="text" class="form-control" id="contactName" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="contactEmail" class="form-label">Reporter Email *</label>
|
||||
<input type="email" class="form-control" id="contactEmail" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="ticketCategory" class="form-label">Issue Type *</label>
|
||||
<select class="form-select" id="ticketCategory" required>
|
||||
<option value="">Select issue type...</option>
|
||||
<option value="bug_report" selected>Bug Report</option>
|
||||
<option value="qa_issue">QA Issue</option>
|
||||
<option value="feature_request">Feature Request</option>
|
||||
<option value="database_issue">Database Issue</option>
|
||||
<option value="system_error">System Error</option>
|
||||
<option value="user_access">User Access</option>
|
||||
<option value="performance">Performance Issue</option>
|
||||
<option value="documentation">Documentation</option>
|
||||
<option value="configuration">Configuration</option>
|
||||
<option value="testing">Testing Request</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="ticketPriority" class="form-label">Priority</label>
|
||||
<select class="form-select" id="ticketPriority">
|
||||
<option value="low">Low</option>
|
||||
<option value="medium" selected>Medium</option>
|
||||
<option value="high">High</option>
|
||||
<option value="urgent">Urgent</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="ticketSubject" class="form-label">Issue Summary *</label>
|
||||
<input type="text" class="form-control" id="ticketSubject" maxlength="200" required>
|
||||
<div class="form-text">Brief summary of the bug/issue</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="ticketDescription" class="form-label">Detailed Description *</label>
|
||||
<textarea class="form-control" id="ticketDescription" rows="5" required placeholder="Steps to reproduce: 1. 2. 3. Expected behavior: Actual behavior: Additional context:"></textarea>
|
||||
<div class="form-text">Include steps to reproduce, expected vs actual behavior, error messages, etc.</div>
|
||||
</div>
|
||||
|
||||
<!-- System Information (auto-populated) -->
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">
|
||||
<i class="fas fa-info-circle me-1"></i>System Information
|
||||
<small class="text-muted">(automatically included)</small>
|
||||
</h6>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<small><strong>Current Page:</strong> <span id="currentPageInfo">Loading...</span></small>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<small><strong>Browser:</strong> <span id="browserInfo">Loading...</span></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
<strong>Note:</strong> Your issue will be assigned a tracking number and the development team will be notified automatically.
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="submitSupportTicket">
|
||||
<i class="fas fa-bug me-2"></i>Submit Issue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support Ticket Success Modal -->
|
||||
<div class="modal fade" id="supportSuccessModal" tabindex="-1" aria-labelledby="supportSuccessLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-success text-white">
|
||||
<h5 class="modal-title" id="supportSuccessLabel">
|
||||
<i class="fas fa-check-circle me-2"></i>Issue Submitted Successfully
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<div class="mb-3">
|
||||
<i class="fas fa-bug fa-3x text-success mb-3"></i>
|
||||
<h4>Issue logged successfully!</h4>
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<strong>Issue ID:</strong> <span id="newTicketNumber"></span>
|
||||
</div>
|
||||
<p>Your issue has been logged and the development team has been notified. You'll receive updates on the resolution progress.</p>
|
||||
<div class="mt-4">
|
||||
<h6>What happens next?</h6>
|
||||
<ul class="list-unstyled text-start">
|
||||
<li><i class="fas fa-check text-success me-2"></i>Issue logged in tracking system</li>
|
||||
<li><i class="fas fa-users text-warning me-2"></i>Development team has been notified</li>
|
||||
<li><i class="fas fa-code text-info me-2"></i>Issue will be triaged and prioritized</li>
|
||||
<li><i class="fas fa-bell text-primary me-2"></i>You'll get status updates via email</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Support ticket functionality
|
||||
let supportSystem = {
|
||||
currentPageInfo: 'Unknown',
|
||||
browserInfo: 'Unknown',
|
||||
|
||||
init: function() {
|
||||
this.detectSystemInfo();
|
||||
this.setupEventListeners();
|
||||
},
|
||||
|
||||
detectSystemInfo: function() {
|
||||
// Get current page information
|
||||
const path = window.location.pathname;
|
||||
const pageNames = {
|
||||
'/': 'Dashboard',
|
||||
'/login': 'Login Page',
|
||||
'/customers': 'Customer Management',
|
||||
'/files': 'File Cabinet',
|
||||
'/financial': 'Financial/Ledger',
|
||||
'/documents': 'Document Management',
|
||||
'/import': 'Data Import',
|
||||
'/search': 'Advanced Search',
|
||||
'/admin': 'System Administration'
|
||||
};
|
||||
|
||||
this.currentPageInfo = pageNames[path] || `Page: ${path}`;
|
||||
|
||||
// Get browser information
|
||||
const userAgent = navigator.userAgent;
|
||||
let browserName = 'Unknown';
|
||||
|
||||
if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
|
||||
browserName = 'Chrome';
|
||||
} else if (userAgent.includes('Firefox')) {
|
||||
browserName = 'Firefox';
|
||||
} else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
|
||||
browserName = 'Safari';
|
||||
} else if (userAgent.includes('Edg')) {
|
||||
browserName = 'Edge';
|
||||
}
|
||||
|
||||
this.browserInfo = `${browserName} (${navigator.platform})`;
|
||||
|
||||
// Update modal display
|
||||
document.getElementById('currentPageInfo').textContent = this.currentPageInfo;
|
||||
document.getElementById('browserInfo').textContent = this.browserInfo;
|
||||
},
|
||||
|
||||
setupEventListeners: function() {
|
||||
// Auto-populate user info if logged in
|
||||
const supportModal = document.getElementById('supportModal');
|
||||
supportModal.addEventListener('show.bs.modal', this.populateUserInfo.bind(this));
|
||||
|
||||
// Submit button
|
||||
document.getElementById('submitSupportTicket').addEventListener('click', this.submitTicket.bind(this));
|
||||
|
||||
// Form validation
|
||||
const form = document.getElementById('supportForm');
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
supportSystem.submitTicket();
|
||||
});
|
||||
},
|
||||
|
||||
populateUserInfo: function() {
|
||||
// Try to get current user info from the global app state
|
||||
if (window.app && window.app.user) {
|
||||
const user = window.app.user;
|
||||
document.getElementById('contactName').value = `${user.first_name || ''} ${user.last_name || ''}`.trim() || user.username;
|
||||
document.getElementById('contactEmail').value = user.email;
|
||||
}
|
||||
},
|
||||
|
||||
submitTicket: async function() {
|
||||
const form = document.getElementById('supportForm');
|
||||
if (!form.checkValidity()) {
|
||||
form.classList.add('was-validated');
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = document.getElementById('submitSupportTicket');
|
||||
const originalText = submitBtn.innerHTML;
|
||||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const ticketData = {
|
||||
contact_name: document.getElementById('contactName').value,
|
||||
contact_email: document.getElementById('contactEmail').value,
|
||||
category: document.getElementById('ticketCategory').value,
|
||||
priority: document.getElementById('ticketPriority').value,
|
||||
subject: document.getElementById('ticketSubject').value,
|
||||
description: document.getElementById('ticketDescription').value,
|
||||
current_page: this.currentPageInfo,
|
||||
browser_info: this.browserInfo
|
||||
};
|
||||
|
||||
const response = await fetch('/api/support/tickets', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(ticketData)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Hide support modal
|
||||
bootstrap.Modal.getInstance(document.getElementById('supportModal')).hide();
|
||||
|
||||
// Show success modal
|
||||
document.getElementById('newTicketNumber').textContent = result.ticket_number;
|
||||
new bootstrap.Modal(document.getElementById('supportSuccessModal')).show();
|
||||
|
||||
// Reset form
|
||||
form.reset();
|
||||
form.classList.remove('was-validated');
|
||||
|
||||
} else {
|
||||
throw new Error(result.detail || 'Failed to submit ticket');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error submitting support ticket:', error);
|
||||
this.showAlert('Failed to submit support ticket: ' + error.message, 'error');
|
||||
} finally {
|
||||
submitBtn.innerHTML = originalText;
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
},
|
||||
|
||||
showAlert: function(message, type = 'info') {
|
||||
// Use existing notification system if available
|
||||
if (window.showNotification) {
|
||||
window.showNotification(message, type);
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
supportSystem.init();
|
||||
});
|
||||
|
||||
// Global function to open support modal
|
||||
window.openSupportModal = function() {
|
||||
new bootstrap.Modal(document.getElementById('supportModal')).show();
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user