feat: add admin messaging interface
- Add admin messages API endpoints (/api/v1/admin/messages) - Add admin messages page route (/admin/messages) - Add messages.html template with split-panel conversation view - Add messages.js Alpine component for messaging UI - Add Messages link to admin sidebar under Platform Administration - Add message icon with unread badge to admin header - Update init-alpine.js with headerMessages component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -29,57 +29,121 @@
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<!-- Messages link with badge -->
|
||||
<li class="relative" x-data="headerMessages()">
|
||||
<a href="/admin/messages"
|
||||
class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
|
||||
aria-label="Messages">
|
||||
<span x-html="$icon('chat-bubble-left-right', 'w-5 h-5')"></span>
|
||||
<!-- Unread badge -->
|
||||
<span x-show="unreadCount > 0"
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white transform translate-x-1 -translate-y-1 bg-green-600 border-2 border-white rounded-full dark:border-gray-800"
|
||||
x-text="unreadCount > 9 ? '9+' : unreadCount"></span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Notifications menu -->
|
||||
<li class="relative" x-data="{ notifOpen: false }">
|
||||
<li class="relative" x-data="headerNotifications()">
|
||||
<button class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
|
||||
@click="notifOpen = !notifOpen"
|
||||
@click="toggleDropdown()"
|
||||
@keydown.escape="notifOpen = false"
|
||||
aria-label="Notifications" aria-haspopup="true">
|
||||
<span x-html="$icon('bell', 'w-5 h-5')"></span>
|
||||
<span aria-hidden="true" class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"></span>
|
||||
<!-- Notification badge -->
|
||||
<span x-show="unreadCount > 0"
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
|
||||
x-text="unreadCount > 9 ? '9+' : unreadCount"></span>
|
||||
<span x-show="unreadCount === 0"
|
||||
aria-hidden="true"
|
||||
class="absolute top-0 right-0 inline-block w-2 h-2 transform translate-x-1 -translate-y-1 bg-gray-400 rounded-full dark:border-gray-800"></span>
|
||||
</button>
|
||||
|
||||
<ul x-show="notifOpen"
|
||||
<div x-show="notifOpen"
|
||||
x-cloak
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click.away="notifOpen = false"
|
||||
@keydown.escape="notifOpen = false"
|
||||
class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700">
|
||||
<li class="flex">
|
||||
<a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
|
||||
<span>Messages</span>
|
||||
<span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">13</span>
|
||||
class="absolute right-0 w-80 mt-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-lg dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700 z-50">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b dark:border-gray-600">
|
||||
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Notifications</h3>
|
||||
<template x-if="unreadCount > 0">
|
||||
<button @click="markAllRead()"
|
||||
class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
||||
Mark all read
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Notifications list -->
|
||||
<ul class="max-h-64 overflow-y-auto">
|
||||
<!-- Loading state -->
|
||||
<template x-if="loading">
|
||||
<li class="px-4 py-3 text-center text-sm text-gray-500">
|
||||
<span x-html="$icon('spinner', 'w-4 h-4 inline mr-2')"></span>
|
||||
Loading...
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<!-- Empty state -->
|
||||
<template x-if="!loading && notifications.length === 0">
|
||||
<li class="px-4 py-6 text-center">
|
||||
<span x-html="$icon('bell', 'w-8 h-8 mx-auto mb-2 text-gray-300')"></span>
|
||||
<p class="text-sm text-gray-500">No notifications</p>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<!-- Notification items -->
|
||||
<template x-for="notif in notifications" :key="notif.id">
|
||||
<li class="border-b dark:border-gray-600 last:border-0">
|
||||
<a :href="notif.action_url || '/admin/notifications'"
|
||||
@click="markAsRead(notif.id)"
|
||||
class="flex items-start px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
|
||||
<!-- Priority indicator -->
|
||||
<span class="flex-shrink-0 w-2 h-2 mt-2 mr-3 rounded-full"
|
||||
:class="{
|
||||
'bg-red-500': notif.priority === 'critical',
|
||||
'bg-orange-500': notif.priority === 'high',
|
||||
'bg-blue-500': notif.priority === 'normal',
|
||||
'bg-gray-400': notif.priority === 'low'
|
||||
}"></span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate" x-text="notif.title"></p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2" x-text="notif.message"></p>
|
||||
<p class="text-xs text-gray-400 mt-1" x-text="formatTimeAgo(notif.created_at)"></p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-2 border-t dark:border-gray-600">
|
||||
<a href="/admin/notifications"
|
||||
class="block text-center text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
||||
View all notifications
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
|
||||
<span>Sales</span>
|
||||
<span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
|
||||
<span>Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Profile menu - ✅ FIXED with self-contained Alpine data -->
|
||||
<!-- Profile menu -->
|
||||
<li class="relative" x-data="{ profileOpen: false }">
|
||||
<button class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
|
||||
@click="profileOpen = !profileOpen"
|
||||
@click="profileOpen = !profileOpen"
|
||||
@keydown.escape="profileOpen = false"
|
||||
aria-label="Account"
|
||||
aria-label="Account"
|
||||
aria-haspopup="true">
|
||||
<img class="object-cover w-8 h-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
|
||||
alt="" aria-hidden="true"/>
|
||||
</button>
|
||||
|
||||
<!-- Use x-show instead of x-if for reliability -->
|
||||
<ul x-show="profileOpen"
|
||||
x-cloak
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
@@ -97,13 +161,13 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
|
||||
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="/admin/settings">
|
||||
<span x-html="$icon('cog', 'w-4 h-4 mr-3')"></span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex">
|
||||
<button
|
||||
<button
|
||||
@click="handleLogout()"
|
||||
class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200 text-left">
|
||||
<span x-html="$icon('logout', 'w-4 h-4 mr-3')"></span>
|
||||
@@ -116,8 +180,85 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Logout handler script -->
|
||||
<!-- Header notifications and logout handler script -->
|
||||
<script>
|
||||
// Header notifications component
|
||||
function headerNotifications() {
|
||||
return {
|
||||
notifOpen: false,
|
||||
loading: false,
|
||||
notifications: [],
|
||||
unreadCount: 0,
|
||||
pollInterval: null,
|
||||
|
||||
init() {
|
||||
this.loadNotifications();
|
||||
// Poll for new notifications every 60 seconds
|
||||
this.pollInterval = setInterval(() => this.loadNotifications(), 60000);
|
||||
},
|
||||
|
||||
destroy() {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
}
|
||||
},
|
||||
|
||||
async toggleDropdown() {
|
||||
this.notifOpen = !this.notifOpen;
|
||||
if (this.notifOpen) {
|
||||
await this.loadNotifications();
|
||||
}
|
||||
},
|
||||
|
||||
async loadNotifications() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/notifications/recent?limit=5');
|
||||
this.notifications = response.notifications || [];
|
||||
this.unreadCount = response.unread_count || 0;
|
||||
} catch (error) {
|
||||
console.error('Failed to load notifications:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async markAsRead(notificationId) {
|
||||
try {
|
||||
await apiClient.put(`/admin/notifications/${notificationId}/read`);
|
||||
// Update local state
|
||||
const notif = this.notifications.find(n => n.id === notificationId);
|
||||
if (notif) {
|
||||
this.notifications = this.notifications.filter(n => n.id !== notificationId);
|
||||
this.unreadCount = Math.max(0, this.unreadCount - 1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to mark notification as read:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async markAllRead() {
|
||||
try {
|
||||
await apiClient.put('/admin/notifications/mark-all-read');
|
||||
this.notifications = [];
|
||||
this.unreadCount = 0;
|
||||
} catch (error) {
|
||||
console.error('Failed to mark all as read:', error);
|
||||
}
|
||||
},
|
||||
|
||||
formatTimeAgo(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diff = Math.floor((now - date) / 1000);
|
||||
|
||||
if (diff < 60) return 'Just now';
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Add handleLogout function to Alpine data
|
||||
document.addEventListener('alpine:init', () => {
|
||||
// Extend the data() function to include logout
|
||||
@@ -127,8 +268,8 @@ document.addEventListener('alpine:init', () => {
|
||||
return {
|
||||
...baseData,
|
||||
handleLogout() {
|
||||
console.log('🚪 Logging out...');
|
||||
|
||||
console.log('Logging out...');
|
||||
|
||||
// Call logout API
|
||||
fetch('/api/v1/admin/auth/logout', {
|
||||
method: 'POST',
|
||||
@@ -137,17 +278,14 @@ document.addEventListener('alpine:init', () => {
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
console.log('✅ Logout API called successfully');
|
||||
console.log('Logout API called successfully');
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('âš ï¸ Logout API error (continuing anyway):', error);
|
||||
console.error('Logout API error (continuing anyway):', error);
|
||||
})
|
||||
.finally(() => {
|
||||
// Clear all tokens
|
||||
console.log('🧹 Clearing tokens...');
|
||||
localStorage.clear();
|
||||
|
||||
console.log('🔄 Redirecting to login...');
|
||||
window.location.href = '/admin/login';
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user