LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add 9 new features for enhanced UX and security

Browse Source 
Quick Wins:
- Feature 1: Ticket linking in comments (#123456789 auto-links)
- Feature 6: Checkbox click area fix (click anywhere in cell)
- Feature 7: User groups display in settings modal

UI Enhancements:
- Feature 4: Collapsible sidebar with localStorage persistence
- Feature 5: Inline ticket preview popup on hover (300ms delay)
- Feature 2: Mobile responsive improvements (44px touch targets, iOS zoom fix)

Major Features:
- Feature 3: Kanban card view with status columns (toggle with localStorage)
- Feature 9: API key generation admin panel (/admin/api-keys)
- Feature 8: Ticket visibility levels (public/internal/confidential)

New files:
- views/admin/ApiKeysView.php
- api/generate_api_key.php
- api/revoke_api_key.php
- migrations/008_ticket_visibility.sql

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-01-23 10:01:50 -05:00
parent c32e9c871b
commit e86a5de3fd
19 changed files with 1933 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
api/download_attachment.php
View File

@@ -8,6 +8,7 @@
session_start();
require_once dirname(__DIR__) . '/config/config.php';
require_once dirname(__DIR__) . '/models/AttachmentModel.php';
require_once dirname(__DIR__) . '/models/TicketModel.php';
// Check authentication
if (!isset($_SESSION['user']) || !isset($_SESSION['user']['user_id'])) {
@@ -40,18 +41,52 @@ try {
exit;
}
// Verify the associated ticket exists (access control)
$conn = new mysqli(
$GLOBALS['config']['DB_HOST'],
$GLOBALS['config']['DB_USER'],
$GLOBALS['config']['DB_PASS'],
$GLOBALS['config']['DB_NAME']
);
if (!$conn->connect_error) {
$ticketModel = new TicketModel($conn);
$ticket = $ticketModel->getTicketById($attachment['ticket_id']);
$conn->close();
if (!$ticket) {
http_response_code(404);
header('Content-Type: application/json');
echo json_encode(['success' => false, 'error' => 'Associated ticket not found']);
exit;
}
}
// Build file path
$uploadDir = $GLOBALS['config']['UPLOAD_DIR'] ?? dirname(__DIR__) . '/uploads';
$filePath = $uploadDir . '/' . $attachment['ticket_id'] . '/' . $attachment['filename'];
// Security: Verify the resolved path is within the uploads directory (prevent path traversal)
$realUploadDir = realpath($uploadDir);
$realFilePath = realpath($filePath);
if ($realFilePath === false || $realUploadDir === false || strpos($realFilePath, $realUploadDir) !== 0) {
http_response_code(403);
header('Content-Type: application/json');
echo json_encode(['success' => false, 'error' => 'Access denied']);
exit;
}
// Check if file exists
if (!file_exists($filePath)) {
if (!file_exists($realFilePath)) {
http_response_code(404);
header('Content-Type: application/json');
echo json_encode(['success' => false, 'error' => 'File not found on server']);
exit;
}
// Use the validated real path
$filePath = $realFilePath;
// Determine if we should display inline or force download
$inline = isset($_GET['inline']) && $_GET['inline'] === '1';
$inlineTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'application/pdf', 'text/plain'];

127
api/generate_api_key.php Normal file
View File

@@ -0,0 +1,127 @@
<?php
// API endpoint for generating API keys (Admin only)
error_reporting(E_ALL);
ini_set('display_errors', 0);
// Apply rate limiting
require_once dirname(__DIR__) . '/middleware/RateLimitMiddleware.php';
RateLimitMiddleware::apply('api');
ob_start();
try {
// Load config
require_once dirname(__DIR__) . '/config/config.php';
// Load models
require_once dirname(__DIR__) . '/models/ApiKeyModel.php';
require_once dirname(__DIR__) . '/models/AuditLogModel.php';
// Check authentication via session
session_start();
if (!isset($_SESSION['user']) || !isset($_SESSION['user']['user_id'])) {
throw new Exception("Authentication required");
}
// Check admin privileges
if (!isset($_SESSION['user']['is_admin']) || !$_SESSION['user']['is_admin']) {
throw new Exception("Admin privileges required");
}
// CSRF Protection
require_once dirname(__DIR__) . '/middleware/CsrfMiddleware.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$csrfToken = $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
if (!CsrfMiddleware::validateToken($csrfToken)) {
http_response_code(403);
throw new Exception("Invalid CSRF token");
}
}
// Only allow POST
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
http_response_code(405);
throw new Exception("Method not allowed");
}
// Get request data
$input = json_decode(file_get_contents('php://input'), true);
if (!$input) {
throw new Exception("Invalid request data");
}
$keyName = trim($input['key_name'] ?? '');
$expiresInDays = $input['expires_in_days'] ?? null;
if (empty($keyName)) {
throw new Exception("Key name is required");
}
if (strlen($keyName) > 100) {
throw new Exception("Key name must be 100 characters or less");
}
// Validate expires_in_days if provided
if ($expiresInDays !== null && $expiresInDays !== '') {
$expiresInDays = (int)$expiresInDays;
if ($expiresInDays < 1 || $expiresInDays > 3650) {
throw new Exception("Expiration must be between 1 and 3650 days");
}
} else {
$expiresInDays = null;
}
// Create database connection
$conn = new mysqli(
$GLOBALS['config']['DB_HOST'],
$GLOBALS['config']['DB_USER'],
$GLOBALS['config']['DB_PASS'],
$GLOBALS['config']['DB_NAME']
);
if ($conn->connect_error) {
throw new Exception("Database connection failed");
}
// Generate API key
$apiKeyModel = new ApiKeyModel($conn);
$result = $apiKeyModel->createKey($keyName, $_SESSION['user']['user_id'], $expiresInDays);
if (!$result['success']) {
throw new Exception($result['error'] ?? "Failed to generate API key");
}
// Log the action
$auditLog = new AuditLogModel($conn);
$auditLog->log(
$_SESSION['user']['user_id'],
'create',
'api_key',
$result['key_id'],
['key_name' => $keyName, 'expires_in_days' => $expiresInDays]
);
$conn->close();
// Clear output buffer
ob_end_clean();
// Return success with the plaintext key (shown only once)
header('Content-Type: application/json');
echo json_encode([
'success' => true,
'api_key' => $result['api_key'],
'key_prefix' => $result['key_prefix'],
'key_id' => $result['key_id'],
'expires_at' => $result['expires_at']
]);
} catch (Exception $e) {
ob_end_clean();
header('Content-Type: application/json');
http_response_code(isset($conn) ? 400 : 500);
echo json_encode([
'success' => false,
'error' => $e->getMessage()
]);
}

7
api/get_template.php
View File

