georges/MSPE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix icon hover colors, text alignment, and UI improvements

Browse Source
This commit is contained in:
Krikorios
2026-02-25 23:25:59 +02:00
parent 00fda3e045
commit fcc4352afa
46 changed files with 4011 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/messages.html
+63 -20
View File
@@ -357,6 +357,12 @@
<span>Bookings</span>
</a>
</li>
<li class="nav-item">
<a href="/admin/availability.html" class="nav-link">
<i class="fas fa-clock"></i>
<span>Availability</span>
</a>
</li>
</ul>
</div>
@@ -531,27 +537,38 @@
container.innerHTML = messages.map(message => {
const isUnread = (message.status === 'unread');
const isActive = (message.id === selectedMessageId);
const name = `${message.first_name} ${message.last_name}`;
const name = `${message.first_name || ''} ${message.last_name || ''}`.trim();
const timeAgo = getTimeAgo(new Date(message.created_at));
const preview = message.message.length > 60
? message.message.substring(0, 60) + '...'
: message.message;
const rawMessage = String(message.message || '');
const preview = rawMessage.length > 60
? rawMessage.substring(0, 60) + '...'
: rawMessage;
const safeId = MSPE.escapeHtml(message.id || '');
const safeName = MSPE.escapeHtml(name || 'Unknown Sender');
const safeTimeAgo = MSPE.escapeHtml(timeAgo || '');
const safePreview = MSPE.escapeHtml(preview || '');
return `
<div class="message-item ${isUnread ? 'unread' : ''} ${isActive ? 'active' : ''}"
onclick="selectMessage('${message.id}')"
data-id="${message.id}">
data-id="${safeId}">
<div class="message-header">
<span class="message-sender">
${isUnread ? '<span class="unread-dot"></span>' : ''}
${name}
${safeName}
</span>
<span class="message-meta">${timeAgo}</span>
<span class="message-meta">${safeTimeAgo}</span>
</div>
<div class="message-preview">${preview}</div>
<div class="message-preview">${safePreview}</div>
</div>
`;
}).join('');
container.querySelectorAll('.message-item').forEach(item => {
item.addEventListener('click', () => {
const id = item.dataset.id;
if (id) selectMessage(id);
});
});
}
async function selectMessage(id) {
@@ -590,7 +607,7 @@
function renderMessageDetails(message) {
const container = document.getElementById('message-details');
const name = `${message.first_name} ${message.last_name}`;
const name = `${message.first_name || ''} ${message.last_name || ''}`.trim();
const date = new Date(message.created_at);
const formattedDate = date.toLocaleDateString('en-US', {
weekday: 'long',
@@ -608,18 +625,28 @@
'consulting': 'Business Consulting',
'general': 'General Inquiry'
};
const safeName = MSPE.escapeHtml(name || 'Unknown Sender');
const safeDate = MSPE.escapeHtml(formattedDate || '');
const safeEmail = MSPE.escapeHtml(message.email || '');
const safePhone = MSPE.escapeHtml(message.phone || 'Not provided');
const safeCompany = MSPE.escapeHtml(message.company || 'Not provided');
const safeService = MSPE.escapeHtml(serviceLabels[message.service] || message.service || 'Not specified');
const safeBudget = message.budget ? MSPE.escapeHtml(message.budget) : '';
const safeMessageBody = MSPE.escapeHtml(message.message || 'Not provided').replace(/\n/g, '<br>');
const safeId = MSPE.escapeHtml(message.id || '');
container.innerHTML = `
<div class="message-details-header">
<div>
<h3>${name}</h3>
<div class="meta">${formattedDate}</div>
<h3>${safeName}</h3>
<div class="meta">${safeDate}</div>
</div>
<div class="message-actions-header">
<button onclick="replyToMessage('${message.email}')">
<button class="reply-btn" data-email="${safeEmail}">
<i class="fas fa-reply"></i> Reply
</button>
<button class="delete" onclick="deleteMessage('${message.id}')">
<button class="delete delete-btn" data-id="${safeId}">
<i class="fas fa-trash"></i> Delete
</button>
</div>
@@ -629,34 +656,50 @@
<div class="contact-info">
<div class="contact-info-item">
<label>Email</label>
<div class="value"><a href="mailto:${message.email}">${message.email}</a></div>
<div class="value"><a href="mailto:${safeEmail}">${safeEmail}</a></div>
</div>
<div class="contact-info-item">
<label>Phone</label>
<div class="value">${message.phone || 'Not provided'}</div>
<div class="value">${safePhone}</div>
</div>
<div class="contact-info-item">
<label>Company</label>
<div class="value">${message.company || 'Not provided'}</div>
<div class="value">${safeCompany}</div>
</div>
<div class="contact-info-item">
<label>Service Interest</label>
<div class="value">${serviceLabels[message.service] || message.service || 'Not specified'}</div>
<div class="value">${safeService}</div>
</div>
${message.budget ? `
<div class="contact-info-item">
<label>Budget</label>
<div class="value">${message.budget}</div>
<div class="value">${safeBudget}</div>
</div>
` : ''}
</div>
<div class="message-body">
<h4>Message</h4>
<p>${message.message.replace(/\n/g, '<br>')}</p>
<p>${safeMessageBody}</p>
</div>
</div>
`;
const replyBtn = container.querySelector('.reply-btn');
if (replyBtn) {
replyBtn.addEventListener('click', () => {
const email = replyBtn.dataset.email || '';
if (email) replyToMessage(email);
});
}
const deleteBtn = container.querySelector('.delete-btn');
if (deleteBtn) {
deleteBtn.addEventListener('click', () => {
const id = deleteBtn.dataset.id || '';
if (id) deleteMessage(id);
});
}
}
function replyToMessage(email) {