Files
tinker_tickets/views/DashboardView.php

318 lines
15 KiB
PHP
Raw Normal View History

<?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">
Implement complete ANSI art terminal redesign Transform entire UI into retro terminal aesthetic with ASCII/ANSI art: Visual Changes: - Add large ASCII art "TINKER TICKETS" banner with typewriter animation - Terminal black background (#0a0a0a) with matrix green text (#00ff41) - ASCII borders throughout using box-drawing characters (┌─┐│└─┘╔═╗║╚╝) - Monospace fonts (Courier New, Consolas, Monaco) everywhere - All rounded corners removed (border-radius: 0) - Text glow effects on important elements - Terminal prompts (>, $) and brackets ([]) on all UI elements Dashboard: - Table with ASCII corner decorations and terminal green borders - Headers with > prefix and amber glow - Priority badges: [P1] [P2] format with colored glows - Status badges: [OPEN] [CLOSED] with borders and glows - Search box with $ SEARCH prompt - All buttons in [ BRACKET ] format Ticket View: - Ticket container with double ASCII borders (╔╗╚╝) - Priority-colored corner characters - UUID display: [UUID: xxx] format - Comments section: ╔═══ COMMENTS ═══╗ header - Activity timeline with ASCII tree (├──, │, └──) - Tabs with [ ] brackets and ▼ active indicator Components: - Modals with ╔═══ TITLE ═══╗ headers and ASCII corners - Hamburger menu with MENU SYSTEM box decoration - Settings modal with terminal styling - All inputs with green borders and amber focus glow - Checkboxes with ✓ characters Technical: - New file: ascii-banner.js with banner artwork and typewriter renderer - Comprehensive responsive design (1024px, 768px, 480px breakpoints) - Mobile: simplified ASCII, hidden decorations, full-width menu - Print styles for clean black/white output - All functionality preserved, purely visual transformation Colors preserved: - Priority: P1=red, P2=orange, P3=blue, P4=green, P5=gray - Status: Open=green, In Progress=yellow, Closed=red - Accents: Terminal green, amber, cyan 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-06 23:22:25 -05:00
<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>
2026-01-01 15:40:32 -05:00
</div>
<div class="user-header-right">
2026-01-01 15:40:32 -05:00
<?php if (isset($GLOBALS['currentUser'])): ?>
<span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
2026-01-01 15:40:32 -05:00
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
<span class="admin-badge">Admin</span>
2026-01-01 15:40:32 -05:00
<?php endif; ?>
<?php endif; ?>
</div>
</div>
<style>
.user-header {
background: var(--header-bg, #2c3e50);
2026-01-01 16:40:04 -05:00
padding: 0.5rem 1rem;
margin-right: 60px; /* Space for theme toggle */
margin-left: 50px; /* Space for hamburger menu */
color: var(--header-text, white);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color, #ddd);
2026-01-01 16:40:04 -05:00
box-sizing: border-box;
}
body.light-mode .user-header {
--header-bg: #f8f9fa;
--header-text: #333;
--border-color: #dee2e6;
}
body.dark-mode .user-header {
--header-bg: #2c3e50;
--header-text: white;
--border-color: #444;
}
.user-header-left, .user-header-right {
display: flex;
align-items: center;
2026-01-01 16:40:04 -05:00
gap: 0.75rem;
flex-shrink: 1;
min-width: 0;
}
.app-title {
font-weight: bold;
2026-01-01 16:40:04 -05:00
font-size: 1rem;
color: var(--header-text);
2026-01-01 16:40:04 -05:00
white-space: nowrap;
}
.user-name {
color: var(--header-text);
2026-01-01 16:40:04 -05:00
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-badge {
background: #e74c3c;
color: white;
2026-01-01 16:40:04 -05:00
padding: 0.2rem 0.4rem;
border-radius: 4px;
2026-01-01 16:40:04 -05:00
font-size: 0.75rem;
white-space: nowrap;
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
.user-header {
padding: 0.5rem 0.75rem;
}
.app-title {
font-size: 0.9rem;
}
.user-name {
font-size: 0.85rem;
}
}
</style>
Implement complete ANSI art terminal redesign Transform entire UI into retro terminal aesthetic with ASCII/ANSI art: Visual Changes: - Add large ASCII art "TINKER TICKETS" banner with typewriter animation - Terminal black background (#0a0a0a) with matrix green text (#00ff41) - ASCII borders throughout using box-drawing characters (┌─┐│└─┘╔═╗║╚╝) - Monospace fonts (Courier New, Consolas, Monaco) everywhere - All rounded corners removed (border-radius: 0) - Text glow effects on important elements - Terminal prompts (>, $) and brackets ([]) on all UI elements Dashboard: - Table with ASCII corner decorations and terminal green borders - Headers with > prefix and amber glow - Priority badges: [P1] [P2] format with colored glows - Status badges: [OPEN] [CLOSED] with borders and glows - Search box with $ SEARCH prompt - All buttons in [ BRACKET ] format Ticket View: - Ticket container with double ASCII borders (╔╗╚╝) - Priority-colored corner characters - UUID display: [UUID: xxx] format - Comments section: ╔═══ COMMENTS ═══╗ header - Activity timeline with ASCII tree (├──, │, └──) - Tabs with [ ] brackets and ▼ active indicator Components: - Modals with ╔═══ TITLE ═══╗ headers and ASCII corners - Hamburger menu with MENU SYSTEM box decoration - Settings modal with terminal styling - All inputs with green borders and amber focus glow - Checkboxes with ✓ characters Technical: - New file: ascii-banner.js with banner artwork and typewriter renderer - Comprehensive responsive design (1024px, 768px, 480px breakpoints) - Mobile: simplified ASCII, hidden decorations, full-width menu - Print styles for clean black/white output - All functionality preserved, purely visual transformation Colors preserved: - Priority: P1=red, P2=orange, P3=blue, P4=green, P5=gray - Status: Open=green, In Progress=yellow, Closed=red - Accents: Terminal green, amber, cyan 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-06 23:22:25 -05:00
<!-- 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>
feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-07 10:34:56 -05:00
<!-- 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>
feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-07 10:34:56 -05:00
<!-- DIVIDER -->
<div class="ascii-divider"></div>
feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-07 10:34:56 -05:00
<!-- 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>
feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-07 10:34:56 -05:00
<!-- 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>
feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-07 10:34:56 -05:00
<!-- 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>
feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-07 10:34:56 -05:00
<!-- 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>
feat: Implement dramatic ANSI art terminal redesign - Phase 1-3 This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘). ## Phase 1: CSS Foundation - Added comprehensive nested ASCII frame system to dashboard.css - Created .ascii-frame-outer class with heavy double borders (╔╗╚╝) - Created .ascii-frame-inner class with single borders (┌┐) - Added .ascii-section-header with ╠═══ decoration - Added .ascii-subsection-header with ├─── decoration - Added .ascii-divider with ╞═══╡ connectors - Added .ascii-content wrapper class - Implemented priority-based color variants (P1-P5) for all frames ## Phase 2: Dashboard Restructuring - Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer) - Created 5 major vertical sections with elaborate headers: * Dashboard Control Center (header + new ticket button) * Search & Filter (search form + results) * Table Controls (count + pagination + settings) * Bulk Operations (admin-only, conditional) * Ticket List (main table) - Added ASCII dividers (╞═══╡) between all sections - Nested each section in ascii-content > ascii-frame-inner - Added ╚╝ bottom corner characters as separate elements - Maintained all existing functionality (search, sort, filter, bulk ops) ## Phase 3: Ticket View Restructuring - Wrapped ticket-container in nested ASCII frames - Created 3 major vertical sections: * Ticket Information (header + metadata) * Content Sections (tab navigation) * Content Display (tab content area) - Added subsection headers (├───) for Description, Comments, Activity - Nested comment form and comment list in separate sub-frames - Added ASCII dividers between sections - Updated ticket.css for nested frame compatibility: * Removed border from .comments-section (frame handles it) * Added corner decorations (┌┐) to individual comments * Fixed padding/margin conflicts with nested structure ## Visual Impact - Every major section now has elaborate ASCII box frames - Section headers display as: ╠═══ SECTION NAME ═══╣ - Dividers show as: ╞═══════════════════════════╡ - 3+ levels of nesting creates strong visual hierarchy - Heavy decorations (╔╗╚╝) for outer containers - Light decorations (┌┐└┘) for inner sections - All priority colors preserved and applied to frames ## Technical Details - 229 lines added to dashboard.css (frame system) - DashboardView.php: Complete HTML restructuring (lines 104-316) - TicketView.php: Complete HTML restructuring (lines 148-334) - ticket.css: Added 34 lines of compatibility rules - All existing JavaScript event handlers preserved - All PHP backend logic unchanged - Zero breaking changes to functionality ## Files Modified - assets/css/dashboard.css: +229 lines (frame system + priority variants) - assets/css/ticket.css: +34 lines (compatibility rules) - views/DashboardView.php: Restructured with nested frames - views/TicketView.php: Restructured with nested frames ## Next Steps - Phase 4: Restructure CreateTicketView.php - Phase 5: Update hamburger menu & modals JavaScript - Phase 6: Add responsive design breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-07 10:34:56 -05:00
</table>
</div>
</div>
</div>
<!-- END OUTER FRAME -->
</body>
</html>