Add comprehensive queue management to browser phone shortcode

Features Added:
- Queue display showing all assigned queues for the current user
- Real-time queue statistics (waiting calls, capacity)
- Visual indicators for queues with waiting calls (green border, pulse animation)
- Queue selection with click interaction
- Accept next call from selected queue functionality
- Auto-refresh of queue data every 30 seconds
- Mobile-responsive queue interface

Backend Changes:
- New ajax_get_agent_queues() handler to fetch user's assigned queues
- Enhanced ajax_get_waiting_calls() to return structured data
- Proper permission checking for twp_access_agent_queue capability

Frontend Enhancements:
- Interactive queue list with selection states
- Queue controls panel showing selected queue info
- Refresh button for manual queue updates
- Visual feedback for queues with active calls
- Mobile-optimized layout for smaller screens

UI/UX Improvements:
- Queues with waiting calls highlighted with green accent
- Pulsing indicator for active queues
- Auto-selection of first queue with calls
- Responsive design for mobile devices
- Dark mode support for queue elements

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-08-13 13:58:24 -07:00
parent 9bef599406
commit 12c285dc90
5 changed files with 341 additions and 43 deletions

View File

@@ -293,8 +293,8 @@
font-weight: 500;
}
/* Queue Controls */
.twp-queue-controls {
/* Queue Management Section */
.twp-queue-section {
background: #fff;
padding: 16px;
border-radius: 8px;
@@ -302,18 +302,148 @@
margin-bottom: 20px;
}
.twp-queue-controls h4 {
margin: 0 0 12px 0;
.twp-queue-section h4 {
margin: 0 0 16px 0;
color: #333;
font-size: 1.1rem;
text-align: center;
}
.queue-status {
margin-bottom: 12px;
/* Queue List */
.twp-queue-list {
margin-bottom: 16px;
}
.queue-loading,
.no-queues {
text-align: center;
color: #6c757d;
font-style: italic;
padding: 20px;
}
.no-queues {
background: #f8f9fa;
border: 2px dashed #e9ecef;
border-radius: 8px;
}
.queue-item {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 12px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.queue-item:hover {
border-color: #007cba;
background: #e3f2fd;
}
.queue-item.selected {
border-color: #007cba;
background: #e3f2fd;
box-shadow: 0 0 0 1px #007cba;
}
.queue-item.has-calls {
border-left: 4px solid #28a745;
}
.queue-item.has-calls::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background: #28a745;
border-radius: 50%;
animation: pulse 2s infinite;
}
.queue-name {
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.queue-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: #6c757d;
}
.queue-waiting {
font-weight: 500;
}
.queue-waiting.has-calls {
color: #28a745;
font-weight: 600;
}
.queue-capacity {
font-size: 0.8rem;
}
/* Queue Controls */
.twp-queue-controls {
background: #f8f9fa;
padding: 16px;
border-radius: 8px;
border: 2px solid #e9ecef;
margin-top: 16px;
}
.selected-queue-info {
margin-bottom: 16px;
text-align: center;
}
.selected-queue-info h5 {
margin: 0 0 8px 0;
color: #333;
font-size: 1rem;
}
.queue-stats {
display: flex;
justify-content: center;
gap: 20px;
font-size: 0.9rem;
color: #6c757d;
}
.queue-stats span {
font-weight: 500;
}
.queue-actions {
display: flex;
gap: 8px;
}
.queue-actions .twp-btn {
flex: 1;
}
.twp-btn-secondary {
background: #6c757d;
color: white;
}
.twp-btn-secondary:hover {
background: #5a6268;
transform: translateY(-1px);
}
/* Messages */
.twp-messages {
margin-top: 16px;
@@ -397,6 +527,26 @@
min-height: 45px;
font-size: 16px;
}
/* Queue section mobile adjustments */
.queue-stats {
flex-direction: column;
gap: 8px;
}
.queue-actions {
flex-direction: column;
}
.queue-item {
padding: 10px;
}
.queue-info {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
/* Dark mode support */