Jared Vititoe
0f25c49d5c
## Issue 1: User-Header Consolidation (COMPLETED) - Added centralized user-header CSS to dashboard.css - Removed 156 lines of duplicate inline styles from 3 PHP files - Updated to use proper terminal aesthetic colors: * Background: var(--bg-secondary) instead of #2c3e50 * Text: var(--terminal-green) with glow effects * App title: var(--terminal-amber) with amber glow * Admin badge: Transparent with priority-1 border and [brackets] - Removed border-radius from admin badge (terminal aesthetic) - Added hover effects with color changes and glow ## Issue 2: Status Badge Text Wrapping (FIXED) - Fixed "In Progress" status badge wrapping to new line - Updated dashboard.css .status-In-Progress: * Increased min-width from 100px to 140px * Added white-space: nowrap * Added display: inline-block - Updated ticket.css .status-In-Progress with same fixes - Badge now displays `[ In Progress ]` on single line ## Issue 3: Border-Radius Cleanup (100% TERMINAL AESTHETIC) - Removed ALL rounded corners across entire application - Changed 14 instances in dashboard.css to border-radius: 0 - Changed 9 instances in ticket.css to border-radius: 0 - Includes avatar/profile images (now square boxes) - Complete terminal aesthetic compliance: sharp rectangular edges ## Code Quality Improvements - Net reduction: 69 lines of code (191 removed, 122 added) - Single source of truth for user-header styling - All colors use CSS variables for consistency - Zero duplicate CSS remaining - Easier maintenance going forward ## Visual Changes - User header: Terminal green with amber accents - Admin badge: Red border with [brackets], no rounded corners - Back link: Green with amber hover + glow effects - Status badges: Single line display, no wrapping - All UI elements: Sharp rectangular corners (0px radius) ## Files Modified - assets/css/dashboard.css: +102 lines (user-header CSS, status fix, border-radius cleanup) - assets/css/ticket.css: +3 lines (status fix, border-radius cleanup) - views/DashboardView.php: -53 lines (removed inline styles) - views/TicketView.php: -57 lines (removed inline styles) - views/CreateTicketView.php: -57 lines (removed inline styles) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
254 lines
13 KiB
PHP
254 lines
13 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/dashboard.js"></script>
|
|
</head>
|
|
<body data-categories='<?php echo json_encode($categories); ?>' data-types='<?php echo json_encode($types); ?>'>
|
|
<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; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ASCII Banner Container -->
|
|
<div id="ascii-banner-container" style="margin: 2rem auto; text-align: center; max-width: 1200px;"></div>
|
|
<script>
|
|
// Render ASCII banner on page load with typewriter effect
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
renderResponsiveBanner('#ascii-banner-container', 3);
|
|
});
|
|
</script>
|
|
|
|
<!-- OUTER FRAME: Dashboard Container -->
|
|
<div class="ascii-frame-outer">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<!-- SECTION 1: Dashboard Header & Actions -->
|
|
<div class="ascii-section-header">Dashboard Control Center</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="dashboard-header">
|
|
<h1>Ticket Dashboard</h1>
|
|
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">New Ticket</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 2: Search & Filter -->
|
|
<div class="ascii-section-header">Search & Filter</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<form method="GET" action="" class="search-form">
|
|
<!-- 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['show_all'])): ?>
|
|
<input type="hidden" name="show_all" value="<?php echo htmlspecialchars($_GET['show_all']); ?>">
|
|
<?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="search-btn">Search</button>
|
|
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
|
<a href="?" class="clear-search-btn">Clear</a>
|
|
<?php endif; ?>
|
|
</form>
|
|
<?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; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 3: Table Controls -->
|
|
<div class="ascii-section-header">Table Controls</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="table-controls">
|
|
<div class="ticket-count">
|
|
Total Tickets: <?php echo $totalTickets; ?>
|
|
</div>
|
|
<div class="table-actions">
|
|
<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 class="settings-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
|
|
<!-- SECTION 4: Bulk Actions (if admin) -->
|
|
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
|
<div class="ascii-section-header">Bulk Operations</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="bulk-actions-toolbar" style="display: none;">
|
|
<div class="bulk-actions-info">
|
|
<span id="selected-count">0</span> tickets selected
|
|
</div>
|
|
<div class="bulk-actions-buttons">
|
|
<button onclick="bulkClose()" class="btn btn-bulk">Close Selected</button>
|
|
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign Selected</button>
|
|
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Change Priority</button>
|
|
<button onclick="clearSelection()" class="btn btn-secondary">Clear Selection</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIVIDER -->
|
|
<div class="ascii-divider"></div>
|
|
<?php endif; ?>
|
|
|
|
<!-- SECTION 5: Ticket Table -->
|
|
<div class="ascii-section-header">Ticket List</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<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'>No tickets found</td></tr>";
|
|
}
|
|
?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END OUTER FRAME -->
|
|
</body>
|
|
</html>
|