Hugging Face's logo

Spaces:
Dilip8756
/
master-brain-api
Sleeping

App Files Community
master-brain-api
File size: 9,217 Bytes
58c1398
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
/**
 * Admin Panel - Support Tickets Logic (Premium Refactor)
 */

let allTickets = [];
let filteredTickets = [];
let activeTicketId = null;

async function updateTicketBadges() {
    try {
        const res = await fetch('/api/admin/tickets');
        const tickets = await res.json();
        const openCount = tickets.filter(t => t.status === 'open').length;
        
        const badge = document.getElementById('open-tkt-badge');
        const navBadge = document.getElementById('open-ticket-count');
        
        if (badge) {
            badge.innerText = `${openCount} Open`;
            badge.style.display = 'inline-block';
        }
        if (navBadge) {
            navBadge.innerText = openCount;
            navBadge.style.display = openCount > 0 ? 'inline-block' : 'none';
        }
    } catch (e) {}
}

async function loadTickets() {
    const container = document.getElementById('ticket-items');
    if (!container) return;
    
    container.innerHTML = `
        <div class="loading-state" style="padding:40px;">
            <i class="fa-solid fa-spinner fa-spin"></i>
            <span>Loading Tickets...</span>
        </div>`;
    
    try {
        const res = await fetch('/api/admin/tickets');
        allTickets = await res.json();
        applyTicketSearch(); // This will render the list
        updateTicketBadges();
    } catch (err) {
        container.innerHTML = '<div class="error-state">Error loading tickets.</div>';
    }
}

function applyTicketSearch() {
    const searchInput = document.getElementById('tkt-search');
    const searchTerm = searchInput ? searchInput.value.toLowerCase().trim() : '';
    
    filteredTickets = allTickets.filter(t => {
        const searchable = `${t.ticket_number} ${t.user_name} ${t.subject} ${t.status}`.toLowerCase();
        return searchable.includes(searchTerm);
    });

    renderTicketList(filteredTickets);
}

