Add Activity Timeline feature and database migrations

- Add Activity Timeline tab to ticket view showing chronological history
- Create getTicketTimeline() method in AuditLogModel
- Update TicketController to load timeline data
- Add timeline UI with helper functions for formatting events
- Add comprehensive timeline CSS with dark mode support
- Create migrations 007-010 for upcoming features:
  - 007: Ticket assignment functionality
  - 008: Status workflow transitions
  - 009: Ticket templates
  - 010: Bulk operations tracking

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-01 18:25:19 -05:00
parent 9a12a656aa
commit f9629f60b6
8 changed files with 264 additions and 1 deletions

View File

@@ -441,4 +441,78 @@ input:checked + .slider:before {
.back-btn:hover {
background: var(--border-color);
}
/* Activity Timeline Styles */
.timeline-container {
padding: 1rem;
max-width: 800px;
}
.timeline-event {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
position: relative;
}
.timeline-event:not(:last-child)::before {
content: '';
position: absolute;
left: 12px;
top: 30px;
bottom: -24px;
width: 2px;
background: var(--border-color, #ddd);
}
.timeline-icon {
font-size: 1.5rem;
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-content {
flex: 1;
background: var(--card-bg, #f8f9fa);
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid var(--border-color, #ddd);
}
.timeline-header {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.timeline-action {
color: var(--text-muted, #666);
font-size: 0.9rem;
}
.timeline-date {
margin-left: auto;
color: var(--text-muted, #999);
font-size: 0.85rem;
}
.timeline-details {
font-size: 0.9rem;
color: var(--text-secondary, #555);
padding-top: 0.5rem;
border-top: 1px solid var(--border-color, #eee);
}
body.dark-mode .timeline-content {
--card-bg: #2d3748;
--border-color: #444;
--text-muted: #a0aec0;
--text-secondary: #cbd5e0;
}