474 lines
23 KiB
PHP
474 lines
23 KiB
PHP
<?php
|
|
// This file contains the HTML template for the dashboard
|
|
// It receives $tickets, $totalTickets, $totalPages, $page, $status, $categories, $types variables from the controller
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ticket Dashboard</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">
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
|
|
</head>
|
|
<body data-categories='<?php echo json_encode($categories); ?>' data-types='<?php echo json_encode($types); ?>'>
|
|
|
|
<!-- Terminal Boot Sequence -->
|
|
<div id="boot-sequence" class="boot-overlay">
|
|
<pre id="boot-text"></pre>
|
|
</div>
|
|
<script>
|
|
function showBootSequence() {
|
|
const bootText = document.getElementById('boot-text');
|
|
const bootOverlay = document.getElementById('boot-sequence');
|
|
const messages = [
|
|
'╔═══════════════════════════════════════╗',
|
|
'║ TINKER TICKETS TERMINAL v1.0 ║',
|
|
'║ BOOTING SYSTEM... ║',
|
|
'╚═══════════════════════════════════════╝',
|
|
'',
|
|
'[ OK ] Loading kernel modules...',
|
|
'[ OK ] Initializing ticket database...',
|
|
'[ OK ] Mounting user session...',
|
|
'[ OK ] Starting dashboard services...',
|
|
'[ OK ] Rendering ASCII frames...',
|
|
'',
|
|
'> SYSTEM READY ✓',
|
|
''
|
|
];
|
|
|
|
let i = 0;
|
|
const interval = setInterval(() => {
|
|
if (i < messages.length) {
|
|
bootText.textContent += messages[i] + '\n';
|
|
i++;
|
|
} else {
|
|
setTimeout(() => {
|
|
bootOverlay.style.opacity = '0';
|
|
setTimeout(() => bootOverlay.remove(), 500);
|
|
}, 500);
|
|
clearInterval(interval);
|
|
}
|
|
}, 80);
|
|
}
|
|
|
|
// Run on first visit only (per session)
|
|
if (!sessionStorage.getItem('booted')) {
|
|
showBootSequence();
|
|
sessionStorage.setItem('booted', 'true');
|
|
} else {
|
|
document.getElementById('boot-sequence').remove();
|
|
}
|
|
</script>
|
|
<div class="user-header">
|
|
<div class="user-header-left">
|
|
<span class="app-title">🎫 Tinker Tickets</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>
|
|
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
|
|
<span class="admin-badge">Admin</span>
|
|
<?php endif; ?>
|
|
<button class="settings-icon" title="Settings (Alt+S)" onclick="openSettingsModal()">⚙</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collapsible ASCII Banner -->
|
|
<div class="ascii-banner-wrapper collapsed">
|
|
<button class="banner-toggle" onclick="toggleBanner()">
|
|
<span class="toggle-icon">▼</span> ASCII Banner
|
|
</button>
|
|
<div id="ascii-banner-container" class="banner-content"></div>
|
|
</div>
|
|
<script>
|
|
function toggleBanner() {
|
|
const wrapper = document.querySelector('.ascii-banner-wrapper');
|
|
const icon = document.querySelector('.toggle-icon');
|
|
wrapper.classList.toggle('collapsed');
|
|
icon.textContent = wrapper.classList.contains('collapsed') ? '▼' : '▲';
|
|
|
|
// Render banner on first expand (no animation for instant display)
|
|
if (!wrapper.classList.contains('collapsed') && !wrapper.dataset.rendered) {
|
|
renderResponsiveBanner('#ascii-banner-container', 0); // Speed 0 = no animation
|
|
wrapper.dataset.rendered = 'true';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Dashboard Layout with Sidebar -->
|
|
<div class="dashboard-layout">
|
|
<!-- Left Sidebar with Filters -->
|
|
<aside class="dashboard-sidebar">
|
|
<div class="ascii-frame-inner">
|
|
<div class="ascii-subsection-header">Filters</div>
|
|
|
|
<!-- Status Filter -->
|
|
<div class="filter-group">
|
|
<h4>Status</h4>
|
|
<?php
|
|
$currentStatus = isset($_GET['status']) ? explode(',', $_GET['status']) : ['Open', 'Pending', 'In Progress'];
|
|
$allStatuses = ['Open', 'Pending', 'In Progress', 'Closed'];
|
|
foreach ($allStatuses as $status):
|
|
?>
|
|
<label>
|
|
<input type="checkbox"
|
|
name="status"
|
|
value="<?php echo $status; ?>"
|
|
<?php echo in_array($status, $currentStatus) ? 'checked' : ''; ?>>
|
|
<?php echo $status; ?>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Category Filter -->
|
|
<div class="filter-group">
|
|
<h4>Category</h4>
|
|
<?php
|
|
$currentCategories = isset($_GET['category']) ? explode(',', $_GET['category']) : [];
|
|
foreach ($categories as $cat):
|
|
?>
|
|
<label>
|
|
<input type="checkbox"
|
|
name="category"
|
|
value="<?php echo $cat; ?>"
|
|
<?php echo in_array($cat, $currentCategories) ? 'checked' : ''; ?>>
|
|
<?php echo htmlspecialchars($cat); ?>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Type Filter -->
|
|
<div class="filter-group">
|
|
<h4>Type</h4>
|
|
<?php
|
|
$currentTypes = isset($_GET['type']) ? explode(',', $_GET['type']) : [];
|
|
foreach ($types as $type):
|
|
?>
|
|
<label>
|
|
<input type="checkbox"
|
|
name="type"
|
|
value="<?php echo $type; ?>"
|
|
<?php echo in_array($type, $currentTypes) ? 'checked' : ''; ?>>
|
|
<?php echo htmlspecialchars($type); ?>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<button id="apply-filters-btn" class="btn">Apply Filters</button>
|
|
<button id="clear-filters-btn" class="btn btn-secondary">Clear All</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="dashboard-main">
|
|
|
|
<!-- CONDENSED TOOLBAR: Combined Header, Search, Actions, Pagination -->
|
|
<div class="dashboard-toolbar">
|
|
<!-- Left: Title + Search -->
|
|
<div class="toolbar-left">
|
|
<h1 class="dashboard-title">🎫 Tickets</h1>
|
|
<form method="GET" action="" class="toolbar-search">
|
|
<!-- Preserve existing parameters -->
|
|
<?php if (isset($_GET['status'])): ?>
|
|
<input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['category'])): ?>
|
|
<input type="hidden" name="category" value="<?php echo htmlspecialchars($_GET['category']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['type'])): ?>
|
|
<input type="hidden" name="type" value="<?php echo htmlspecialchars($_GET['type']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['sort'])): ?>
|
|
<input type="hidden" name="sort" value="<?php echo htmlspecialchars($_GET['sort']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['dir'])): ?>
|
|
<input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
|
|
<?php endif; ?>
|
|
|
|
<input type="text"
|
|
name="search"
|
|
placeholder="🔍 Search tickets..."
|
|
class="search-box"
|
|
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
|
|
<button type="submit" class="btn search-btn">Search</button>
|
|
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
|
<a href="?" class="clear-search-btn">✗</a>
|
|
<?php endif; ?>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Center: Actions + Count -->
|
|
<div class="toolbar-center">
|
|
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">+ New Ticket</button>
|
|
<span class="ticket-count">Total: <?php echo $totalTickets; ?></span>
|
|
</div>
|
|
|
|
<!-- Right: Pagination -->
|
|
<div class="toolbar-right">
|
|
<div class="pagination">
|
|
<?php
|
|
$currentParams = $_GET;
|
|
|
|
// Previous page button
|
|
if ($page > 1) {
|
|
$currentParams['page'] = $page - 1;
|
|
$prevUrl = '?' . http_build_query($currentParams);
|
|
echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
|
|
}
|
|
|
|
// Page number buttons
|
|
for ($i = 1; $i <= $totalPages; $i++) {
|
|
$activeClass = ($i === $page) ? 'active' : '';
|
|
$currentParams['page'] = $i;
|
|
$pageUrl = '?' . http_build_query($currentParams);
|
|
echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
|
|
}
|
|
|
|
// Next page button
|
|
if ($page < $totalPages) {
|
|
$currentParams['page'] = $page + 1;
|
|
$nextUrl = '?' . http_build_query($currentParams);
|
|
echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
|
<div class="search-results-info">
|
|
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
|
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- TICKET TABLE WITH INLINE BULK ACTIONS -->
|
|
<div class="ascii-frame-outer">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<div class="ascii-section-header">Ticket List</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<!-- Inline Bulk Actions (appears above table when items selected) -->
|
|
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
|
<div class="bulk-actions-inline" style="display: none;">
|
|
<span id="selected-count">0</span> tickets selected
|
|
<button onclick="showBulkStatusModal()" class="btn btn-bulk">Change Status</button>
|
|
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign</button>
|
|
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Priority</button>
|
|
<button onclick="showBulkDeleteModal()" class="btn btn-bulk" style="background: var(--status-closed); border-color: var(--status-closed);">Delete</button>
|
|
<button onclick="clearSelection()" class="btn btn-secondary">Clear</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Table -->
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
|
<th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()"></th>
|
|
<?php endif; ?>
|
|
<?php
|
|
$currentSort = isset($_GET['sort']) ? $_GET['sort'] : 'ticket_id';
|
|
$currentDir = isset($_GET['dir']) ? $_GET['dir'] : 'desc';
|
|
|
|
$columns = [
|
|
'ticket_id' => 'Ticket ID',
|
|
'priority' => 'Priority',
|
|
'title' => 'Title',
|
|
'category' => 'Category',
|
|
'type' => 'Type',
|
|
'status' => 'Status',
|
|
'created_by' => 'Created By',
|
|
'assigned_to' => 'Assigned To',
|
|
'created_at' => 'Created',
|
|
'updated_at' => 'Updated'
|
|
];
|
|
|
|
foreach($columns as $col => $label) {
|
|
$newDir = ($currentSort === $col && $currentDir === 'asc') ? 'desc' : 'asc';
|
|
$sortClass = ($currentSort === $col) ? "sort-$currentDir" : '';
|
|
$sortParams = array_merge($_GET, ['sort' => $col, 'dir' => $newDir]);
|
|
$sortUrl = '?' . http_build_query($sortParams);
|
|
|
|
echo "<th class='$sortClass' onclick='window.location.href=\"$sortUrl\"'>$label</th>";
|
|
}
|
|
?>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
if (count($tickets) > 0) {
|
|
foreach($tickets as $row) {
|
|
$creator = $row['creator_display_name'] ?? $row['creator_username'] ?? 'System';
|
|
$assignedTo = $row['assigned_display_name'] ?? $row['assigned_username'] ?? 'Unassigned';
|
|
echo "<tr class='priority-{$row['priority']}'>";
|
|
|
|
// 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><a href='/ticket/{$row['ticket_id']}' class='ticket-link'>{$row['ticket_id']}</a></td>";
|
|
echo "<td><span>{$row['priority']}</span></td>";
|
|
echo "<td>" . htmlspecialchars($row['title']) . "</td>";
|
|
echo "<td>{$row['category']}</td>";
|
|
echo "<td>{$row['type']}</td>";
|
|
echo "<td><span class='status-" . str_replace(' ', '-', $row['status']) . "'>{$row['status']}</span></td>";
|
|
echo "<td>" . htmlspecialchars($creator) . "</td>";
|
|
echo "<td>" . htmlspecialchars($assignedTo) . "</td>";
|
|
echo "<td>" . date('Y-m-d H:i', strtotime($row['created_at'])) . "</td>";
|
|
echo "<td>" . date('Y-m-d H:i', strtotime($row['updated_at'])) . "</td>";
|
|
echo "</tr>";
|
|
}
|
|
} else {
|
|
$colspan = ($GLOBALS['currentUser']['is_admin'] ?? false) ? '11' : '10';
|
|
echo "<tr><td colspan='$colspan' style='text-align: center; padding: 3rem;'>";
|
|
echo "<pre style='color: var(--terminal-green); text-shadow: var(--glow-green); font-size: 0.8rem; line-height: 1.2;'>";
|
|
echo "╔════════════════════════════════════════╗\n";
|
|
echo "║ ║\n";
|
|
echo "║ NO TICKETS FOUND ║\n";
|
|
echo "║ ║\n";
|
|
echo "║ [ ] Empty queue - all clear! ║\n";
|
|
echo "║ ║\n";
|
|
echo "╚════════════════════════════════════════╝";
|
|
echo "</pre>";
|
|
echo "</td></tr>";
|
|
}
|
|
?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END OUTER FRAME -->
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="settings-modal" id="settingsModal" style="display: none;" onclick="closeOnBackdropClick(event)">
|
|
<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 + K</kbd> <span>Focus search</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>Alt + S</kbd> <span>Open settings</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>ESC</kbd> <span>Close modal</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>?</kbd> <span>Show shortcuts</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>
|
|
</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>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/keyboard-shortcuts.js"></script>
|
|
</body>
|
|
</html>
|