function filterTkts(status, btn) {
    // UI Update for Filter Buttons
    document.querySelectorAll('.s-filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    
    // Filtering Logic
    if (status === 'all') {
        filteredTickets = allTickets;
    } else {
        filteredTickets = allTickets.filter(t => t.status === status);
    }
    
    renderTicketList(filteredTickets);
}

function renderTicketList(tickets) {
    const container = document.getElementById('ticket-items');
    if(!container) return;

    if (tickets.length === 0) {
        container.innerHTML = `
            <div class="empty-state" style="padding:40px; opacity:0.6;">
                <i class="fa-solid fa-inbox fa-2x"></i>
                <p>No tickets found</p>
            </div>`;
        return;
    }
    
    container.innerHTML = tickets.map(t => {
        const isActive = activeTicketId === t.id ? 'active' : '';
        const initial = (t.user_name || 'U').charAt(0).toUpperCase();
        const priorityColor = t.priority === 'high' ? '#ef4444' : (t.priority === 'medium' ? '#f59e0b' : '#3b82f6');
        
        return `
            <div class="tkt-card ${isActive}" onclick="selectTicket('${t.id}')">
                <div class="tkt-meta-top">
                    <span class="tkt-id">#${escapeHtml(t.ticket_number)}</span>
                    <span class="tkt-date">${escapeHtml(t.date.split(',')[0])}</span>
                </div>
                <div class="tkt-user">
                    <div class="tkt-avatar" style="background:${priorityColor}">${initial}</div>
                    <div class="tkt-info">
                        <div class="tkt-username">${escapeHtml(t.user_name)}</div>
                        <div class="tkt-subject">${escapeHtml(t.subject)}</div>
                    </div>
                </div>
                <div class="tkt-badges">
                    <span class="status-pill status-${t.status.toLowerCase()}">${t.status.toUpperCase()}</span>
                    <span class="status-pill" style="background:rgba(0,0,0,0.05); color:var(--text-muted); font-size:0.65rem;">${t.category.toUpperCase()}</span>
                </div>
            </div>
        `;
    }).join('');
}

async function selectTicket(id) {
    activeTicketId = id;
    renderTicketList(filteredTickets); // Update active class
    
    const workspace = document.getElementById('ticket-detail-col');
    if(!workspace) return;

    workspace.innerHTML = `
        <div class="workspace-loading" style="height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-muted);">
            <i class="fa-solid fa-spinner fa-spin fa-2x"></i>
        </div>`;
    
    try {
        const res = await fetch(`/api/admin/tickets/${id}`);
        const t = await res.json();
        
        workspace.innerHTML = `
            <!-- Premium Profile Strip -->
            <div class="chat-profile-strip">
                <div class="chat-user-info">
                    <h3>${escapeHtml(t.subject)}</h3>
                    <div class="chat-user-meta">
                        <span><i class="fa-solid fa-user"></i> ${escapeHtml(t.user_name)}</span>
                        <span><i class="fa-solid fa-phone"></i> ${escapeHtml(t.user_phone)}</span>
                        <span><i class="fa-solid fa-hashtag"></i> ${escapeHtml(t.ticket_number)}</span>
                    </div>
                </div>
                <div class="chat-header-actions">
                    <span class="status-pill status-${t.status.toLowerCase()}">${t.status.toUpperCase()}</span>
                </div>
            </div>
            
            <!-- Modern Chat Window -->
            <div class="chat-window" id="chat-window">
                ${t.messages.map(m => `
                    <div class="message-bubble ${m.sender === 'admin' ? 'admin' : 'user'}">
                        <div class="bubble-content">${escapeHtml(m.message)}</div>
                        <div class="bubble-time">${escapeHtml(m.time)}</div>
                    </div>
                `).join('')}
            </div>
            
            <!-- Premium Reply Footer -->
            <div class="chat-footer">
                <div class="reply-container">
                    <textarea class="reply-textarea" id="admin-reply-text" rows="3" placeholder="Type your reply here..."></textarea>
                    <div class="reply-actions-row">
                        <div class="left-actions">
                            <button class="status-btn resolve" onclick="updateStatus('${t.id}', 'resolved')" title="Mark as Resolved">
                                <i class="fa-solid fa-check-circle"></i> Resolve
                            </button>
                            <button class="status-btn pending" onclick="updateStatus('${t.id}', 'pending')" title="Mark as Pending">
                                <i class="fa-solid fa-clock"></i> Wait
                            </button>
                            <button class="status-btn close" onclick="updateStatus('${t.id}', 'closed')" title="Close Ticket">
                                <i class="fa-solid fa-times-circle"></i> Close
                            </button>
                        </div>
                        <button class="send-reply-btn" onclick="sendReply('${t.id}')">
                            <i class="fa-solid fa-paper-plane"></i> Send Reply
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        // Auto-scroll to bottom
        const chat = document.getElementById('chat-window');
        if(chat) chat.scrollTop = chat.scrollHeight;
        
    } catch (err) {
        workspace.innerHTML = '<div class="workspace-error">Failed to load ticket details.</div>';
    }
}

async function sendReply(id) {
    const textInput = document.getElementById('admin-reply-text');
    if(!textInput) return;
    const text = textInput.value.trim();
    if (!text) return;
    
    const sendBtn = document.querySelector('.send-reply-btn');
    if (sendBtn) {
        sendBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Sending...';
        sendBtn.disabled = true;
    }

    try {
        const res = await fetch(`/api/admin/tickets/${id}/reply`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: text })
        });
        
        if (res.ok) {
            selectTicket(id); // Reload chat
        }
    } catch (e) {
        alert('Error sending reply.');
    }
}

async function updateStatus(id, status) {
    try {
        const res = await fetch(`/api/admin/tickets/${id}/status`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ status: status })
        });
        
        if (res.ok) {
            loadTickets(); // Refresh sidebar list
            selectTicket(id); // Refresh workspace view
        }
    } catch (e) {}
}

function escapeHtml(value) {
    return String(value)
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#39;');
}