2025-05-16 20:02:49 -04:00
|
|
|
<?php
|
|
|
|
|
// This file contains the HTML template for a ticket
|
2026-01-01 18:25:19 -05:00
|
|
|
// It receives $ticket, $comments, and $timeline variables from the controller
|
|
|
|
|
|
|
|
|
|
// Helper functions for timeline display
|
|
|
|
|
function getEventIcon($actionType) {
|
|
|
|
|
$icons = [
|
|
|
|
|
'create' => '✨',
|
|
|
|
|
'update' => '📝',
|
|
|
|
|
'comment' => '💬',
|
|
|
|
|
'view' => '👁️',
|
|
|
|
|
'assign' => '👤',
|
|
|
|
|
'status_change' => '🔄'
|
|
|
|
|
];
|
|
|
|
|
return $icons[$actionType] ?? '•';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatAction($event) {
|
|
|
|
|
$actions = [
|
|
|
|
|
'create' => 'created this ticket',
|
|
|
|
|
'update' => 'updated this ticket',
|
|
|
|
|
'comment' => 'added a comment',
|
|
|
|
|
'view' => 'viewed this ticket',
|
|
|
|
|
'assign' => 'assigned this ticket',
|
|
|
|
|
'status_change' => 'changed the status'
|
|
|
|
|
];
|
|
|
|
|
return $actions[$event['action_type']] ?? $event['action_type'];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatDetails($details, $actionType) {
|
|
|
|
|
if ($actionType === 'update' && is_array($details)) {
|
|
|
|
|
$changes = [];
|
|
|
|
|
foreach ($details as $field => $value) {
|
|
|
|
|
if ($field === 'old_value' || $field === 'new_value') continue;
|
|
|
|
|
$changes[] = "<strong>" . htmlspecialchars($field) . ":</strong> " . htmlspecialchars($value);
|
|
|
|
|
}
|
|
|
|
|
return implode(', ', $changes);
|
|
|
|
|
}
|
|
|
|
|
return '';
|
|
|
|
|
}
|
2025-05-16 20:02:49 -04:00
|
|
|
?>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Ticket #<?php echo $ticket['ticket_id']; ?></title>
|
|
|
|
|
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
|
2026-01-24 16:59:29 -05:00
|
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260124e">
|
|
|
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260124e">
|
2026-01-08 22:49:48 -05:00
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
|
2026-01-24 16:59:29 -05:00
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260124e"></script>
|
|
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124e"></script>
|
|
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260124e"></script>
|
2025-05-16 20:02:49 -04:00
|
|
|
<script>
|
2026-01-09 15:05:20 -05:00
|
|
|
// CSRF Token for AJAX requests
|
|
|
|
|
window.CSRF_TOKEN = '<?php
|
|
|
|
|
require_once __DIR__ . '/../middleware/CsrfMiddleware.php';
|
|
|
|
|
echo CsrfMiddleware::getToken();
|
|
|
|
|
?>';
|
2026-01-20 21:48:25 -05:00
|
|
|
// Timezone configuration (from server)
|
|
|
|
|
window.APP_TIMEZONE = '<?php echo $GLOBALS['config']['TIMEZONE']; ?>';
|
|
|
|
|
window.APP_TIMEZONE_OFFSET = <?php echo $GLOBALS['config']['TIMEZONE_OFFSET']; ?>; // minutes from UTC
|
|
|
|
|
window.APP_TIMEZONE_ABBREV = '<?php echo $GLOBALS['config']['TIMEZONE_ABBREV']; ?>';
|
2026-01-09 15:05:20 -05:00
|
|
|
</script>
|
|
|
|
|
<script>
|
2026-01-23 10:01:50 -05:00
|
|
|
// Store ticket data in a global variable (using json_encode for XSS safety)
|
2025-05-16 20:02:49 -04:00
|
|
|
window.ticketData = {
|
2026-01-23 10:01:50 -05:00
|
|
|
ticket_id: <?php echo json_encode($ticket['ticket_id']); ?>,
|
|
|
|
|
title: <?php echo json_encode($ticket['title']); ?>,
|
|
|
|
|
status: <?php echo json_encode($ticket['status']); ?>,
|
|
|
|
|
priority: <?php echo json_encode($ticket['priority']); ?>,
|
|
|
|
|
category: <?php echo json_encode($ticket['category']); ?>,
|
|
|
|
|
type: <?php echo json_encode($ticket['type']); ?>
|
2025-05-16 20:02:49 -04:00
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-01-01 16:14:56 -05:00
|
|
|
<div class="user-header">
|
|
|
|
|
<div class="user-header-left">
|
|
|
|
|
<a href="/" class="back-link">← Dashboard</a>
|
2026-01-01 15:40:32 -05:00
|
|
|
</div>
|
2026-01-01 16:14:56 -05:00
|
|
|
<div class="user-header-right">
|
2026-01-01 15:40:32 -05:00
|
|
|
<?php if (isset($GLOBALS['currentUser'])): ?>
|
2026-01-01 16:14:56 -05:00
|
|
|
<span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
|
2026-01-01 15:40:32 -05:00
|
|
|
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
|
2026-01-01 16:14:56 -05:00
|
|
|
<span class="admin-badge">Admin</span>
|
2026-01-01 15:40:32 -05:00
|
|
|
<?php endif; ?>
|
2026-01-08 23:05:03 -05:00
|
|
|
<button class="settings-icon" title="Settings (Alt+S)" onclick="openSettingsModal()">⚙</button>
|
2026-01-01 15:40:32 -05:00
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-07 10:34:56 -05:00
|
|
|
<div class="ticket-container ascii-frame-outer" data-priority="<?php echo $ticket["priority"]; ?>">
|
|
|
|
|
<span class="bottom-left-corner">╚</span>
|
|
|
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
|
|
|
|
|
|
<!-- SECTION 1: Ticket Header & Metadata -->
|
|
|
|
|
<div class="ascii-section-header">Ticket Information</div>
|
|
|
|
|
<div class="ascii-content">
|
|
|
|
|
<div class="ascii-frame-inner">
|
|
|
|
|
<div class="ticket-header">
|
2026-01-08 22:40:26 -05:00
|
|
|
<h2><div class="editable title-input" data-field="title" contenteditable="false"><?php echo htmlspecialchars($ticket["title"]); ?></div></h2>
|
2026-01-07 10:34:56 -05:00
|
|
|
<div class="ticket-subheader">
|
|
|
|
|
<div class="ticket-metadata">
|
|
|
|
|
<div class="ticket-id">UUID <?php echo $ticket['ticket_id']; ?></div>
|
|
|
|
|
<div class="ticket-user-info" style="font-size: 0.85rem; color: #666; margin-top: 0.25rem;">
|
|
|
|
|
<?php
|
|
|
|
|
$creator = $ticket['creator_display_name'] ?? $ticket['creator_username'] ?? 'System';
|
|
|
|
|
echo "Created by: <strong>" . htmlspecialchars($creator) . "</strong>";
|
|
|
|
|
if (!empty($ticket['created_at'])) {
|
|
|
|
|
echo " on " . date('M d, Y H:i', strtotime($ticket['created_at']));
|
|
|
|
|
}
|
|
|
|
|
if (!empty($ticket['updater_display_name']) || !empty($ticket['updater_username'])) {
|
|
|
|
|
$updater = $ticket['updater_display_name'] ?? $ticket['updater_username'];
|
|
|
|
|
echo " • Last updated by: <strong>" . htmlspecialchars($updater) . "</strong>";
|
|
|
|
|
if (!empty($ticket['updated_at'])) {
|
|
|
|
|
echo " on " . date('M d, Y H:i', strtotime($ticket['updated_at']));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
?>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ticket-assignment" style="margin-top: 0.5rem;">
|
|
|
|
|
<label style="font-weight: 500; margin-right: 0.5rem;">Assigned to:</label>
|
2026-01-07 18:14:29 -05:00
|
|
|
<select id="assignedToSelect" class="assignment-select" style="padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green);">
|
2026-01-07 10:34:56 -05:00
|
|
|
<option value="">Unassigned</option>
|
|
|
|
|
<?php foreach ($allUsers as $user): ?>
|
|
|
|
|
<option value="<?php echo $user['user_id']; ?>"
|
|
|
|
|
<?php echo ($ticket['assigned_to'] == $user['user_id']) ? 'selected' : ''; ?>>
|
|
|
|
|
<?php echo htmlspecialchars($user['display_name'] ?? $user['username']); ?>
|
|
|
|
|
</option>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2026-01-07 18:14:29 -05:00
|
|
|
|
|
|
|
|
<!-- Metadata Fields: Priority, Category, Type -->
|
|
|
|
|
<div class="ticket-metadata-fields" style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;">
|
|
|
|
|
<div class="metadata-field">
|
|
|
|
|
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Priority:</label>
|
2026-01-07 18:49:44 -05:00
|
|
|
<select id="prioritySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
2026-01-07 18:14:29 -05:00
|
|
|
<option value="1" <?php echo $ticket['priority'] == 1 ? 'selected' : ''; ?>>P1 - Critical</option>
|
|
|
|
|
<option value="2" <?php echo $ticket['priority'] == 2 ? 'selected' : ''; ?>>P2 - High</option>
|
|
|
|
|
<option value="3" <?php echo $ticket['priority'] == 3 ? 'selected' : ''; ?>>P3 - Medium</option>
|
|
|
|
|
<option value="4" <?php echo $ticket['priority'] == 4 ? 'selected' : ''; ?>>P4 - Low</option>
|
|
|
|
|
<option value="5" <?php echo $ticket['priority'] == 5 ? 'selected' : ''; ?>>P5 - Lowest</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="metadata-field">
|
|
|
|
|
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Category:</label>
|
2026-01-07 18:49:44 -05:00
|
|
|
<select id="categorySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
2026-01-07 18:14:29 -05:00
|
|
|
<option value="Hardware" <?php echo $ticket['category'] == 'Hardware' ? 'selected' : ''; ?>>Hardware</option>
|
|
|
|
|
<option value="Software" <?php echo $ticket['category'] == 'Software' ? 'selected' : ''; ?>>Software</option>
|
|
|
|
|
<option value="Network" <?php echo $ticket['category'] == 'Network' ? 'selected' : ''; ?>>Network</option>
|
|
|
|
|
<option value="Security" <?php echo $ticket['category'] == 'Security' ? 'selected' : ''; ?>>Security</option>
|
|
|
|
|
<option value="General" <?php echo $ticket['category'] == 'General' ? 'selected' : ''; ?>>General</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="metadata-field">
|
|
|
|
|
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Type:</label>
|
2026-01-07 18:49:44 -05:00
|
|
|
<select id="typeSelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
2026-01-07 18:14:29 -05:00
|
|
|
<option value="Maintenance" <?php echo $ticket['type'] == 'Maintenance' ? 'selected' : ''; ?>>Maintenance</option>
|
|
|
|
|
<option value="Install" <?php echo $ticket['type'] == 'Install' ? 'selected' : ''; ?>>Install</option>
|
|
|
|
|
<option value="Task" <?php echo $ticket['type'] == 'Task' ? 'selected' : ''; ?>>Task</option>
|
|
|
|
|
<option value="Upgrade" <?php echo $ticket['type'] == 'Upgrade' ? 'selected' : ''; ?>>Upgrade</option>
|
|
|
|
|
<option value="Issue" <?php echo $ticket['type'] == 'Issue' ? 'selected' : ''; ?>>Issue</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-23 10:01:50 -05:00
|
|
|
|
|
|
|
|
<!-- Visibility Settings -->
|
2026-01-23 10:23:19 -05:00
|
|
|
<?php
|
|
|
|
|
$currentVisibility = $ticket['visibility'] ?? 'public';
|
|
|
|
|
$currentVisibilityGroups = array_filter(array_map('trim', explode(',', $ticket['visibility_groups'] ?? '')));
|
|
|
|
|
// Get all available groups
|
|
|
|
|
require_once __DIR__ . '/../models/UserModel.php';
|
|
|
|
|
$visUserModel = new UserModel($conn);
|
|
|
|
|
$allAvailableGroups = $visUserModel->getAllGroups();
|
|
|
|
|
?>
|
2026-01-23 10:01:50 -05:00
|
|
|
<div class="ticket-visibility-settings" style="margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--terminal-green);">
|
2026-01-23 10:23:19 -05:00
|
|
|
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 0.75rem;">
|
2026-01-23 10:01:50 -05:00
|
|
|
<div class="metadata-field">
|
|
|
|
|
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-cyan); font-family: var(--font-mono); font-size: 0.85rem;">Visibility:</label>
|
2026-01-23 10:23:19 -05:00
|
|
|
<select id="visibilitySelect" class="metadata-select editable-metadata" disabled onchange="toggleVisibilityGroupsEdit()" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
2026-01-23 10:01:50 -05:00
|
|
|
<option value="public" <?php echo $currentVisibility == 'public' ? 'selected' : ''; ?>>Public</option>
|
|
|
|
|
<option value="internal" <?php echo $currentVisibility == 'internal' ? 'selected' : ''; ?>>Internal</option>
|
|
|
|
|
<option value="confidential" <?php echo $currentVisibility == 'confidential' ? 'selected' : ''; ?>>Confidential</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2026-01-23 10:23:19 -05:00
|
|
|
<div class="metadata-field" id="visibilityGroupsField" style="<?php echo $currentVisibility !== 'internal' ? 'display: none;' : ''; ?>">
|
2026-01-23 10:01:50 -05:00
|
|
|
<label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-cyan); font-family: var(--font-mono); font-size: 0.85rem;">Allowed Groups:</label>
|
2026-01-23 10:23:19 -05:00
|
|
|
<div class="visibility-groups-edit" style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
|
|
|
|
<?php foreach ($allAvailableGroups as $group):
|
|
|
|
|
$isChecked = in_array($group, $currentVisibilityGroups);
|
2026-01-23 10:01:50 -05:00
|
|
|
?>
|
2026-01-23 10:23:19 -05:00
|
|
|
<label style="display: flex; align-items: center; gap: 0.3rem; cursor: pointer;">
|
|
|
|
|
<input type="checkbox" class="visibility-group-checkbox editable-metadata" disabled
|
|
|
|
|
value="<?php echo htmlspecialchars($group); ?>"
|
|
|
|
|
<?php echo $isChecked ? 'checked' : ''; ?>>
|
|
|
|
|
<span class="group-badge" style="font-size: 0.7rem;"><?php echo htmlspecialchars($group); ?></span>
|
|
|
|
|
</label>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
<?php if (empty($allAvailableGroups)): ?>
|
|
|
|
|
<span style="color: var(--text-muted); font-size: 0.85rem;">No groups available</span>
|
2026-01-23 10:01:50 -05:00
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-07 10:34:56 -05:00
|
|
|
</div>
|
|
|
|
|
<div class="header-controls">
|
|
|
|
|
<div class="status-priority-group">
|
|
|
|
|
<select id="statusSelect" class="editable status-select status-<?php echo str_replace(' ', '-', strtolower($ticket["status"])); ?>" data-field="status" onchange="updateTicketStatus()">
|
|
|
|
|
<option value="<?php echo $ticket['status']; ?>" selected>
|
|
|
|
|
<?php echo $ticket['status']; ?> (current)
|
|
|
|
|
</option>
|
|
|
|
|
<?php foreach ($allowedTransitions as $transition): ?>
|
|
|
|
|
<option value="<?php echo $transition['to_status']; ?>"
|
|
|
|
|
data-requires-comment="<?php echo $transition['requires_comment'] ? '1' : '0'; ?>"
|
|
|
|
|
data-requires-admin="<?php echo $transition['requires_admin'] ? '1' : '0'; ?>">
|
|
|
|
|
<?php echo $transition['to_status']; ?>
|
|
|
|
|
<?php if ($transition['requires_comment']): ?> *<?php endif; ?>
|
|
|
|
|
<?php if ($transition['requires_admin']): ?> (Admin)<?php endif; ?>
|
|
|
|
|
</option>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<button id="editButton" class="btn" onclick="toggleEditMode()">Edit Ticket</button>
|
|
|
|
|
</div>
|
2025-05-16 20:02:49 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-07 10:34:56 -05:00
|
|
|
|
|
|
|
|
<!-- DIVIDER -->
|
|
|
|
|
<div class="ascii-divider"></div>
|
|
|
|
|
|
|
|
|
|
<!-- SECTION 2: Tab Navigation -->
|
|
|
|
|
<div class="ascii-section-header">Content Sections</div>
|
|
|
|
|
<div class="ascii-content">
|
2025-05-16 20:02:49 -04:00
|
|
|
<div class="ticket-tabs">
|
|
|
|
|
<button class="tab-btn active" onclick="showTab('description')">Description</button>
|
|
|
|
|
<button class="tab-btn" onclick="showTab('comments')">Comments</button>
|
Implement comprehensive improvement plan (Phases 1-6)
Security (Phase 1-2):
- Add SecurityHeadersMiddleware with CSP, X-Frame-Options, etc.
- Add RateLimitMiddleware for API rate limiting
- Add security event logging to AuditLogModel
- Add ResponseHelper for standardized API responses
- Update config.php with security constants
Database (Phase 3):
- Add migration 014 for additional indexes
- Add migration 015 for ticket dependencies
- Add migration 016 for ticket attachments
- Add migration 017 for recurring tickets
- Add migration 018 for custom fields
Features (Phase 4-5):
- Add ticket dependencies with DependencyModel and API
- Add duplicate detection with check_duplicates API
- Add file attachments with AttachmentModel and upload/download APIs
- Add @mentions with autocomplete and highlighting
- Add quick actions on dashboard rows
Collaboration (Phase 5):
- Add mention extraction in CommentModel
- Add mention autocomplete dropdown in ticket.js
- Add mention highlighting CSS styles
Admin & Export (Phase 6):
- Add StatsModel for dashboard widgets
- Add dashboard stats cards (open, critical, unassigned, etc.)
- Add CSV/JSON export via export_tickets API
- Add rich text editor toolbar in markdown.js
- Add RecurringTicketModel with cron job
- Add CustomFieldModel for per-category fields
- Add admin views: RecurringTickets, CustomFields, Workflow,
Templates, AuditLog, UserActivity
- Add admin APIs: manage_workflows, manage_templates,
manage_recurring, custom_fields, get_users
- Add admin routes in index.php
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-20 09:55:01 -05:00
|
|
|
<button class="tab-btn" onclick="showTab('attachments')">Attachments</button>
|
|
|
|
|
<button class="tab-btn" onclick="showTab('dependencies')">Dependencies</button>
|
2026-01-01 18:25:19 -05:00
|
|
|
<button class="tab-btn" onclick="showTab('activity')">Activity</button>
|
2025-05-16 20:02:49 -04:00
|
|
|
</div>
|
2026-01-07 10:34:56 -05:00
|
|
|
</div>
|
2025-05-16 20:02:49 -04:00
|
|
|
|
2026-01-07 10:34:56 -05:00
|
|
|
<!-- DIVIDER -->
|
|
|
|
|
<div class="ascii-divider"></div>
|
2025-05-16 20:02:49 -04:00
|
|
|
|
2026-01-07 10:34:56 -05:00
|
|
|
<!-- SECTION 3: Tab Content Area -->
|
|
|
|
|
<div class="ascii-section-header">Content Display</div>
|
|
|
|
|
<div class="ascii-content">
|
|
|
|
|
<div class="ascii-frame-inner">
|
|
|
|
|
<div class="ticket-details">
|
|
|
|
|
<div id="description-tab" class="tab-content active">
|
|
|
|
|
<div class="ascii-subsection-header">Description</div>
|
|
|
|
|
<div class="detail-group full-width">
|
|
|
|
|
<label>Description</label>
|
|
|
|
|
<textarea class="editable" data-field="description" disabled><?php echo $ticket["description"]; ?></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="comments-tab" class="tab-content">
|
|
|
|
|
<div class="ascii-subsection-header">Comments Section</div>
|
|
|
|
|
<div class="comments-section">
|
|
|
|
|
<div class="ascii-frame-inner">
|
|
|
|
|
<h2>Add Comment</h2>
|
|
|
|
|
<div class="comment-form">
|
2025-05-16 20:02:49 -04:00
|
|
|
<textarea id="newComment" placeholder="Add a comment..."></textarea>
|
|
|
|
|
<div class="comment-controls">
|
|
|
|
|
<div class="markdown-toggles">
|
|
|
|
|
<div class="preview-toggle">
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="markdownMaster" onchange="toggleMarkdownMode()">
|
|
|
|
|
<span class="slider round"></span>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="toggle-label">Enable Markdown</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="preview-toggle">
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="markdownToggle" onchange="togglePreview()" disabled>
|
|
|
|
|
<span class="slider round"></span>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="toggle-label">Preview Markdown</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button onclick="addComment()" class="btn">Add Comment</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="markdownPreview" class="markdown-preview" style="display: none;"></div>
|
2026-01-07 10:34:56 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 18:25:19 -05:00
|
|
|
|
2026-01-07 10:34:56 -05:00
|
|
|
<!-- Comment List in separate sub-frame -->
|
|
|
|
|
<div class="ascii-frame-inner">
|
|
|
|
|
<h2>Comment History</h2>
|
|
|
|
|
<div class="comments-list">
|
|
|
|
|
<?php
|
2026-01-24 16:59:29 -05:00
|
|
|
$currentUserId = $GLOBALS['currentUser']['user_id'] ?? null;
|
|
|
|
|
$isAdmin = $GLOBALS['currentUser']['is_admin'] ?? false;
|
|
|
|
|
|
2026-01-07 10:34:56 -05:00
|
|
|
foreach ($comments as $comment) {
|
|
|
|
|
// Use display_name_formatted which falls back appropriately
|
|
|
|
|
$displayName = $comment['display_name_formatted'] ?? $comment['user_name'] ?? 'Unknown User';
|
2026-01-24 16:59:29 -05:00
|
|
|
$commentId = $comment['comment_id'];
|
|
|
|
|
$isOwner = ($comment['user_id'] == $currentUserId);
|
|
|
|
|
$canModify = $isOwner || $isAdmin;
|
|
|
|
|
$markdownEnabled = $comment['markdown_enabled'] ? 1 : 0;
|
|
|
|
|
|
|
|
|
|
echo "<div class='comment' data-comment-id='{$commentId}' data-markdown-enabled='{$markdownEnabled}'>";
|
2026-01-07 10:34:56 -05:00
|
|
|
echo "<div class='comment-header'>";
|
|
|
|
|
echo "<span class='comment-user'>" . htmlspecialchars($displayName) . "</span>";
|
2026-01-24 16:59:29 -05:00
|
|
|
$dateStr = date('M d, Y H:i', strtotime($comment['created_at']));
|
|
|
|
|
$editedIndicator = !empty($comment['updated_at']) ? ' <span class="comment-edited">(edited)</span>' : '';
|
|
|
|
|
echo "<span class='comment-date'>{$dateStr}{$editedIndicator}</span>";
|
|
|
|
|
|
|
|
|
|
// Edit/Delete buttons for owner or admin
|
|
|
|
|
if ($canModify) {
|
|
|
|
|
echo "<div class='comment-actions'>";
|
|
|
|
|
echo "<button type='button' class='comment-action-btn edit-btn' onclick='editComment({$commentId})' title='Edit comment'>✏️</button>";
|
|
|
|
|
echo "<button type='button' class='comment-action-btn delete-btn' onclick='deleteComment({$commentId})' title='Delete comment'>🗑️</button>";
|
|
|
|
|
echo "</div>";
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-07 10:34:56 -05:00
|
|
|
echo "</div>";
|
2026-01-24 16:59:29 -05:00
|
|
|
echo "<div class='comment-text' id='comment-text-{$commentId}' " . ($comment['markdown_enabled'] ? "data-markdown" : "") . ">";
|
2026-01-07 10:34:56 -05:00
|
|
|
if ($comment['markdown_enabled']) {
|
2026-01-09 11:09:27 -05:00
|
|
|
// Markdown will be rendered by JavaScript
|
|
|
|
|
echo htmlspecialchars($comment['comment_text']);
|
2026-01-07 10:34:56 -05:00
|
|
|
} else {
|
|
|
|
|
// For non-markdown comments, convert line breaks to <br> and escape HTML
|
|
|
|
|
echo nl2br(htmlspecialchars($comment['comment_text']));
|
|
|
|
|
}
|
|
|
|
|
echo "</div>";
|
2026-01-24 16:59:29 -05:00
|
|
|
// Hidden raw text for editing
|
|
|
|
|
echo "<textarea class='comment-edit-raw' id='comment-raw-{$commentId}' style='display:none;'>" . htmlspecialchars($comment['comment_text']) . "</textarea>";
|
2026-01-07 10:34:56 -05:00
|
|
|
echo "</div>";
|
|
|
|
|
}
|
|
|
|
|
?>
|
2026-01-01 18:25:19 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-07 10:34:56 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
Implement comprehensive improvement plan (Phases 1-6)
Security (Phase 1-2):
- Add SecurityHeadersMiddleware with CSP, X-Frame-Options, etc.
- Add RateLimitMiddleware for API rate limiting
- Add security event logging to AuditLogModel
- Add ResponseHelper for standardized API responses
- Update config.php with security constants
Database (Phase 3):
- Add migration 014 for additional indexes
- Add migration 015 for ticket dependencies
- Add migration 016 for ticket attachments
- Add migration 017 for recurring tickets
- Add migration 018 for custom fields
Features (Phase 4-5):
- Add ticket dependencies with DependencyModel and API
- Add duplicate detection with check_duplicates API
- Add file attachments with AttachmentModel and upload/download APIs
- Add @mentions with autocomplete and highlighting
- Add quick actions on dashboard rows
Collaboration (Phase 5):
- Add mention extraction in CommentModel
- Add mention autocomplete dropdown in ticket.js
- Add mention highlighting CSS styles
Admin & Export (Phase 6):
- Add StatsModel for dashboard widgets
- Add dashboard stats cards (open, critical, unassigned, etc.)
- Add CSV/JSON export via export_tickets API
- Add rich text editor toolbar in markdown.js
- Add RecurringTicketModel with cron job
- Add CustomFieldModel for per-category fields
- Add admin views: RecurringTickets, CustomFields, Workflow,
Templates, AuditLog, UserActivity
- Add admin APIs: manage_workflows, manage_templates,
manage_recurring, custom_fields, get_users
- Add admin routes in index.php
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-20 09:55:01 -05:00
|
|
|
<div id="attachments-tab" class="tab-content">
|
|
|
|
|
<div class="ascii-subsection-header">File Attachments</div>
|
|
|
|
|
<div class="attachments-container">
|
|
|
|
|
<!-- Upload Form -->
|
|
|
|
|
<div class="ascii-frame-inner" style="margin-bottom: 1rem;">
|
|
|
|
|
<h3>Upload Files</h3>
|
|
|
|
|
<div class="upload-zone" id="uploadZone">
|
|
|
|
|
<div class="upload-zone-content">
|
|
|
|
|
<div class="upload-icon">📁</div>
|
|
|
|
|
<p>Drag and drop files here or click to browse</p>
|
|
|
|
|
<p class="upload-hint">Max file size: <?php echo $GLOBALS['config']['MAX_UPLOAD_SIZE'] ? number_format($GLOBALS['config']['MAX_UPLOAD_SIZE'] / 1048576, 0) . 'MB' : '10MB'; ?></p>
|
|
|
|
|
<input type="file" id="fileInput" multiple style="display: none;">
|
|
|
|
|
<button type="button" onclick="document.getElementById('fileInput').click();" class="btn" style="margin-top: 1rem;">Browse Files</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="uploadProgress" style="display: none; margin-top: 1rem;">
|
|
|
|
|
<div class="progress-bar">
|
|
|
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="uploadStatus" style="margin-top: 0.5rem; color: var(--terminal-green); font-family: var(--font-mono); font-size: 0.85rem;"></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Attachment List -->
|
|
|
|
|
<div class="ascii-frame-inner">
|
|
|
|
|
<h3>Attached Files</h3>
|
|
|
|
|
<div id="attachmentsList" class="attachments-list">
|
|
|
|
|
<p class="loading-text">Loading attachments...</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="dependencies-tab" class="tab-content">
|
|
|
|
|
<div class="ascii-subsection-header">Ticket Dependencies</div>
|
|
|
|
|
<div class="dependencies-container">
|
|
|
|
|
<!-- Add Dependency Form -->
|
|
|
|
|
<div class="ascii-frame-inner" style="margin-bottom: 1rem;">
|
|
|
|
|
<h3>Add Dependency</h3>
|
|
|
|
|
<div class="add-dependency-form" style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
|
|
|
|
|
<input type="text" id="dependencyTicketId" placeholder="Ticket ID (e.g., 123456789)"
|
|
|
|
|
style="flex: 1; min-width: 150px; padding: 0.5rem; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
|
|
|
|
<select id="dependencyType" style="padding: 0.5rem; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
|
|
|
|
|
<option value="blocks">Blocks</option>
|
|
|
|
|
<option value="blocked_by">Blocked By</option>
|
|
|
|
|
<option value="relates_to">Relates To</option>
|
|
|
|
|
<option value="duplicates">Duplicates</option>
|
|
|
|
|
</select>
|
|
|
|
|
<button onclick="addDependency()" class="btn">Add</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Existing Dependencies -->
|
|
|
|
|
<div class="ascii-frame-inner">
|
|
|
|
|
<h3>Current Dependencies</h3>
|
|
|
|
|
<div id="dependenciesList" class="dependencies-list">
|
|
|
|
|
<p class="loading-text">Loading dependencies...</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Dependent Tickets -->
|
|
|
|
|
<div class="ascii-frame-inner" style="margin-top: 1rem;">
|
|
|
|
|
<h3>Tickets That Depend On This</h3>
|
|
|
|
|
<div id="dependentsList" class="dependencies-list">
|
|
|
|
|
<p class="loading-text">Loading dependents...</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-07 10:34:56 -05:00
|
|
|
<div id="activity-tab" class="tab-content">
|
|
|
|
|
<div class="ascii-subsection-header">Activity Timeline</div>
|
|
|
|
|
<div class="timeline-container">
|
|
|
|
|
<?php if (empty($timeline)): ?>
|
|
|
|
|
<p>No activity recorded yet.</p>
|
|
|
|
|
<?php else: ?>
|
|
|
|
|
<?php foreach ($timeline as $event): ?>
|
|
|
|
|
<div class="timeline-event">
|
|
|
|
|
<div class="timeline-icon"><?php echo getEventIcon($event['action_type']); ?></div>
|
|
|
|
|
<div class="timeline-content">
|
|
|
|
|
<div class="timeline-header">
|
|
|
|
|
<strong><?php echo htmlspecialchars($event['display_name'] ?? $event['username'] ?? 'System'); ?></strong>
|
|
|
|
|
<span class="timeline-action"><?php echo formatAction($event); ?></span>
|
|
|
|
|
<span class="timeline-date"><?php echo date('M d, Y H:i', strtotime($event['created_at'])); ?></span>
|
|
|
|
|
</div>
|
|
|
|
|
<?php if (!empty($event['details'])): ?>
|
|
|
|
|
<div class="timeline-details">
|
|
|
|
|
<?php echo formatDetails($event['details'], $event['action_type']); ?>
|
|
|
|
|
</div>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 18:25:19 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-05-16 20:02:49 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-07 10:34:56 -05:00
|
|
|
<!-- END OUTER FRAME -->
|
2025-05-16 20:02:49 -04:00
|
|
|
<script>
|
|
|
|
|
// Initialize the ticket view
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
if (typeof showTab === 'function') {
|
|
|
|
|
showTab('description');
|
|
|
|
|
} else {
|
|
|
|
|
console.error('showTab function not defined');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2025-09-05 11:08:56 -04:00
|
|
|
<script>
|
2026-01-23 10:01:50 -05:00
|
|
|
// Ticket data already initialized in head, add id alias for compatibility
|
|
|
|
|
window.ticketData.id = window.ticketData.ticket_id;
|
2025-09-05 11:08:56 -04:00
|
|
|
console.log('Ticket data loaded:', window.ticketData);
|
|
|
|
|
</script>
|
2026-01-08 23:05:03 -05:00
|
|
|
|
|
|
|
|
<!-- Settings Modal (same as dashboard) -->
|
2026-01-08 23:16:29 -05:00
|
|
|
<div class="settings-modal" id="settingsModal" style="display: none;" onclick="closeOnBackdropClick(event)">
|
2026-01-08 23:05:03 -05:00
|
|
|
<div class="settings-content">
|
|
|
|
|
<span class="bottom-left-corner">╚</span>
|
|
|
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
|
|
|
|
|
|
<div class="settings-header">
|
|
|
|
|
<h3>⚙ System Preferences</h3>
|
|
|
|
|
<button class="close-settings" onclick="closeSettingsModal()">✗</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-body">
|
|
|
|
|
<!-- Display Preferences -->
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<h4>╔══ Display Preferences ══╗</h4>
|
|
|
|
|
|
|
|
|
|
<div class="setting-row">
|
|
|
|
|
<label for="rowsPerPage">Rows per page:</label>
|
|
|
|
|
<select id="rowsPerPage" class="setting-select">
|
|
|
|
|
<option value="15">15</option>
|
|
|
|
|
<option value="25">25</option>
|
|
|
|
|
<option value="50">50</option>
|
|
|
|
|
<option value="100">100</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="setting-row">
|
|
|
|
|
<label for="defaultFilters">Default status filters:</label>
|
|
|
|
|
<div class="checkbox-group">
|
|
|
|
|
<label><input type="checkbox" name="defaultFilters" value="Open" checked> Open</label>
|
|
|
|
|
<label><input type="checkbox" name="defaultFilters" value="Pending" checked> Pending</label>
|
|
|
|
|
<label><input type="checkbox" name="defaultFilters" value="In Progress" checked> In Progress</label>
|
|
|
|
|
<label><input type="checkbox" name="defaultFilters" value="Closed"> Closed</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="setting-row">
|
|
|
|
|
<label for="tableDensity">Table density:</label>
|
|
|
|
|
<select id="tableDensity" class="setting-select">
|
|
|
|
|
<option value="compact">Compact</option>
|
|
|
|
|
<option value="normal" selected>Normal</option>
|
|
|
|
|
<option value="comfortable">Comfortable</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Notifications -->
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<h4>╔══ Notifications ══╗</h4>
|
|
|
|
|
|
|
|
|
|
<div class="setting-row">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" id="notificationsEnabled" checked>
|
|
|
|
|
Enable browser notifications
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="setting-row">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" id="soundEffects" checked>
|
|
|
|
|
Sound effects
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="setting-row">
|
|
|
|
|
<label for="toastDuration">Toast duration:</label>
|
|
|
|
|
<select id="toastDuration" class="setting-select">
|
|
|
|
|
<option value="3000" selected>3 seconds</option>
|
|
|
|
|
<option value="5000">5 seconds</option>
|
|
|
|
|
<option value="10000">10 seconds</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Keyboard Shortcuts -->
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<h4>╔══ Keyboard Shortcuts ══╗</h4>
|
|
|
|
|
<div class="shortcuts-list">
|
|
|
|
|
<div class="shortcut-item">
|
|
|
|
|
<kbd>Ctrl/Cmd + E</kbd> <span>Toggle edit mode</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="shortcut-item">
|
|
|
|
|
<kbd>Ctrl/Cmd + S</kbd> <span>Save changes</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="shortcut-item">
|
|
|
|
|
<kbd>Alt + S</kbd> <span>Open settings</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="shortcut-item">
|
|
|
|
|
<kbd>ESC</kbd> <span>Cancel/Close</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- User Info (Read-only) -->
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<h4>╔══ User Information ══╗</h4>
|
|
|
|
|
<div class="user-info-grid">
|
|
|
|
|
<div><strong>Display Name:</strong></div>
|
|
|
|
|
<div><?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? 'N/A'); ?></div>
|
|
|
|
|
|
|
|
|
|
<div><strong>Username:</strong></div>
|
|
|
|
|
<div><?php echo htmlspecialchars($GLOBALS['currentUser']['username']); ?></div>
|
|
|
|
|
|
|
|
|
|
<div><strong>Email:</strong></div>
|
|
|
|
|
<div><?php echo htmlspecialchars($GLOBALS['currentUser']['email'] ?? 'N/A'); ?></div>
|
|
|
|
|
|
|
|
|
|
<div><strong>Role:</strong></div>
|
|
|
|
|
<div><?php echo $GLOBALS['currentUser']['is_admin'] ? 'Administrator' : 'User'; ?></div>
|
2026-01-23 10:01:50 -05:00
|
|
|
|
|
|
|
|
<div><strong>Groups:</strong></div>
|
|
|
|
|
<div class="user-groups-list">
|
|
|
|
|
<?php
|
|
|
|
|
$groups = explode(',', $GLOBALS['currentUser']['groups'] ?? '');
|
|
|
|
|
foreach ($groups as $g):
|
|
|
|
|
if (trim($g)):
|
|
|
|
|
?>
|
|
|
|
|
<span class="group-badge"><?php echo htmlspecialchars(trim($g)); ?></span>
|
|
|
|
|
<?php
|
|
|
|
|
endif;
|
|
|
|
|
endforeach;
|
|
|
|
|
if (empty(trim($GLOBALS['currentUser']['groups'] ?? ''))):
|
|
|
|
|
?>
|
|
|
|
|
<span style="color: var(--text-muted);">No groups assigned</span>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
2026-01-08 23:05:03 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-footer">
|
|
|
|
|
<button class="btn btn-primary" onclick="saveSettings()">Save Preferences</button>
|
|
|
|
|
<button class="btn btn-secondary" onclick="closeSettingsModal()">Cancel</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/settings.js"></script>
|
2025-05-16 20:02:49 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|