## Tablet Breakpoint (1024px)
- Simplify ASCII corners from heavy double (╔╗╚╝) to light single (┌┐└┘)
- Reduce corner font size from 1.5rem to 1.2rem
- Simplify section headers from ╠═══ to ├─
- Simplify dividers from ╞═══╡ to ├─┤
- Maintain visual hierarchy while reducing complexity
## Mobile Breakpoint (768px)
- Remove ALL ASCII corner decorations (::before, ::after, corner spans)
- Remove inner frame corner decorations
- Simplify section headers to simple "> " prefix
- Simplify subsection headers to "• " bullet point
- Remove all ASCII dividers completely
- Reduce padding: ascii-content to 0.5rem, ascii-frame-inner to 0.5rem
- Reduce border width to 1px on inner frames
- Font size reduction for section headers: 0.9rem
- Maintain functionality while maximizing screen space
## Very Small Mobile Breakpoint (480px)
- Remove ALL pseudo-element decorations globally
- Collapse nested frames to minimal borders (1px)
- Minimal padding everywhere (0.25rem)
- Section headers without decorations, normal text transform
- Simplified font sizes (0.85rem for headers)
- Re-enable only essential pseudo-elements (search prompt)
- Maximum compatibility for small screens
## Progressive Enhancement Strategy
- Desktop: Full elaborate ASCII decorations with heavy borders
- Tablet: Simplified single-line ASCII decorations
- Mobile: Minimal decorations, focus on content
- Very Small: No decorations, pure functionality
## Design Philosophy
- Maintain terminal aesthetic at all sizes
- Progressive simplification as screen shrinks
- Never sacrifice functionality for decoration
- Ensure readability on all devices
- Optimize for touch targets on mobile
## Files Modified
- assets/css/dashboard.css: Added ~140 lines of responsive rules
* Enhanced existing 1024px breakpoint with ASCII frame rules
* Enhanced existing 768px breakpoint with complete mobile simplification
* Enhanced existing 480px breakpoint with minimal frame collapsing
## Testing Checklist
- [ ] Desktop (1920x1080): Full decorations visible
- [ ] Tablet (1024x768): Simplified single-line decorations
- [ ] Mobile (768x1024): No corners, simple headers
- [ ] Small Mobile (480x800): Minimal UI, maximum content
- [ ] Touch targets adequate on all mobile sizes
- [ ] All functionality preserved across breakpoints
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
## Hamburger Menu Updates
- Ticket page menu: Added ascii-subsection-header and ascii-frame-inner wrapper
- Dashboard menu: Added ascii-subsection-header and dashboard-filters wrapper
- Maintains all inline editing functionality for ticket fields
- Preserves all filter checkbox functionality for dashboard
## Settings Modal Enhancement
- Wrapped in ascii-frame-outer with ╚╝ bottom corners
- Added ascii-section-header for title
- Nested content in ascii-content → ascii-frame-inner
- Added ascii-divider before footer
- Moved close button to footer for better layout
## Bulk Operations Modals
- Bulk Assign Modal: Full ASCII frame structure with nested sections
- Bulk Priority Modal: Full ASCII frame structure with nested sections
- Both modals now have:
* ascii-frame-outer with corner decorations
* ascii-section-header for title
* ascii-content and ascii-frame-inner for body
* ascii-divider before footer
* Consistent visual hierarchy with rest of app
## Code Quality
- All event handlers and functionality preserved
- No breaking changes to JavaScript logic
- Consistent frame structure across all dynamically generated UI
- All modals and menus now match the nested frame aesthetic
## Files Modified
- assets/js/dashboard.js: Updated 5 HTML generation functions
* createHamburgerMenu() - ticket page version
* createHamburgerMenu() - dashboard version
* createSettingsModal()
* showBulkAssignModal()
* showBulkPriorityModal()
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
## Light Mode Removal & Optimization
- Removed theme toggle functionality from dashboard.js
- Forced dark mode only (terminal aesthetic)
- Cleaned up .theme-toggle CSS class and styles
- Removed body.light-mode CSS rules from all view files
- Simplified user-header styles to use static dark colors
- Removed CSS custom properties (--header-bg, --header-text, --border-color)
- Removed margin-right for theme toggle button (no longer needed)
## CreateTicketView Complete Restructuring
- Added user header with back link and user info
- Restructured into 6 vertical nested ASCII sections:
1. Form Header - Create New Ticket introduction
2. Template Selection - Optional template dropdown
3. Basic Information - Title input field
4. Ticket Metadata - Status, Priority, Category, Type (4-column)
5. Detailed Description - Main textarea
6. Form Actions - Create/Cancel buttons
- Each section wrapped in ascii-section-header → ascii-content → ascii-frame-inner
- Added ASCII dividers between all sections
- Added ╚╝ bottom corner characters to outer frame
- Improved error message styling with priority-1 color
- Added helpful placeholder text and hints
## Files Modified
- assets/css/dashboard.css: Removed theme toggle CSS (~19 lines)
- assets/js/dashboard.js: Removed initThemeToggle() and forced dark mode
- views/DashboardView.php: Simplified user-header CSS (removed light mode)
- views/TicketView.php: Simplified user-header CSS (removed light mode)
- views/CreateTicketView.php: Complete restructuring (98→242 lines)
## Code Quality
- Maintained all existing functionality and event handlers
- Kept all class names for JavaScript compatibility
- Consistent nested frame structure across all pages
- Zero breaking changes to backend or business logic
- Optimized by removing ~660 unused lines total
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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>
- Changed bulk-actions-toolbar dark mode background from #1a1a00 to #2d3748
- Fixed timeline-content light mode background from #1a202c to #f8f9fa
- Added activity-tab to showTab() function to properly hide/show all tabs
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed all reported issues:
1. **Dark Mode Improvements:**
- Fixed bulk-actions-info white on white text (now yellow on dark background)
- Fixed timeline-content boxes with explicit dark mode colors
- All text now properly visible in dark mode
2. **Dashboard Enhancement:**
- Added "Assigned To" column showing ticket assignments
- Updated TicketModel query to include assigned user information
- Shows "Unassigned" when no user assigned
3. **Removed Ticket View Tracking:**
- Removed logTicketView call from TicketController
- Created migration 011 to delete all view records from audit_log
- Viewing tickets no longer clutters activity timeline
4. **Removed Duplicate Status Dropdown:**
- Removed status field from hamburger menu
- Status can now only be changed via the workflow-validated dropdown in ticket header
- Prevents confusion and ensures all status changes follow workflow rules
All changes improve usability and reduce clutter.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed multiple critical issues reported by user:
1. **API Configuration Errors:**
- Fixed all API files to use correct config path (config/config.php instead of config/db.php)
- Fixed: get_users.php (bulk assign dropdown now loads users)
- Fixed: get_template.php (templates now load correctly)
- Fixed: bulk_operation.php (bulk operations now work)
- Fixed: assign_ticket.php (manual assignment now works)
2. **Dark Mode Improvements:**
- Added dark mode support for Activity tab content
- Ensured proper text and background colors in dark mode
All APIs now properly:
- Load configuration from config/config.php
- Use correct session variables ($_SESSION['user']['user_id'])
- Create and close database connections properly
- Return proper JSON responses
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add comprehensive bulk operations system for admins:
- Created BulkOperationsModel.php with operation tracking and processing
- Added bulk_operation.php API endpoint for bulk operations
- Created get_users.php API endpoint for user dropdown in bulk assign
- Updated DashboardView.php with checkboxes and bulk actions toolbar
- Added JavaScript functions for:
- Select all/clear selection
- Bulk close tickets
- Bulk assign tickets
- Bulk change priority
- Added comprehensive CSS for bulk actions toolbar and modals
- All bulk operations are admin-only (enforced server-side)
- Operations tracked in bulk_operations table with audit logging
- Supports bulk_close, bulk_assign, and bulk_priority operations
Admins can now select multiple tickets and perform batch operations, significantly improving workflow efficiency.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add ticket template system for quick ticket creation:
- Created TemplateModel.php with full CRUD operations for templates
- Added get_template.php API endpoint to fetch template data
- Updated TicketController to load templates in create() method
- Modified CreateTicketView.php to include template selector dropdown
- Added loadTemplate() JavaScript function to populate form fields
- Templates include: title, description, category, type, and default priority
- Database already seeded with default templates (Hardware Failure, Software Installation, Network Issue, Maintenance Request)
Users can now select from predefined templates when creating tickets, speeding up common ticket creation workflows.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add comprehensive workflow management system for ticket status transitions:
- Created WorkflowModel.php for managing status transition rules
- Updated TicketController.php to load allowed transitions for each ticket
- Modified TicketView.php to display dynamic status dropdown with only allowed transitions
- Enhanced api/update_ticket.php with server-side workflow validation
- Added updateTicketStatus() JavaScript function for client-side status changes
- Included CSS styling for status select dropdown with color-coded states
- Transitions can require comments or admin privileges
- Status changes are validated against status_transitions table
This feature enforces proper ticket workflows and prevents invalid status changes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add assigned_to column support in TicketModel with assignTicket() and unassignTicket() methods
- Create assign_ticket.php API endpoint for assignment operations
- Update TicketController to load user list from UserModel
- Add assignment dropdown UI in TicketView
- Add JavaScript handler for assignment changes
- Integrate with audit log for assignment tracking
Users can now assign tickets to team members via dropdown selector.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
