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:
358
app/templates/admin/messages.html
Normal file
358
app/templates/admin/messages.html
Normal file
@@ -0,0 +1,358 @@
|
||||
{# app/templates/admin/messages.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/headers.html' import page_header %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
|
||||
{% block title %}Messages{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminMessages({{ conversation_id or 'null' }}){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ page_header('Messages', buttons=[
|
||||
{'text': 'New Conversation', 'icon': 'plus', 'click': 'showComposeModal = true', 'primary': True}
|
||||
]) }}
|
||||
|
||||
{{ loading_state('Loading conversations...') }}
|
||||
|
||||
{{ error_state('Error loading conversations') }}
|
||||
|
||||
<!-- Main Messages Layout -->
|
||||
<div x-show="!loading" class="flex gap-6 h-[calc(100vh-220px)]">
|
||||
<!-- Conversations List (Left Panel) -->
|
||||
<div class="w-96 flex-shrink-0 flex flex-col bg-white rounded-lg shadow-md dark:bg-gray-800 overflow-hidden">
|
||||
<!-- Filters -->
|
||||
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex gap-2">
|
||||
<select
|
||||
x-model="filters.conversation_type"
|
||||
@change="page = 1; loadConversations()"
|
||||
class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value="admin_vendor">Vendors</option>
|
||||
<option value="admin_customer">Customers</option>
|
||||
</select>
|
||||
<select
|
||||
x-model="filters.is_closed"
|
||||
@change="page = 1; loadConversations()"
|
||||
class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="false">Open</option>
|
||||
<option value="true">Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation List -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<template x-if="loadingConversations && conversations.length === 0">
|
||||
<div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2 animate-spin')"></span>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="!loadingConversations && conversations.length === 0">
|
||||
<div class="px-4 py-12 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('chat-bubble-left-right', 'w-12 h-12 mx-auto mb-3 text-gray-300')"></span>
|
||||
<p class="font-medium">No conversations</p>
|
||||
<p class="text-sm mt-1">Start a new conversation</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<template x-for="conv in conversations" :key="conv.id">
|
||||
<li
|
||||
@click="selectConversation(conv.id)"
|
||||
class="px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
:class="{
|
||||
'bg-purple-50 dark:bg-purple-900/20': selectedConversationId === conv.id,
|
||||
'border-l-4 border-purple-500': selectedConversationId === conv.id
|
||||
}"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate" x-text="conv.subject"></span>
|
||||
<span x-show="conv.unread_count > 0"
|
||||
class="px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full dark:bg-red-600 dark:text-white"
|
||||
x-text="conv.unread_count"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded"
|
||||
:class="conv.conversation_type === 'admin_vendor' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'"
|
||||
x-text="conv.conversation_type === 'admin_vendor' ? 'Vendor' : 'Customer'"></span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="conv.other_participant?.name || 'Unknown'"></span>
|
||||
</div>
|
||||
<p x-show="conv.last_message_preview"
|
||||
class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate"
|
||||
x-text="conv.last_message_preview"></p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end ml-2">
|
||||
<span class="text-xs text-gray-400" x-text="formatRelativeTime(conv.last_message_at || conv.created_at)"></span>
|
||||
<span x-show="conv.is_closed"
|
||||
class="mt-1 px-1.5 py-0.5 text-xs bg-gray-100 text-gray-500 rounded dark:bg-gray-700">
|
||||
Closed
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div x-show="totalConversations > limit" class="p-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-gray-500 dark:text-gray-400" x-text="`${skip + 1}-${Math.min(skip + limit, totalConversations)} of ${totalConversations}`"></span>
|
||||
<div class="flex gap-1">
|
||||
<button @click="page--; loadConversations()" :disabled="page <= 1"
|
||||
class="px-2 py-1 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded disabled:opacity-50">
|
||||
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button @click="page++; loadConversations()" :disabled="page * limit >= totalConversations"
|
||||
class="px-2 py-1 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded disabled:opacity-50">
|
||||
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation Detail (Right Panel) -->
|
||||
<div class="flex-1 flex flex-col bg-white rounded-lg shadow-md dark:bg-gray-800 overflow-hidden">
|
||||
<!-- No conversation selected -->
|
||||
<template x-if="!selectedConversationId">
|
||||
<div class="flex-1 flex items-center justify-center text-gray-500 dark:text-gray-400">
|
||||
<div class="text-center">
|
||||
<span x-html="$icon('chat-bubble-left-right', 'w-16 h-16 mx-auto mb-4 text-gray-300')"></span>
|
||||
<p class="font-medium">Select a conversation</p>
|
||||
<p class="text-sm mt-1">Or start a new one</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Conversation loaded -->
|
||||
<template x-if="selectedConversationId && selectedConversation">
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100" x-text="selectedConversation.subject"></h3>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">
|
||||
with <span class="font-medium" x-text="getOtherParticipantName()"></span>
|
||||
</span>
|
||||
<span x-show="selectedConversation.vendor_name"
|
||||
class="text-xs text-gray-400">
|
||||
(<span x-text="selectedConversation.vendor_name"></span>)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<template x-if="!selectedConversation.is_closed">
|
||||
<button @click="closeConversation()"
|
||||
class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
|
||||
Close
|
||||
</button>
|
||||
</template>
|
||||
<template x-if="selectedConversation.is_closed">
|
||||
<button @click="reopenConversation()"
|
||||
class="px-3 py-1.5 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-300">
|
||||
Reopen
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<div class="flex-1 overflow-y-auto p-4 space-y-4" x-ref="messagesContainer">
|
||||
<template x-if="loadingMessages">
|
||||
<div class="flex items-center justify-center py-8">
|
||||
<span x-html="$icon('spinner', 'w-6 h-6 animate-spin text-purple-500')"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-for="msg in selectedConversation.messages" :key="msg.id">
|
||||
<div class="flex"
|
||||
:class="msg.sender_type === 'admin' ? 'justify-end' : 'justify-start'">
|
||||
<!-- System message -->
|
||||
<template x-if="msg.is_system_message">
|
||||
<div class="text-center w-full py-2">
|
||||
<span class="px-3 py-1 text-xs text-gray-500 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-400"
|
||||
x-text="msg.content"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Regular message -->
|
||||
<template x-if="!msg.is_system_message">
|
||||
<div class="max-w-[70%]">
|
||||
<div class="rounded-lg px-4 py-2"
|
||||
:class="msg.sender_type === 'admin'
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100'">
|
||||
<p class="text-sm whitespace-pre-wrap" x-text="msg.content"></p>
|
||||
|
||||
<!-- Attachments -->
|
||||
<template x-if="msg.attachments && msg.attachments.length > 0">
|
||||
<div class="mt-2 space-y-1">
|
||||
<template x-for="att in msg.attachments" :key="att.id">
|
||||
<a :href="att.download_url"
|
||||
target="_blank"
|
||||
class="flex items-center gap-2 text-xs underline"
|
||||
:class="msg.sender_type === 'admin' ? 'text-purple-200 hover:text-white' : 'text-purple-600 hover:text-purple-800 dark:text-purple-400'">
|
||||
<span x-html="att.is_image ? $icon('photo', 'w-4 h-4') : $icon('paper-clip', 'w-4 h-4')"></span>
|
||||
<span x-text="att.original_filename"></span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-1 px-1"
|
||||
:class="msg.sender_type === 'admin' ? 'justify-end' : 'justify-start'">
|
||||
<span class="text-xs text-gray-400" x-text="msg.sender_name || 'Unknown'"></span>
|
||||
<span class="text-xs text-gray-400" x-text="formatTime(msg.created_at)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Reply Form -->
|
||||
<template x-if="!selectedConversation.is_closed">
|
||||
<div class="border-t border-gray-200 dark:border-gray-700 p-4">
|
||||
<form @submit.prevent="sendMessage()" class="flex gap-3">
|
||||
<div class="flex-1">
|
||||
<textarea
|
||||
x-model="replyContent"
|
||||
@keydown.enter.meta="sendMessage()"
|
||||
@keydown.enter.ctrl="sendMessage()"
|
||||
rows="2"
|
||||
placeholder="Type your message... (Cmd/Ctrl+Enter to send)"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 resize-none"
|
||||
></textarea>
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<label class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
|
||||
<input type="file" multiple @change="handleFileSelect" class="hidden" x-ref="fileInput">
|
||||
<span x-html="$icon('paper-clip', 'w-5 h-5')"></span>
|
||||
<span>Attach files</span>
|
||||
</label>
|
||||
<template x-if="attachedFiles.length > 0">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-500">
|
||||
<span x-text="attachedFiles.length + ' file(s)'"></span>
|
||||
<button type="button" @click="attachedFiles = []" class="text-red-500 hover:text-red-700">
|
||||
<span x-html="$icon('x-mark', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit"
|
||||
:disabled="!replyContent.trim() && attachedFiles.length === 0 || sendingMessage"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed self-end">
|
||||
<span x-show="!sendingMessage" x-html="$icon('paper-airplane', 'w-5 h-5')"></span>
|
||||
<span x-show="sendingMessage" x-html="$icon('spinner', 'w-5 h-5 animate-spin')"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Closed message -->
|
||||
<template x-if="selectedConversation.is_closed">
|
||||
<div class="border-t border-gray-200 dark:border-gray-700 p-4 text-center text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm">This conversation is closed. Reopen it to send messages.</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compose Modal -->
|
||||
<div x-show="showComposeModal"
|
||||
x-cloak
|
||||
class="fixed inset-0 z-50 flex items-center justify-center"
|
||||
@keydown.escape.window="showComposeModal = false">
|
||||
<div class="absolute inset-0 bg-black bg-opacity-50" @click="showComposeModal = false"></div>
|
||||
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg mx-4">
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Conversation</h3>
|
||||
<button @click="showComposeModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<span x-html="$icon('x-mark', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="createConversation()" class="p-6 space-y-4">
|
||||
<!-- Recipient Type -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Send to</label>
|
||||
<select
|
||||
x-model="compose.recipientType"
|
||||
@change="compose.recipientId = null; loadRecipients()"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="">Select type...</option>
|
||||
<option value="vendor">Vendor</option>
|
||||
<option value="customer">Customer</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Recipient -->
|
||||
<div x-show="compose.recipientType">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Recipient</label>
|
||||
<select
|
||||
x-model="compose.recipientId"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="">Select recipient...</option>
|
||||
<template x-for="r in recipients" :key="r.id">
|
||||
<option :value="r.id" x-text="r.name + (r.vendor_name ? ' (' + r.vendor_name + ')' : '') + ' - ' + (r.email || '')"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Subject -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="compose.subject"
|
||||
placeholder="What is this about?"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
|
||||
<textarea
|
||||
x-model="compose.message"
|
||||
rows="4"
|
||||
placeholder="Type your message..."
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3 pt-4">
|
||||
<button type="button" @click="showComposeModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit"
|
||||
:disabled="!compose.recipientId || !compose.subject.trim() || creatingConversation"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
|
||||
<span x-show="!creatingConversation">Start Conversation</span>
|
||||
<span x-show="creatingConversation">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_scripts %}
|
||||
<script src="{{ url_for('static', path='admin/js/messages.js') }}"></script>
|
||||
{% endblock %}
|
||||
@@ -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';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
{{ menu_item('companies', '/admin/companies', 'office-building', 'Companies') }}
|
||||
{{ menu_item('vendors', '/admin/vendors', 'shopping-bag', 'Vendors') }}
|
||||
{{ menu_item('users', '/admin/users', 'users', 'Users') }}
|
||||
{{ menu_item('messages', '/admin/messages', 'chat-bubble-left-right', 'Messages') }}
|
||||
{% endcall %}
|
||||
|
||||
<!-- Vendor Operations Section -->
|
||||
|
||||
Reference in New Issue
Block a user