@@ -14,11 +14,14 @@ if (!isset($_SESSION['user']) || !isset($_SESSION['user']['user_id'])) {
// Get template ID from query parameter
$templateId = $_GET['template_id'] ?? null;
if (!$templateId) {
echo json_encode(['success' => false, 'error' => 'Template ID required']);
if (!$templateId || !is_numeric($templateId)) {
echo json_encode(['success' => false, 'error' => 'Valid template ID required']);
exit;
}
// Cast to integer for safety
$templateId = (int)$templateId;
// Create database connection
$conn = new mysqli(
$GLOBALS['config']['DB_HOST'],

120
api/revoke_api_key.php Normal file
View File

@@ -0,0 +1,120 @@
<?php
// API endpoint for revoking API keys (Admin only)
error_reporting(E_ALL);
ini_set('display_errors', 0);
// Apply rate limiting
require_once dirname(__DIR__) . '/middleware/RateLimitMiddleware.php';
RateLimitMiddleware::apply('api');
ob_start();
try {
// Load config
require_once dirname(__DIR__) . '/config/config.php';
// Load models
require_once dirname(__DIR__) . '/models/ApiKeyModel.php';
require_once dirname(__DIR__) . '/models/AuditLogModel.php';
// Check authentication via session
session_start();
if (!isset($_SESSION['user']) || !isset($_SESSION['user']['user_id'])) {
throw new Exception("Authentication required");
}
// Check admin privileges
if (!isset($_SESSION['user']['is_admin']) || !$_SESSION['user']['is_admin']) {
throw new Exception("Admin privileges required");
}
// CSRF Protection
require_once dirname(__DIR__) . '/middleware/CsrfMiddleware.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$csrfToken = $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
if (!CsrfMiddleware::validateToken($csrfToken)) {
http_response_code(403);
throw new Exception("Invalid CSRF token");
}
}
// Only allow POST
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
http_response_code(405);
throw new Exception("Method not allowed");
}
// Get request data
$input = json_decode(file_get_contents('php://input'), true);
if (!$input) {
throw new Exception("Invalid request data");
}
$keyId = (int)($input['key_id'] ?? 0);
if ($keyId <= 0) {
throw new Exception("Valid key ID is required");
}
// Create database connection
$conn = new mysqli(
$GLOBALS['config']['DB_HOST'],
$GLOBALS['config']['DB_USER'],
$GLOBALS['config']['DB_PASS'],
$GLOBALS['config']['DB_NAME']
);
if ($conn->connect_error) {
throw new Exception("Database connection failed");
}
// Get key info for audit log
$apiKeyModel = new ApiKeyModel($conn);
$keyInfo = $apiKeyModel->getKeyById($keyId);
if (!$keyInfo) {
throw new Exception("API key not found");
}
if (!$keyInfo['is_active']) {
throw new Exception("API key is already revoked");
}
// Revoke the key
$success = $apiKeyModel->revokeKey($keyId);
if (!$success) {
throw new Exception("Failed to revoke API key");
}
// Log the action
$auditLog = new AuditLogModel($conn);
$auditLog->log(
$_SESSION['user']['user_id'],
'revoke',
'api_key',
$keyId,
['key_name' => $keyInfo['key_name'], 'key_prefix' => $keyInfo['key_prefix']]
);
$conn->close();
// Clear output buffer
ob_end_clean();
// Return success
header('Content-Type: application/json');
echo json_encode([
'success' => true,
'message' => 'API key revoked successfully'
]);
} catch (Exception $e) {
ob_end_clean();
header('Content-Type: application/json');
http_response_code(isset($conn) ? 400 : 500);
echo json_encode([
'success' => false,
'error' => $e->getMessage()
]);
}

28
api/ticket_dependencies.php
View File

@@ -11,14 +11,14 @@ header('Content-Type: application/json');
register_shutdown_function(function() {
$error = error_get_last();
if ($error && in_array($error['type'], [E_ERROR, E_PARSE, E_CORE_ERROR, E_COMPILE_ERROR])) {
// Log detailed error server-side
error_log('Fatal error in ticket_dependencies.php: ' . $error['message'] . ' in ' . $error['file'] . ':' . $error['line']);
ob_end_clean();
http_response_code(500);
header('Content-Type: application/json');
echo json_encode([
'success' => false,
'error' => 'Fatal: ' . $error['message'],
'file' => basename($error['file']),
'line' => $error['line']
'error' => 'A server error occurred'
]);
}
});
@@ -28,28 +28,28 @@ error_reporting(E_ALL);
// Custom error handler
set_error_handler(function($errno, $errstr, $errfile, $errline) {
// Log detailed error server-side
error_log("PHP Error in ticket_dependencies.php: $errstr in $errfile:$errline");
ob_end_clean();
http_response_code(500);
header('Content-Type: application/json');
echo json_encode([
'success' => false,
'error' => "PHP Error: $errstr",
'file' => basename($errfile),
'line' => $errline
'error' => 'A server error occurred'
]);
exit;
});
// Custom exception handler
set_exception_handler(function($e) {
// Log detailed error server-side
error_log('Exception in ticket_dependencies.php: ' . $e->getMessage() . ' in ' . $e->getFile() . ':' . $e->getLine());
ob_end_clean();
http_response_code(500);
header('Content-Type: application/json');
echo json_encode([
'success' => false,
'error' => 'Exception: ' . $e->getMessage(),
'file' => basename($e->getFile()),
'line' => $e->getLine()
'error' => 'A server error occurred'
]);
exit;
});
@@ -108,7 +108,8 @@ try {
$dependencyModel = new DependencyModel($conn);
$auditLog = new AuditLogModel($conn);
} catch (Exception $e) {
ResponseHelper::serverError('Failed to initialize models: ' . $e->getMessage());
error_log('Failed to initialize models in ticket_dependencies.php: ' . $e->getMessage());
ResponseHelper::serverError('Failed to initialize required components');
}
$method = $_SERVER['REQUEST_METHOD'];
@@ -127,7 +128,8 @@ switch ($method) {
$dependencies = $dependencyModel->getDependencies($ticketId);
$dependents = $dependencyModel->getDependentTickets($ticketId);
} catch (Exception $e) {
ResponseHelper::serverError('Query error: ' . $e->getMessage());
error_log('Query error in ticket_dependencies.php GET: ' . $e->getMessage());
ResponseHelper::serverError('Failed to retrieve dependencies');
}
ResponseHelper::success([
@@ -206,7 +208,9 @@ switch ($method) {
ResponseHelper::error('Method not allowed', 405);
}
} catch (Exception $e) {
ResponseHelper::serverError('An error occurred: ' . $e->getMessage());
// Log detailed error server-side
error_log('Ticket dependencies API error: ' . $e->getMessage() . ' in ' . $e->getFile() . ':' . $e->getLine());
ResponseHelper::serverError('An error occurred while processing the dependency request');
}
$conn->close();

10
api/update_ticket.php
View File

@@ -144,6 +144,16 @@ try {
// Update ticket with user tracking
$result = $this->ticketModel->updateTicket($updateData, $this->userId);
// Handle visibility update if provided
if ($result && isset($data['visibility'])) {
$visibilityGroups = $data['visibility_groups'] ?? null;
// Convert array to comma-separated string if needed
if (is_array($visibilityGroups)) {
$visibilityGroups = implode(',', array_map('trim', $visibilityGroups));
}
$this->ticketModel->updateVisibility($id, $data['visibility'], $visibilityGroups, $this->userId);
}
if ($result) {
// Log ticket update to audit log
if ($this->userId) {

602
assets/css/dashboard.css
View File

@@ -1691,6 +1691,81 @@ input[type="checkbox"]:checked {
box-shadow: var(--glow-amber);
}
/* Collapsible Sidebar */
.sidebar-toggle {
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 64px;
background: var(--bg-secondary);
border: 2px solid var(--terminal-green);
border-left: none;
color: var(--terminal-green);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.sidebar-toggle::before,
.sidebar-toggle::after {
content: '';
}
.sidebar-toggle:hover {
background: rgba(0, 255, 65, 0.15);
color: var(--terminal-amber);
border-color: var(--terminal-amber);
}
.toggle-arrow {
transition: transform 0.3s ease;
}
.dashboard-sidebar {
position: relative;
transition: width 0.3s ease, margin 0.3s ease;
}
.sidebar-content {
overflow: hidden;
transition: opacity 0.3s ease;
}
.dashboard-sidebar.collapsed {
width: 0;
margin-right: 16px;
}
.dashboard-sidebar.collapsed .sidebar-content {
opacity: 0;
pointer-events: none;
}
.dashboard-sidebar.collapsed .sidebar-toggle {
right: -48px;
}
.dashboard-sidebar.collapsed .toggle-arrow {
transform: rotate(180deg);
}
.dashboard-layout.sidebar-collapsed {
/* Adjust layout when sidebar is collapsed */
}
/* Hide toggle on mobile */
@media (max-width: 768px) {
.sidebar-toggle {
display: none;
}
}
.dashboard-main {
flex: 1;
min-width: 0;
@@ -1973,6 +2048,17 @@ body.dark-mode .modal-body select {
height: 18px;
}
/* Checkbox cell - click anywhere to toggle */
.checkbox-cell {
cursor: pointer;
text-align: center;
transition: background-color 0.2s ease;
}
.checkbox-cell:hover {
background-color: rgba(0, 255, 65, 0.15);
}
/* Responsive bulk actions */
@media (max-width: 768px) {
.bulk-actions-toolbar {
@@ -3243,3 +3329,519 @@ table td:nth-child(4) {
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== TICKET LINK REFERENCES IN COMMENTS ===== */
.ticket-link-ref {
color: var(--terminal-cyan);
text-decoration: none;
font-family: var(--font-mono);
padding: 0.1rem 0.3rem;
border-radius: 0;
background: rgba(0, 255, 255, 0.1);
transition: all 0.2s ease;
}
.ticket-link-ref:hover {
color: var(--terminal-amber);
background: rgba(255, 176, 0, 0.15);
text-shadow: var(--glow-amber);
}
/* ===== USER GROUPS DISPLAY ===== */
.user-groups-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.group-badge {
display: inline-block;
padding: 0.2rem 0.6rem;
background: rgba(0, 255, 255, 0.1);
border: 1px solid var(--terminal-cyan);
color: var(--terminal-cyan);
font-family: var(--font-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.group-badge:hover {
background: rgba(0, 255, 255, 0.2);
text-shadow: 0 0 5px var(--terminal-cyan);
}
/* ===== VISIBILITY SETTINGS ===== */
.visibility-groups-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.visibility-groups-list label {
cursor: pointer;
}
.visibility-groups-list label:hover .group-badge {
background: rgba(0, 255, 255, 0.2);
text-shadow: 0 0 5px var(--terminal-cyan);
}
.visibility-group-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
}
.visibility-group-checkbox:checked + .group-badge {
background: var(--terminal-cyan);
color: var(--bg-primary);
font-weight: bold;
}
.ticket-visibility-settings {
margin-top: 0.75rem;
}
.visibility-groups-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* ===== INLINE TICKET PREVIEW POPUP ===== */
.ticket-preview-popup {
position: absolute;
z-index: 10000;
width: 320px;
background: var(--bg-primary);
border: 2px solid var(--terminal-green);
box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
font-family: var(--font-mono);
padding: 0;
pointer-events: auto;
}
.ticket-preview-popup::before {
content: '┌──────────────────────┐';
display: block;
color: var(--terminal-green);
font-size: 0.7rem;
text-align: center;
padding: 0.25rem;
background: var(--bg-secondary);
border-bottom: 1px solid var(--terminal-green);
}
.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--bg-secondary);
border-bottom: 1px solid var(--terminal-green);
}
.preview-id {
color: var(--terminal-amber);
font-weight: bold;
text-shadow: var(--glow-amber);
}
.preview-status {
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
text-transform: uppercase;
}
.preview-title {
padding: 0.75rem;
color: var(--terminal-green);
font-size: 0.95rem;
line-height: 1.4;
border-bottom: 1px solid var(--terminal-green);
word-break: break-word;
}
.preview-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 0.75rem;
font-size: 0.8rem;
color: var(--terminal-green);
}
.preview-meta strong {
color: var(--terminal-cyan);
}
.preview-footer {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
color: var(--text-muted);
background: var(--bg-secondary);
border-top: 1px solid var(--terminal-green);
}
/* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */
/* Table wrapper for horizontal scrolling */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -0.5rem;
padding: 0 0.5rem;
}
@media (max-width: 768px) {
/* Prevent iOS zoom on input focus */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
font-size: 16px !important;
}
/* Minimum touch target size (44px) */
.btn,
button,
.tab-btn,
.checkbox-cell,
.quick-action-btn,
input[type="checkbox"],
select {
min-height: 44px;
min-width: 44px;
}
/* Better button spacing */
.btn {
padding: 12px 16px;
margin: 4px 2px;
}
/* Stack toolbar elements */
.dashboard-toolbar {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.toolbar-left,
.toolbar-center,
.toolbar-right {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.toolbar-search {
flex-direction: column;
width: 100%;
}
.toolbar-search input,
.toolbar-search button {
width: 100%;
margin: 4px 0;
}
.search-box {
width: 100% !important;
max-width: none !important;
}
/* Improve table readability */
table {
font-size: 0.8rem;
}
th, td {
padding: 8px 6px;
min-width: 60px;
}
/* Hide less important columns on mobile */
table th:nth-child(5),
table td:nth-child(5),
table th:nth-child(10),
table td:nth-child(10),
table th:nth-child(11),
table td:nth-child(11) {
display: none;
}
/* Improve stats widgets */
.stats-row {
flex-wrap: wrap;
}
.stat-card {
flex: 1 1 calc(50% - 0.5rem);
min-width: 120px;
}
/* Improve filter groups */
.filter-group label {
min-height: 44px;
display: flex;
align-items: center;
padding: 0.5rem 0;
}
.filter-group input[type="checkbox"] {
width: 20px;
height: 20px;
margin-right: 0.75rem;
}
/* Improve pagination */
.pagination {
flex-wrap: wrap;
justify-content: center;
}
.pagination button {
min-width: 44px;
min-height: 44px;
padding: 8px 12px;
}
/* Better modal sizing */
.modal-content,
.settings-content {
width: 95%;
max-width: 95%;
max-height: 90vh;
overflow-y: auto;
}
/* Hide preview on mobile (not useful with touch) */
.ticket-preview-popup {
display: none !important;
}
/* Improve quick actions */
.quick-actions {
flex-direction: row;
gap: 4px;
}
.quick-action-btn {
padding: 8px;
font-size: 1rem;
}
}
/* ===== VIEW TOGGLE BUTTONS ===== */
.view-toggle {
display: flex;
gap: 0;
border: 2px solid var(--terminal-green);
}
.view-btn {
padding: 0.5rem 1rem;
background: var(--bg-primary);
color: var(--terminal-green);
border: none;
cursor: pointer;
font-size: 1.2rem;
min-width: 44px;
min-height: 44px;
transition: all 0.2s ease;
}
.view-btn::before,
.view-btn::after {
content: '';
}
.view-btn:hover {
background: rgba(0, 255, 65, 0.15);
}
.view-btn.active {
background: var(--terminal-green);
color: var(--bg-primary);
}
/* ===== KANBAN BOARD STYLES ===== */
.card-view-container {
margin-bottom: 2rem;
}
.kanban-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
min-height: 500px;
}
.kanban-column {
background: var(--bg-secondary);
border: 2px solid var(--terminal-green);
display: flex;
flex-direction: column;
min-height: 400px;
}
.kanban-column-header {
padding: 1rem;
border-bottom: 2px solid var(--terminal-green);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.kanban-column-header.status-Open {
background: rgba(40, 167, 69, 0.1);
color: var(--status-open);
border-color: var(--status-open);
}
.kanban-column-header.status-Pending {
background: rgba(156, 39, 176, 0.1);
color: var(--status-pending);
border-color: var(--status-pending);
}
.kanban-column-header.status-In-Progress {
background: rgba(255, 193, 7, 0.1);
color: var(--status-in-progress);
border-color: var(--status-in-progress);
}
.kanban-column-header.status-Closed {
background: rgba(220, 53, 69, 0.1);
color: var(--status-closed);
border-color: var(--status-closed);
}
.column-title {
font-weight: bold;
}
.column-count {
background: currentColor;
color: var(--bg-primary);
padding: 0.2rem 0.6rem;
font-size: 0.8rem;
font-weight: bold;
}
.kanban-cards {
flex: 1;
padding: 0.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.kanban-card {
background: var(--bg-primary);
border: 1px solid var(--terminal-green);
padding: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-mono);
}
.kanban-card:hover {
border-color: var(--terminal-amber);
transform: translateX(4px);
box-shadow: -4px 0 0 var(--terminal-amber);
}
.kanban-card.priority-1 { border-left: 4px solid var(--priority-1); }
.kanban-card.priority-2 { border-left: 4px solid var(--priority-2); }
.kanban-card.priority-3 { border-left: 4px solid var(--priority-3); }
.kanban-card.priority-4 { border-left: 4px solid var(--priority-4); }
.kanban-card.priority-5 { border-left: 4px solid var(--priority-5); }
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.8rem;
}
.card-id {
color: var(--terminal-cyan);
}
.card-priority {
padding: 0.1rem 0.4rem;
font-size: 0.7rem;
font-weight: bold;
}
.card-priority.p1 { background: var(--priority-1); color: white; }
.card-priority.p2 { background: var(--priority-2); color: black; }
.card-priority.p3 { background: var(--priority-3); color: white; }
.card-priority.p4 { background: var(--priority-4); color: black; }
.card-priority.p5 { background: var(--priority-5); color: white; }
.card-title {
color: var(--terminal-green);
font-size: 0.9rem;
line-height: 1.3;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
color: var(--text-muted);
}
.card-category {
background: rgba(0, 255, 65, 0.1);
padding: 0.1rem 0.4rem;
}
.card-assignee {
width: 28px;
height: 28px;
background: var(--terminal-cyan);
color: var(--bg-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.7rem;
}
/* Kanban responsive */
@media (max-width: 1200px) {
.kanban-board {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.kanban-board {
grid-template-columns: 1fr;
}
.kanban-column {
min-height: 200px;
}
}

113
assets/css/ticket.css
View File

@@ -1499,3 +1499,116 @@ body.dark-mode .editable {
background: rgba(0, 255, 65, 0.1);
color: var(--terminal-amber);
}
/* ===== ENHANCED MOBILE RESPONSIVE - TICKET PAGE ===== */
@media (max-width: 768px) {
/* Prevent iOS zoom on input focus */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
font-size: 16px !important;
}
/* Touch-friendly button sizes */
.btn,
button,
.tab-btn {
min-height: 44px;
padding: 12px 16px;
}
/* Stack ticket metadata vertically */
.ticket-metadata-fields {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.metadata-field {
width: 100%;
}
/* Stack header controls */
.ticket-subheader {
flex-direction: column;
gap: 1rem;
}
.header-controls {
width: 100%;
flex-direction: column;
}
.status-priority-group {
width: 100%;
margin-right: 0;
}
.status-select {
width: 100%;
}
/* Full width buttons */
#editButton {
width: 100%;
}
/* Improve comment form */
.comment-form textarea {
width: 100%;
min-height: 120px;
}
.comment-controls {
flex-direction: column;
gap: 1rem;
}
.markdown-toggles {
flex-direction: column;
gap: 0.75rem;
}
/* Improve assignment dropdown */
.ticket-assignment {
flex-direction: column;
align-items: flex-start;
}
.assignment-select {
width: 100%;
min-height: 44px;
}
/* Full width tabs with better spacing */
.ticket-tabs {
flex-wrap: wrap;
}
.tab-btn {
flex: 1 1 auto;
text-align: center;
min-width: 100px;
}
/* Improve upload zone */
.upload-zone {
padding: 1.5rem;
}
.upload-zone-content p {
font-size: 0.9rem;
}
/* Improve timeline readability */
.timeline-header {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.timeline-date {
margin-left: 0;
}
}

267
assets/js/dashboard.js
View File

@@ -5,6 +5,34 @@ function escapeHtml(text) {
return div.innerHTML;
}
/**
* Toggle sidebar visibility on desktop
*/
function toggleSidebar() {
const sidebar = document.getElementById('dashboardSidebar');
const layout = document.querySelector('.dashboard-layout');
if (sidebar && layout) {
sidebar.classList.toggle('collapsed');
layout.classList.toggle('sidebar-collapsed');
// Store state in localStorage
const isCollapsed = sidebar.classList.contains('collapsed');
localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
}
}
// Restore sidebar state on page load
document.addEventListener('DOMContentLoaded', function() {
const savedState = localStorage.getItem('sidebarCollapsed');
if (savedState === 'true') {
const sidebar = document.getElementById('dashboardSidebar');
const layout = document.querySelector('.dashboard-layout');
if (sidebar && layout) {
sidebar.classList.add('collapsed');
layout.classList.add('sidebar-collapsed');
}
}
});
// Main initialization
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, initializing dashboard...');
@@ -480,6 +508,20 @@ function toggleSelectAll() {
updateSelectionCount();
}
/**
* Toggle checkbox when clicking anywhere in the checkbox cell
*/
function toggleRowCheckbox(event, cell) {
// Prevent double-toggle if clicking directly on the checkbox
if (event.target.type === 'checkbox') return;
event.stopPropagation();
const cb = cell.querySelector('.ticket-checkbox');
if (cb) {
cb.checked = !cb.checked;
updateSelectionCount();
}
}
function updateSelectionCount() {
const checkboxes = document.querySelectorAll('.ticket-checkbox:checked');
const count = checkboxes.length;
@@ -1355,6 +1397,231 @@ function performQuickAssign(ticketId) {
});
}
// ========================================
// KANBAN / CARD VIEW
// ========================================
/**
* Set the view mode (table or card)
*/
function setViewMode(mode) {
const tableView = document.querySelector('.ascii-frame-outer');
const cardView = document.getElementById('cardView');
const tableBtn = document.getElementById('tableViewBtn');
const cardBtn = document.getElementById('cardViewBtn');
if (!tableView || !cardView) return;
if (mode === 'card') {
tableView.style.display = 'none';
cardView.style.display = 'block';
tableBtn.classList.remove('active');
cardBtn.classList.add('active');
populateKanbanCards();
} else {
tableView.style.display = 'block';
cardView.style.display = 'none';
tableBtn.classList.add('active');
cardBtn.classList.remove('active');
}
// Store preference
localStorage.setItem('ticketViewMode', mode);
}
/**
* Populate Kanban cards from table data
*/
function populateKanbanCards() {
const rows = document.querySelectorAll('tbody tr');
const columns = {
'Open': document.querySelector('.kanban-column[data-status="Open"] .kanban-cards'),
'Pending': document.querySelector('.kanban-column[data-status="Pending"] .kanban-cards'),
'In Progress': document.querySelector('.kanban-column[data-status="In Progress"] .kanban-cards'),
'Closed': document.querySelector('.kanban-column[data-status="Closed"] .kanban-cards')
};
// Clear existing cards
Object.values(columns).forEach(col => {
if (col) col.innerHTML = '';
});
const counts = { 'Open': 0, 'Pending': 0, 'In Progress': 0, 'Closed': 0 };
const isAdmin = document.getElementById('selectAllCheckbox') !== null;
const offset = isAdmin ? 1 : 0;
rows.forEach(row => {
const cells = row.querySelectorAll('td');
if (cells.length < 6) return; // Skip empty rows
const ticketId = cells[0 + offset]?.querySelector('.ticket-link')?.textContent.trim() || '';
const priority = cells[1 + offset]?.textContent.trim() || '';
const title = cells[2 + offset]?.textContent.trim() || '';
const category = cells[3 + offset]?.textContent.trim() || '';
const status = cells[5 + offset]?.textContent.trim() || '';
const assignedTo = cells[7 + offset]?.textContent.trim() || 'Unassigned';
// Get initials for assignee
const initials = assignedTo === 'Unassigned' ? '?' :
assignedTo.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
const column = columns[status];
if (column) {
counts[status]++;
const card = document.createElement('div');
card.className = `kanban-card priority-${priority}`;
card.onclick = () => window.location.href = `/ticket/${ticketId}`;
card.innerHTML = `
<div class="card-header">
<span class="card-id">#${escapeHtml(ticketId)}</span>
<span class="card-priority p${priority}">P${priority}</span>
</div>
<div class="card-title">${escapeHtml(title)}</div>
<div class="card-footer">
<span class="card-category">${escapeHtml(category)}</span>
<span class="card-assignee" title="${escapeHtml(assignedTo)}">${escapeHtml(initials)}</span>
</div>
`;
column.appendChild(card);
}
});
// Update column counts
Object.keys(counts).forEach(status => {
const header = document.querySelector(`.kanban-column[data-status="${status}"] .column-count`);
if (header) header.textContent = counts[status];
});
}
// Restore view mode on page load
document.addEventListener('DOMContentLoaded', function() {
const savedMode = localStorage.getItem('ticketViewMode');
if (savedMode === 'card') {
// Delay to ensure DOM is ready
setTimeout(() => setViewMode('card'), 100);
}
});
// ========================================
// INLINE TICKET PREVIEW
// ========================================
let previewTimeout = null;
let currentPreview = null;
function initTicketPreview() {
// Create preview element
const preview = document.createElement('div');
preview.id = 'ticketPreview';
preview.className = 'ticket-preview-popup';
preview.style.display = 'none';
document.body.appendChild(preview);
currentPreview = preview;
// Add event listeners to ticket links
document.querySelectorAll('.ticket-link').forEach(link => {
link.addEventListener('mouseenter', showTicketPreview);
link.addEventListener('mouseleave', hideTicketPreview);
});
// Keep preview visible when hovering over it
preview.addEventListener('mouseenter', () => {
if (previewTimeout) {
clearTimeout(previewTimeout);
previewTimeout = null;
}
});
preview.addEventListener('mouseleave', hideTicketPreview);
}
function showTicketPreview(event) {
const link = event.target.closest('.ticket-link');
if (!link) return;
// Clear any pending hide
if (previewTimeout) {
clearTimeout(previewTimeout);
}
// Delay before showing
previewTimeout = setTimeout(() => {
const row = link.closest('tr');
if (!row) return;
// Extract data from the table row
const cells = row.querySelectorAll('td');
const isAdmin = document.getElementById('selectAllCheckbox') !== null;
const offset = isAdmin ? 1 : 0;
const ticketId = link.textContent.trim();
const priority = cells[1 + offset]?.textContent.trim() || '';
const title = cells[2 + offset]?.textContent.trim() || '';
const category = cells[3 + offset]?.textContent.trim() || '';
const type = cells[4 + offset]?.textContent.trim() || '';
const status = cells[5 + offset]?.textContent.trim() || '';
const createdBy = cells[6 + offset]?.textContent.trim() || '';
const assignedTo = cells[7 + offset]?.textContent.trim() || '';
// Build preview content
currentPreview.innerHTML = `
<div class="preview-header">
<span class="preview-id">#${escapeHtml(ticketId)}</span>
<span class="preview-status status-${status.replace(/\s+/g, '-')}">${escapeHtml(status)}</span>
</div>
<div class="preview-title">${escapeHtml(title)}</div>
<div class="preview-meta">
<div><strong>Priority:</strong> P${escapeHtml(priority)}</div>
<div><strong>Category:</strong> ${escapeHtml(category)}</div>
<div><strong>Type:</strong> ${escapeHtml(type)}</div>
<div><strong>Assigned:</strong> ${escapeHtml(assignedTo)}</div>
</div>
<div class="preview-footer">Created by ${escapeHtml(createdBy)}</div>
`;
// Position the preview
const rect = link.getBoundingClientRect();
const previewWidth = 320;
const previewHeight = 200;
let left = rect.left + window.scrollX;
let top = rect.bottom + window.scrollY + 5;
// Adjust if going off-screen
if (left + previewWidth > window.innerWidth) {
left = window.innerWidth - previewWidth - 20;
}
if (top + previewHeight > window.innerHeight + window.scrollY) {
top = rect.top + window.scrollY - previewHeight - 5;
}
currentPreview.style.left = left + 'px';
currentPreview.style.top = top + 'px';
currentPreview.style.display = 'block';
}, 300);
}
function hideTicketPreview() {
if (previewTimeout) {
clearTimeout(previewTimeout);
}
previewTimeout = setTimeout(() => {
if (currentPreview) {
currentPreview.style.display = 'none';
}
}, 100);
}
// Initialize preview on page load
document.addEventListener('DOMContentLoaded', function() {
const hasTable = document.querySelector('table');
const isTicketPage = window.location.pathname.includes('/ticket/');
if (hasTable && !isTicketPage) {
initTicketPreview();
}
});
/**
* Toggle export dropdown menu
*/

3
assets/js/markdown.js
View File

@@ -13,6 +13,9 @@ function parseMarkdown(markdown) {
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
// Ticket references (#123456789) - convert to clickable links
html = html.replace(/#(\d{9})\b/g, '<a href="/ticket/$1" class="ticket-link-ref">#$1</a>');
// Code blocks (```code```)
html = html.replace(/```([\s\S]*?)```/g, '<pre class="code-block"><code>$1</code></pre>');

22
controllers/TicketController.php
View File

@@ -15,8 +15,10 @@ class TicketController {
private $workflowModel;
private $templateModel;
private $envVars;
private $conn;
public function __construct($conn) {
$this->conn = $conn;
$this->ticketModel = new TicketModel($conn);
$this->commentModel = new CommentModel($conn);
$this->auditLogModel = new AuditLogModel($conn);
@@ -59,6 +61,13 @@ class TicketController {
return;
}
// Check visibility access
if (!$this->ticketModel->canUserAccessTicket($ticket, $currentUser)) {
header("HTTP/1.0 403 Forbidden");
echo "Access denied: You do not have permission to view this ticket";
return;
}
// Get comments for this ticket using CommentModel
$comments = $this->commentModel->getCommentsByTicketId($id);
@@ -82,18 +91,27 @@ class TicketController {
// Check if form was submitted
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Handle visibility groups (comes as array from checkboxes)
$visibilityGroups = null;
if (isset($_POST['visibility_groups']) && is_array($_POST['visibility_groups'])) {
$visibilityGroups = implode(',', array_map('trim', $_POST['visibility_groups']));
}
$ticketData = [
'title' => $_POST['title'] ?? '',
'description' => $_POST['description'] ?? '',
'priority' => $_POST['priority'] ?? '4',
'category' => $_POST['category'] ?? 'General',
'type' => $_POST['type'] ?? 'Issue'
'type' => $_POST['type'] ?? 'Issue',
'visibility' => $_POST['visibility'] ?? 'public',
'visibility_groups' => $visibilityGroups
];
// Validate input
if (empty($ticketData['title'])) {
$error = "Title is required";
$templates = $this->templateModel->getAllTemplates();
$conn = $this->conn; // Make $conn available to view
include dirname(__DIR__) . '/views/CreateTicketView.php';
return;
}
@@ -116,12 +134,14 @@ class TicketController {
} else {
$error = $result['error'];
$templates = $this->templateModel->getAllTemplates();
$conn = $this->conn; // Make $conn available to view
include dirname(__DIR__) . '/views/CreateTicketView.php';
return;
}
} else {
// Get all templates for the template selector
$templates = $this->templateModel->getAllTemplates();
$conn = $this->conn; // Make $conn available to view
// Display the create ticket form
include dirname(__DIR__) . '/views/CreateTicketView.php';

12
index.php
View File

@@ -219,6 +219,18 @@ switch (true) {
include 'views/admin/AuditLogView.php';
break;
case $requestPath == '/admin/api-keys':
if (!$currentUser || !$currentUser['is_admin']) {
header("HTTP/1.0 403 Forbidden");
echo 'Admin access required';
break;
}
require_once 'models/ApiKeyModel.php';
$apiKeyModel = new ApiKeyModel($conn);
$apiKeys = $apiKeyModel->getAllKeys();
include 'views/admin/ApiKeysView.php';
break;
case $requestPath == '/admin/user-activity':
if (!$currentUser || !$currentUser['is_admin']) {
header("HTTP/1.0 403 Forbidden");

15
migrations/008_ticket_visibility.sql Normal file
View File

@@ -0,0 +1,15 @@
-- Migration: Add ticket visibility levels
-- Run this migration to enable ticket visibility features
-- Add visibility columns to tickets table
ALTER TABLE tickets
ADD COLUMN visibility ENUM('public', 'internal', 'confidential') DEFAULT 'public' AFTER type,
ADD COLUMN visibility_groups VARCHAR(500) DEFAULT NULL AFTER visibility;
-- Create index for visibility filtering
CREATE INDEX idx_tickets_visibility ON tickets(visibility);
-- Example usage:
-- Public: All authenticated users can see the ticket
-- Internal: Only users in specified groups can see the ticket (visibility_groups contains comma-separated group names)
-- Confidential: Only creator, assignee, and admins can see the ticket

142
models/TicketModel.php
View File

@@ -261,8 +261,8 @@ class TicketModel {
// Generate ticket ID (9-digit format with leading zeros)
$ticket_id = sprintf('%09d', mt_rand(1, 999999999));
$sql = "INSERT INTO tickets (ticket_id, title, description, status, priority, category, type, created_by)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
$sql = "INSERT INTO tickets (ticket_id, title, description, status, priority, category, type, created_by, visibility, visibility_groups)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
$stmt = $this->conn->prepare($sql);
@@ -271,9 +271,22 @@ class TicketModel {
$priority = $ticketData['priority'] ?? '4';
$category = $ticketData['category'] ?? 'General';
$type = $ticketData['type'] ?? 'Issue';
$visibility = $ticketData['visibility'] ?? 'public';
$visibilityGroups = $ticketData['visibility_groups'] ?? null;
// Validate visibility
$allowedVisibilities = ['public', 'internal', 'confidential'];
if (!in_array($visibility, $allowedVisibilities)) {
$visibility = 'public';
}
// Clear visibility_groups if not internal
if ($visibility !== 'internal') {
$visibilityGroups = null;
}
$stmt->bind_param(
"sssssssi",
"sssssssiss",
$ticket_id,
$ticketData['title'],
$ticketData['description'],
@@ -281,7 +294,9 @@ class TicketModel {
$priority,
$category,
$type,
$createdBy
$createdBy,
$visibility,
$visibilityGroups
);
if ($stmt->execute()) {
@@ -407,4 +422,123 @@ class TicketModel {
$stmt->close();
return $tickets;
}
/**
* Check if a user can access a ticket based on visibility settings
*
* @param array $ticket The ticket data
* @param array $user The user data (must include user_id, is_admin, groups)
* @return bool True if user can access the ticket
*/
public function canUserAccessTicket($ticket, $user) {
// Admins can access all tickets
if (!empty($user['is_admin'])) {
return true;
}
$visibility = $ticket['visibility'] ?? 'public';
// Public tickets are accessible to all authenticated users
if ($visibility === 'public') {
return true;
}
// Confidential tickets: only creator, assignee, and admins
if ($visibility === 'confidential') {
$userId = $user['user_id'] ?? null;
return ($ticket['created_by'] == $userId || $ticket['assigned_to'] == $userId);
}
// Internal tickets: check if user is in any of the allowed groups
if ($visibility === 'internal') {
$allowedGroups = array_filter(array_map('trim', explode(',', $ticket['visibility_groups'] ?? '')));
if (empty($allowedGroups)) {
return false; // No groups specified means no access
}
$userGroups = array_filter(array_map('trim', explode(',', $user['groups'] ?? '')));
// Check if any user group matches any allowed group
return !empty(array_intersect($userGroups, $allowedGroups));
}
return false;
}
/**
* Build visibility filter SQL for queries
*
* @param array $user The current user
* @return array ['sql' => string, 'params' => array, 'types' => string]
*/
public function getVisibilityFilter($user) {
// Admins see all tickets
if (!empty($user['is_admin'])) {
return ['sql' => '1=1', 'params' => [], 'types' => ''];
}
$userId = $user['user_id'] ?? 0;
$userGroups = array_filter(array_map('trim', explode(',', $user['groups'] ?? '')));
// Build the visibility filter
// 1. Public tickets
// 2. Confidential tickets where user is creator or assignee
// 3. Internal tickets where user's groups overlap with visibility_groups
$conditions = [];
$params = [];
$types = '';
// Public visibility
$conditions[] = "(t.visibility = 'public' OR t.visibility IS NULL)";
// Confidential - user is creator or assignee
$conditions[] = "(t.visibility = 'confidential' AND (t.created_by = ? OR t.assigned_to = ?))";
$params[] = $userId;
$params[] = $userId;
$types .= 'ii';
// Internal - check group membership
if (!empty($userGroups)) {
$groupConditions = [];
foreach ($userGroups as $group) {
$groupConditions[] = "FIND_IN_SET(?, REPLACE(t.visibility_groups, ' ', ''))";
$params[] = $group;
$types .= 's';
}
$conditions[] = "(t.visibility = 'internal' AND (" . implode(' OR ', $groupConditions) . "))";
}
return [
'sql' => '(' . implode(' OR ', $conditions) . ')',
'params' => $params,
'types' => $types
];
}
/**
* Update ticket visibility settings
*
* @param int $ticketId
* @param string $visibility ('public', 'internal', 'confidential')
* @param string|null $visibilityGroups Comma-separated group names for 'internal' visibility
* @param int $updatedBy User ID
* @return bool
*/
public function updateVisibility($ticketId, $visibility, $visibilityGroups, $updatedBy) {
$allowedVisibilities = ['public', 'internal', 'confidential'];
if (!in_array($visibility, $allowedVisibilities)) {
$visibility = 'public';
}
// Clear visibility_groups if not internal
if ($visibility !== 'internal') {
$visibilityGroups = null;
}
$sql = "UPDATE tickets SET visibility = ?, visibility_groups = ?, updated_by = ?, updated_at = NOW() WHERE ticket_id = ?";
$stmt = $this->conn->prepare($sql);
$stmt->bind_param("ssii", $visibility, $visibilityGroups, $updatedBy, $ticketId);
$result = $stmt->execute();
$stmt->close();
return $result;
}
}

25
models/UserModel.php
View File

@@ -266,4 +266,29 @@ class UserModel {
$stmt->close();
return $users;
}
/**
* Get all distinct groups from all users
* Used for visibility group selection UI
*
* @return array Array of unique group names
*/
public function getAllGroups() {
$stmt = $this->conn->prepare("SELECT DISTINCT groups FROM users WHERE groups IS NOT NULL AND groups != ''");
$stmt->execute();
$result = $stmt->get_result();
$allGroups = [];
while ($row = $result->fetch_assoc()) {
$userGroups = array_filter(array_map('trim', explode(',', $row['groups'])));
$allGroups = array_merge($allGroups, $userGroups);
}
$stmt->close();
// Return unique groups sorted alphabetically
$uniqueGroups = array_unique($allGroups);
sort($uniqueGroups);
return $uniqueGroups;
}
}

58
views/CreateTicketView.php
View File

@@ -166,7 +166,51 @@
<!-- DIVIDER -->
<div class="ascii-divider"></div>
<!-- SECTION 5: Detailed Description -->
<!-- SECTION 5: Visibility Settings -->
<div class="ascii-section-header">Visibility Settings</div>
<div class="ascii-content">
<div class="ascii-frame-inner">
<div class="detail-group">
<label for="visibility">Ticket Visibility</label>
<select id="visibility" name="visibility" class="editable" onchange="toggleVisibilityGroups()">
<option value="public" selected>Public - All authenticated users</option>
<option value="internal">Internal - Specific groups only</option>
<option value="confidential">Confidential - Creator, assignee, admins only</option>
</select>
<p style="color: var(--terminal-green); font-size: 0.85rem; margin-top: 0.5rem; font-family: var(--font-mono);">
Controls who can view this ticket
</p>
</div>
<div id="visibilityGroupsContainer" class="detail-group" style="display: none; margin-top: 1rem;">
<label>Allowed Groups</label>
<div class="visibility-groups-list" style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem;">
<?php
// Get all available groups
require_once __DIR__ . '/../models/UserModel.php';
$userModel = new UserModel($conn);
$allGroups = $userModel->getAllGroups();
foreach ($allGroups as $group):
?>
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
<input type="checkbox" name="visibility_groups[]" value="<?php echo htmlspecialchars($group); ?>" class="visibility-group-checkbox">
<span class="group-badge"><?php echo htmlspecialchars($group); ?></span>
</label>
<?php endforeach; ?>
<?php if (empty($allGroups)): ?>
<span style="color: var(--text-muted);">No groups available</span>
<?php endif; ?>
</div>
<p style="color: var(--terminal-amber); font-size: 0.85rem; margin-top: 0.5rem; font-family: var(--font-mono);">
Select which groups can view this ticket
</p>
</div>
</div>
</div>
<!-- DIVIDER -->
<div class="ascii-divider"></div>
<!-- SECTION 6: Detailed Description -->
<div class="ascii-section-header">Detailed Description</div>
<div class="ascii-content">
<div class="ascii-frame-inner">
@@ -251,6 +295,18 @@
div.textContent = text;
return div.innerHTML;
}
function toggleVisibilityGroups() {
const visibility = document.getElementById('visibility').value;
const groupsContainer = document.getElementById('visibilityGroupsContainer');
if (visibility === 'internal') {
groupsContainer.style.display = 'block';
} else {
groupsContainer.style.display = 'none';
// Uncheck all group checkboxes when hiding
document.querySelectorAll('.visibility-group-checkbox').forEach(cb => cb.checked = false);
}
}
</script>
</body>
</html>

65
views/DashboardView.php
View File

@@ -92,6 +92,7 @@
<a href="/admin/custom-fields">📝 Custom Fields</a>
<a href="/admin/user-activity">👥 User Activity</a>
<a href="/admin/audit-log">📜 Audit Log</a>
<a href="/admin/api-keys">🔑 API Keys</a>
</div>
</div>
<?php endif; ?>
@@ -125,7 +126,11 @@
<!-- Dashboard Layout with Sidebar -->
<div class="dashboard-layout">
<!-- Left Sidebar with Filters -->
<aside class="dashboard-sidebar">
<aside class="dashboard-sidebar" id="dashboardSidebar">
<button class="sidebar-toggle" onclick="toggleSidebar()" title="Toggle Sidebar">
<span class="toggle-arrow">◀</span>
</button>
<div class="sidebar-content">
<div class="ascii-frame-inner">
<div class="ascii-subsection-header">Filters</div>
@@ -184,6 +189,7 @@
<button id="apply-filters-btn" class="btn">Apply Filters</button>
<button id="clear-filters-btn" class="btn btn-secondary">Clear All</button>
</div>
</div>
</aside>
<!-- Main Content Area -->
@@ -277,6 +283,10 @@
<!-- Center: Actions + Count -->
<div class="toolbar-center">
<div class="view-toggle">
<button id="tableViewBtn" class="view-btn active" onclick="setViewMode('table')" title="Table View">≡</button>
<button id="cardViewBtn" class="view-btn" onclick="setViewMode('card')" title="Kanban View">▦</button>
</div>
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">+ New Ticket</button>
<div class="export-dropdown" id="exportDropdown" style="display: none;">
<button class="btn" onclick="toggleExportMenu(event)">↓ Export Selected (<span id="exportCount">0</span>)</button>
@@ -395,7 +405,7 @@
// Add checkbox column for admins
if ($GLOBALS['currentUser']['is_admin'] ?? false) {
echo "<td><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' onchange='updateSelectionCount()'></td>";
echo "<td onclick='toggleRowCheckbox(event, this)' class='checkbox-cell'><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' onchange='updateSelectionCount()'></td>";
}
echo "<td><a href='/ticket/{$row['ticket_id']}' class='ticket-link'>{$row['ticket_id']}</a></td>";
@@ -440,6 +450,40 @@
</div>
<!-- END OUTER FRAME -->
<!-- Kanban Card View -->
<div id="cardView" class="card-view-container" style="display: none;">
<div class="kanban-board">
<div class="kanban-column" data-status="Open">
<div class="kanban-column-header status-Open">
<span class="column-title">Open</span>
<span class="column-count">0</span>
</div>
<div class="kanban-cards"></div>
</div>
<div class="kanban-column" data-status="Pending">
<div class="kanban-column-header status-Pending">
<span class="column-title">Pending</span>
<span class="column-count">0</span>
</div>
<div class="kanban-cards"></div>
</div>
<div class="kanban-column" data-status="In Progress">
<div class="kanban-column-header status-In-Progress">
<span class="column-title">In Progress</span>
<span class="column-count">0</span>
</div>
<div class="kanban-cards"></div>
</div>
<div class="kanban-column" data-status="Closed">
<div class="kanban-column-header status-Closed">
<span class="column-title">Closed</span>
<span class="column-count">0</span>
</div>
<div class="kanban-cards"></div>
</div>
</div>
</div>
<!-- Settings Modal -->
<div class="settings-modal" id="settingsModal" style="display: none;" onclick="closeOnBackdropClick(event)">
<div class="settings-content">
@@ -571,6 +615,23 @@
<div><strong>Role:</strong></div>
<div><?php echo $GLOBALS['currentUser']['is_admin'] ? 'Administrator' : 'User'; ?></div>
<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>
</div>
</div>
</div>

74
views/TicketView.php
View File

@@ -64,14 +64,14 @@ function formatDetails($details, $actionType) {
window.APP_TIMEZONE_ABBREV = '<?php echo $GLOBALS['config']['TIMEZONE_ABBREV']; ?>';
</script>
<script>
// Store ticket data in a global variable
// Store ticket data in a global variable (using json_encode for XSS safety)
window.ticketData = {
ticket_id: "<?php echo $ticket['ticket_id']; ?>",
title: "<?php echo htmlspecialchars($ticket['title']); ?>",
status: "<?php echo $ticket['status']; ?>",
priority: "<?php echo $ticket['priority']; ?>",
category: "<?php echo $ticket['category']; ?>",
type: "<?php echo $ticket['type']; ?>"
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']); ?>
};
</script>
</head>
@@ -167,6 +167,38 @@ function formatDetails($details, $actionType) {
</select>
</div>
</div>
<!-- Visibility Settings -->
<div class="ticket-visibility-settings" style="margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--terminal-green);">
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;">
<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>
<select id="visibilitySelect" class="metadata-select editable-metadata" disabled onchange="toggleVisibilityGroups()" 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);">
<?php $currentVisibility = $ticket['visibility'] ?? 'public'; ?>
<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>
<div class="metadata-field" id="visibilityGroupsField" style="<?php echo $currentVisibility !== 'internal' ? 'opacity: 0.5;' : ''; ?>">
<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>
<div class="visibility-groups-display" style="font-family: var(--font-mono); font-size: 0.85rem; padding: 0.25rem;">
<?php
$visibilityGroups = array_filter(array_map('trim', explode(',', $ticket['visibility_groups'] ?? '')));
if (!empty($visibilityGroups)):
foreach ($visibilityGroups as $group):
?>
<span class="group-badge" style="font-size: 0.75rem;"><?php echo htmlspecialchars($group); ?></span>
<?php
endforeach;
else:
?>
<span style="color: var(--text-muted);"><?php echo $currentVisibility === 'internal' ? 'No groups selected' : '-'; ?></span>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<div class="header-controls">
<div class="status-priority-group">
@@ -395,15 +427,8 @@ function formatDetails($details, $actionType) {
});
</script>
<script>
// Make ticket data available to JavaScript
window.ticketData = {
id: <?php echo json_encode($ticket['ticket_id']); ?>,
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']); ?>,
title: <?php echo json_encode($ticket['title']); ?>
};
// Ticket data already initialized in head, add id alias for compatibility
window.ticketData.id = window.ticketData.ticket_id;
console.log('Ticket data loaded:', window.ticketData);
</script>
@@ -515,6 +540,23 @@ function formatDetails($details, $actionType) {
<div><strong>Role:</strong></div>
<div><?php echo $GLOBALS['currentUser']['is_admin'] ? 'Administrator' : 'User'; ?></div>
<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>
</div>
</div>
</div>

245
views/admin/ApiKeysView.php Normal file
View File

@@ -0,0 +1,245 @@
<?php
// Admin view for managing API keys
// Receives $apiKeys from controller
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Keys - Admin</title>
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css">
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
<script>
window.CSRF_TOKEN = '<?php
require_once __DIR__ . '/../../middleware/CsrfMiddleware.php';
echo CsrfMiddleware::getToken();
?>';
</script>
</head>
<body>
<div class="user-header">
<div class="user-header-left">
<a href="/" class="back-link">← Dashboard</a>
<span style="margin-left: 1rem; color: var(--terminal-amber);">Admin: API Keys</span>
</div>
<div class="user-header-right">
<?php if (isset($GLOBALS['currentUser'])): ?>
<span class="user-name"><?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
<span class="admin-badge">Admin</span>
<?php endif; ?>
</div>
</div>
<div class="ascii-frame-outer" style="max-width: 1200px; margin: 2rem auto;">
<span class="bottom-left-corner">╚</span>
<span class="bottom-right-corner">╝</span>
<div class="ascii-section-header">API Key Management</div>
<div class="ascii-content">
<!-- Generate New Key Form -->
<div class="ascii-frame-inner" style="margin-bottom: 1.5rem;">
<h3 style="color: var(--terminal-amber); margin-bottom: 1rem;">Generate New API Key</h3>
<form id="generateKeyForm" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end;">
<div style="flex: 1; min-width: 200px;">
<label style="display: block; font-size: 0.8rem; color: var(--terminal-amber); margin-bottom: 0.25rem;">Key Name *</label>
<input type="text" id="keyName" required placeholder="e.g., CI/CD Pipeline"
style="width: 100%; padding: 0.5rem; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
</div>
<div style="min-width: 150px;">
<label style="display: block; font-size: 0.8rem; color: var(--terminal-amber); margin-bottom: 0.25rem;">Expires In</label>
<select id="expiresIn" style="width: 100%; padding: 0.5rem; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
<option value="">Never</option>
<option value="30">30 days</option>
<option value="90">90 days</option>
<option value="180">180 days</option>
<option value="365">1 year</option>
</select>
</div>
<div>
<button type="submit" class="btn">Generate Key</button>
</div>
</form>
</div>
<!-- New Key Display (hidden by default) -->
<div id="newKeyDisplay" class="ascii-frame-inner" style="display: none; margin-bottom: 1.5rem; background: rgba(255, 176, 0, 0.1); border-color: var(--terminal-amber);">
<h3 style="color: var(--terminal-amber); margin-bottom: 0.5rem;">New API Key Generated</h3>
<p style="color: var(--priority-1); margin-bottom: 1rem; font-size: 0.9rem;">
Copy this key now. You won't be able to see it again!
</p>
<div style="display: flex; gap: 0.5rem; align-items: center;">
<input type="text" id="newKeyValue" readonly
style="flex: 1; padding: 0.75rem; font-family: var(--font-mono); font-size: 0.85rem; background: var(--bg-primary); border: 2px solid var(--terminal-green); color: var(--terminal-green);">
<button onclick="copyApiKey()" class="btn" title="Copy to clipboard">Copy</button>
</div>
</div>
<!-- Existing Keys Table -->
<div class="ascii-frame-inner">
<h3 style="color: var(--terminal-amber); margin-bottom: 1rem;">Existing API Keys</h3>
<table style="width: 100%; font-size: 0.9rem;">
<thead>
<tr>
<th>Name</th>
<th>Key Prefix</th>
<th>Created By</th>
<th>Created At</th>
<th>Expires At</th>
<th>Last Used</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php if (empty($apiKeys)): ?>
<tr>
<td colspan="8" style="text-align: center; padding: 2rem; color: var(--terminal-green-dim);">
No API keys found. Generate one above.
</td>
</tr>
<?php else: ?>
<?php foreach ($apiKeys as $key): ?>
<tr id="key-row-<?php echo $key['api_key_id']; ?>">
<td><?php echo htmlspecialchars($key['key_name']); ?></td>
<td style="font-family: var(--font-mono);">
<code><?php echo htmlspecialchars($key['key_prefix']); ?>...</code>
</td>
<td><?php echo htmlspecialchars($key['display_name'] ?? $key['username'] ?? 'Unknown'); ?></td>
<td style="white-space: nowrap;"><?php echo date('Y-m-d H:i', strtotime($key['created_at'])); ?></td>
<td style="white-space: nowrap;">
<?php if ($key['expires_at']): ?>
<?php
$expired = strtotime($key['expires_at']) < time();
$color = $expired ? 'var(--priority-1)' : 'var(--terminal-green)';
?>
<span style="color: <?php echo $color; ?>;">
<?php echo date('Y-m-d', strtotime($key['expires_at'])); ?>
<?php if ($expired): ?> (Expired)<?php endif; ?>
</span>
<?php else: ?>
<span style="color: var(--terminal-cyan);">Never</span>
<?php endif; ?>
</td>
<td style="white-space: nowrap;">
<?php echo $key['last_used'] ? date('Y-m-d H:i', strtotime($key['last_used'])) : 'Never'; ?>
</td>
<td>
<?php if ($key['is_active']): ?>
<span style="color: var(--status-open);">Active</span>
<?php else: ?>
<span style="color: var(--status-closed);">Revoked</span>
<?php endif; ?>
</td>
<td>
<?php if ($key['is_active']): ?>
<button onclick="revokeKey(<?php echo $key['api_key_id']; ?>)" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;">
Revoke
</button>
<?php else: ?>
<span style="color: var(--text-muted);">-</span>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
<!-- API Usage Info -->
<div class="ascii-frame-inner" style="margin-top: 1.5rem;">
<h3 style="color: var(--terminal-amber); margin-bottom: 1rem;">API Usage</h3>
<p style="margin-bottom: 0.5rem;">Include the API key in your requests using the Authorization header:</p>
<pre style="background: var(--bg-primary); padding: 1rem; border: 1px solid var(--terminal-green); overflow-x: auto;"><code>Authorization: Bearer YOUR_API_KEY</code></pre>
<p style="margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted);">
API keys provide programmatic access to create and manage tickets. Keep your keys secure and rotate them regularly.
</p>
</div>
</div>
</div>
<script>
document.getElementById('generateKeyForm').addEventListener('submit', async function(e) {
e.preventDefault();
const keyName = document.getElementById('keyName').value.trim();
const expiresIn = document.getElementById('expiresIn').value;
if (!keyName) {
showToast('Please enter a key name', 'error');
return;
}
try {
const response = await fetch('/api/generate_api_key.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': window.CSRF_TOKEN
},
body: JSON.stringify({
key_name: keyName,
expires_in_days: expiresIn || null
})
});
const data = await response.json();
if (data.success) {
// Show the new key
document.getElementById('newKeyValue').value = data.api_key;
document.getElementById('newKeyDisplay').style.display = 'block';
document.getElementById('keyName').value = '';
showToast('API key generated successfully', 'success');
// Reload page after 5 seconds to show new key in table
setTimeout(() => location.reload(), 5000);
} else {
showToast(data.error || 'Failed to generate API key', 'error');
}
} catch (error) {
showToast('Error generating API key: ' + error.message, 'error');
}
});
function copyApiKey() {
const keyInput = document.getElementById('newKeyValue');
keyInput.select();
document.execCommand('copy');
showToast('API key copied to clipboard', 'success');
}
async function revokeKey(keyId) {
if (!confirm('Are you sure you want to revoke this API key? This action cannot be undone.')) {
return;
}
try {
const response = await fetch('/api/revoke_api_key.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': window.CSRF_TOKEN
},
body: JSON.stringify({ key_id: keyId })
});
const data = await response.json();
if (data.success) {
showToast('API key revoked successfully', 'success');
location.reload();
} else {
showToast(data.error || 'Failed to revoke API key', 'error');
}
} catch (error) {
showToast('Error revoking API key: ' + error.message, 'error');
}
}
</script>
</body>
</html>