Implemented mailbox in ConsoleUI
This commit is contained in:
@@ -0,0 +1,951 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import {
|
||||
Inbox,
|
||||
Send,
|
||||
FileText,
|
||||
Star,
|
||||
Trash2,
|
||||
Mail,
|
||||
MailOpen,
|
||||
Search,
|
||||
PenSquare,
|
||||
RefreshCw,
|
||||
Reply,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
RotateCcw,
|
||||
X,
|
||||
Smartphone,
|
||||
Filter,
|
||||
} from 'lucide-react';
|
||||
import { useInAppNotifications, DraftMessage } from '../hooks/useInAppNotifications';
|
||||
import { ComposeMessageModal } from '../components/notifications/ComposeMessageModal';
|
||||
import { MarkdownViewer } from '../components/notifications/MarkdownViewer';
|
||||
import { formatDate } from '../lib/formatters';
|
||||
import { Notification, NotificationPlatform, NotificationStatus } from '../types';
|
||||
import { useAuth } from '../auth/AuthProvider';
|
||||
import { stripMarkdown } from '../lib/markdownUtils';
|
||||
|
||||
type MailboxFolder = 'inbox' | 'starred' | 'sent' | 'drafts' | 'trash';
|
||||
type PlatformFilter = 'all' | 'inapp' | 'email';
|
||||
|
||||
export const InboxPage: React.FC = () => {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const targetIdParam = searchParams.get('id');
|
||||
|
||||
const { user, claims } = useAuth();
|
||||
const currentUserEmail = (user?.email || claims?.email || '') as string;
|
||||
|
||||
const {
|
||||
allMailboxNotifications,
|
||||
inboxNotifications,
|
||||
unreadCount,
|
||||
starredNotifications,
|
||||
trashedNotifications,
|
||||
sentNotifications,
|
||||
drafts,
|
||||
starredIds,
|
||||
isLoading,
|
||||
refetch,
|
||||
markAsRead,
|
||||
toggleStar,
|
||||
deleteMessage,
|
||||
restoreMessage,
|
||||
permanentDelete,
|
||||
deleteDraft,
|
||||
sendMessage,
|
||||
isSending,
|
||||
} = useInAppNotifications();
|
||||
|
||||
// Active folder
|
||||
const [activeFolder, setActiveFolder] = useState<MailboxFolder>('inbox');
|
||||
// Platform filter
|
||||
const [platformFilter, setPlatformFilter] = useState<PlatformFilter>('all');
|
||||
// Search query
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
// Filter for unread only in Inbox
|
||||
const [showUnreadOnly, setShowUnreadOnly] = useState(false);
|
||||
// Selected message to view in detail
|
||||
const [selectedMessage, setSelectedMessage] = useState<Notification | null>(null);
|
||||
// Selected draft to edit/resume
|
||||
const [selectedDraft, setSelectedDraft] = useState<DraftMessage | null>(null);
|
||||
|
||||
// Compose modal state
|
||||
const [isComposeOpen, setIsComposeOpen] = useState(false);
|
||||
const [composeInitialRecipient, setComposeInitialRecipient] = useState<any>(undefined);
|
||||
const [composeInitialSubject, setComposeInitialSubject] = useState('');
|
||||
const [composeInitialMessage, setComposeInitialMessage] = useState('');
|
||||
const [composeInitialPlatform, setComposeInitialPlatform] = useState<NotificationPlatform>(NotificationPlatform.InApp);
|
||||
|
||||
// Inline quick reply state
|
||||
const [inlineReplyText, setInlineReplyText] = useState('');
|
||||
const [inlineReplySuccess, setInlineReplySuccess] = useState(false);
|
||||
|
||||
// Active folder message items
|
||||
const folderMessages = useMemo(() => {
|
||||
switch (activeFolder) {
|
||||
case 'inbox':
|
||||
return allMailboxNotifications;
|
||||
case 'starred':
|
||||
return starredNotifications;
|
||||
case 'sent':
|
||||
return sentNotifications;
|
||||
case 'trash':
|
||||
return trashedNotifications;
|
||||
case 'drafts':
|
||||
return [];
|
||||
default:
|
||||
return allMailboxNotifications;
|
||||
}
|
||||
}, [activeFolder, allMailboxNotifications, starredNotifications, sentNotifications, trashedNotifications]);
|
||||
|
||||
// Filtered by search, platform, and unread toggle
|
||||
const filteredMessages = useMemo(() => {
|
||||
return folderMessages.filter(item => {
|
||||
// Platform filter
|
||||
if (platformFilter === 'inapp' && Number(item.platform) !== NotificationPlatform.InApp) {
|
||||
return false;
|
||||
}
|
||||
if (platformFilter === 'email' && Number(item.platform) !== NotificationPlatform.Email) {
|
||||
return false;
|
||||
}
|
||||
// Unread only filter
|
||||
if (activeFolder === 'inbox' && showUnreadOnly) {
|
||||
if (Number(item.status) === NotificationStatus.Read) return false;
|
||||
}
|
||||
// Search term
|
||||
if (!searchTerm.trim()) return true;
|
||||
const term = searchTerm.toLowerCase();
|
||||
const subject = (item.subject || '').toLowerCase();
|
||||
const message = (item.message || '').toLowerCase();
|
||||
const dest = (item.destination || '').toLowerCase();
|
||||
return subject.includes(term) || message.includes(term) || dest.includes(term);
|
||||
});
|
||||
}, [folderMessages, platformFilter, activeFolder, showUnreadOnly, searchTerm]);
|
||||
|
||||
// Filtered drafts for Drafts folder
|
||||
const filteredDrafts = useMemo(() => {
|
||||
if (activeFolder !== 'drafts') return [];
|
||||
if (!searchTerm.trim()) return drafts;
|
||||
const term = searchTerm.toLowerCase();
|
||||
return drafts.filter(
|
||||
d =>
|
||||
d.subject.toLowerCase().includes(term) ||
|
||||
d.message.toLowerCase().includes(term) ||
|
||||
d.recipientEmail.toLowerCase().includes(term)
|
||||
);
|
||||
}, [drafts, activeFolder, searchTerm]);
|
||||
|
||||
// Automatically select message when URL param ?id=... is present
|
||||
useEffect(() => {
|
||||
if (targetIdParam) {
|
||||
const found = folderMessages.find(m => String(m.id) === targetIdParam);
|
||||
if (found) {
|
||||
setSelectedMessage(found);
|
||||
if (Number(found.status) !== NotificationStatus.Read) {
|
||||
markAsRead(found.id);
|
||||
}
|
||||
}
|
||||
} else if (!selectedMessage && folderMessages.length > 0 && activeFolder !== 'drafts') {
|
||||
setSelectedMessage(folderMessages[0]);
|
||||
}
|
||||
}, [targetIdParam, folderMessages, activeFolder]);
|
||||
|
||||
// Handle message selection
|
||||
const handleSelectMessage = (item: Notification) => {
|
||||
setSelectedMessage(item);
|
||||
setSearchParams({ id: String(item.id) });
|
||||
if (Number(item.status) !== NotificationStatus.Read) {
|
||||
markAsRead(item.id);
|
||||
}
|
||||
setInlineReplyText('');
|
||||
setInlineReplySuccess(false);
|
||||
};
|
||||
|
||||
// Open Compose Modal for a new message
|
||||
const handleOpenCompose = (defaultPlatform: NotificationPlatform = NotificationPlatform.InApp) => {
|
||||
setSelectedDraft(null);
|
||||
setComposeInitialRecipient(undefined);
|
||||
setComposeInitialSubject('');
|
||||
setComposeInitialMessage('');
|
||||
setComposeInitialPlatform(defaultPlatform);
|
||||
setIsComposeOpen(true);
|
||||
};
|
||||
|
||||
// Open Compose Modal for a Reply
|
||||
const handleReplyMessage = (msg: Notification) => {
|
||||
const rawDest = msg.destination || '';
|
||||
let replyEmail = '';
|
||||
if (rawDest.includes('From:')) {
|
||||
const fromPart = rawDest.split('From:')[1]?.trim() || '';
|
||||
replyEmail = fromPart.replace(/[<>]/g, '').trim();
|
||||
} else if (rawDest.includes('@')) {
|
||||
replyEmail = rawDest.trim();
|
||||
}
|
||||
|
||||
const replySubject = msg.subject?.startsWith('Re:') ? msg.subject : `Re: ${msg.subject || 'Communication'}`;
|
||||
const quotedBody = `\n\n--- Original Message (${formatDate(msg.createdAt)}) ---\n> ${stripMarkdown(msg.message || '')}`;
|
||||
|
||||
setSelectedDraft(null);
|
||||
setComposeInitialRecipient(
|
||||
replyEmail
|
||||
? {
|
||||
id: String(msg.recipient),
|
||||
email: replyEmail,
|
||||
name: replyEmail.split('@')[0],
|
||||
}
|
||||
: undefined
|
||||
);
|
||||
setComposeInitialSubject(replySubject);
|
||||
setComposeInitialMessage(quotedBody);
|
||||
setComposeInitialPlatform(msg.platform as NotificationPlatform || NotificationPlatform.InApp);
|
||||
setIsComposeOpen(true);
|
||||
};
|
||||
|
||||
// Resume editing a saved draft
|
||||
const handleEditDraft = (draft: DraftMessage) => {
|
||||
setSelectedDraft(draft);
|
||||
setComposeInitialRecipient(
|
||||
draft.recipientId
|
||||
? {
|
||||
id: draft.recipientId,
|
||||
email: draft.recipientEmail,
|
||||
name: draft.recipientName,
|
||||
}
|
||||
: undefined
|
||||
);
|
||||
setComposeInitialSubject(draft.subject);
|
||||
setComposeInitialMessage(draft.message);
|
||||
setComposeInitialPlatform(draft.platform || NotificationPlatform.InApp);
|
||||
setIsComposeOpen(true);
|
||||
};
|
||||
|
||||
// Send inline quick reply
|
||||
const handleSendInlineReply = async () => {
|
||||
if (!selectedMessage || !inlineReplyText.trim()) return;
|
||||
|
||||
const rawDest = selectedMessage.destination || '';
|
||||
let replyEmail = '';
|
||||
if (rawDest.includes('From:')) {
|
||||
replyEmail = rawDest.split('From:')[1]?.trim().replace(/[<>]/g, '') || '';
|
||||
} else if (rawDest.includes('@')) {
|
||||
replyEmail = rawDest.trim();
|
||||
}
|
||||
|
||||
try {
|
||||
await sendMessage({
|
||||
recipientId: String(selectedMessage.recipient),
|
||||
recipientEmail: replyEmail || currentUserEmail || 'team@dsi.gov.za',
|
||||
subject: selectedMessage.subject?.startsWith('Re:')
|
||||
? selectedMessage.subject
|
||||
: `Re: ${selectedMessage.subject || 'Notification'}`,
|
||||
message: inlineReplyText.trim(),
|
||||
platform: selectedMessage.platform as NotificationPlatform || NotificationPlatform.InApp,
|
||||
});
|
||||
|
||||
setInlineReplySuccess(true);
|
||||
setInlineReplyText('');
|
||||
setTimeout(() => {
|
||||
setInlineReplySuccess(false);
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
console.error('Failed to send inline reply:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col h-full bg-[#090d16] text-slate-100 overflow-hidden font-sans">
|
||||
{/* Top Mailbox Breadcrumb & Action Banner */}
|
||||
<div className="h-14 px-6 border-b border-slate-800/80 bg-[#0d121f]/90 backdrop-blur-md flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-blue-400">
|
||||
<Mail className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-sm font-bold text-white tracking-tight">Mailbox & Communications</h1>
|
||||
<span className="text-[10px] font-semibold text-blue-300 bg-blue-500/10 border border-blue-500/30 px-2 py-0.5 rounded-full flex items-center gap-1">
|
||||
Markdown & Branded HTML Engine
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-400">
|
||||
In-App markdown messaging and executive branded email notifications
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => refetch()}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/80 hover:bg-slate-800 border border-slate-700/80 text-xs font-medium text-slate-300 hover:text-white transition cursor-pointer shadow-xs"
|
||||
title="Refresh mailbox messages"
|
||||
>
|
||||
<RefreshCw className={`w-3.5 h-3.5 ${isLoading ? 'animate-spin text-blue-400' : ''}`} />
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleOpenCompose()}
|
||||
id="compose-message-main-btn"
|
||||
className="flex items-center gap-2 px-4 py-1.5 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold shadow-lg shadow-blue-600/30 transition cursor-pointer"
|
||||
>
|
||||
<PenSquare className="w-3.5 h-3.5" />
|
||||
<span>Compose</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Mailbox Three-Pane Layout */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* ======================================================== */}
|
||||
{/* PANE 1: Mailbox Folders Sidebar */}
|
||||
{/* ======================================================== */}
|
||||
<aside className="w-60 shrink-0 border-r border-slate-800/80 bg-[#0b101b]/95 p-3 flex flex-col justify-between">
|
||||
<div className="space-y-4">
|
||||
{/* Primary Compose Action */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleOpenCompose()}
|
||||
className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white text-xs font-bold shadow-lg shadow-blue-600/25 transition cursor-pointer"
|
||||
>
|
||||
<PenSquare className="w-4 h-4" />
|
||||
<span>New Message</span>
|
||||
</button>
|
||||
|
||||
{/* Folder Navigation */}
|
||||
<nav className="space-y-1">
|
||||
{/* Inbox */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActiveFolder('inbox');
|
||||
setSelectedDraft(null);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium transition cursor-pointer ${
|
||||
activeFolder === 'inbox'
|
||||
? 'bg-blue-600/20 text-white border border-blue-500/30'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Inbox className="w-4 h-4 text-blue-400" />
|
||||
<span>Inbox</span>
|
||||
</div>
|
||||
{unreadCount > 0 ? (
|
||||
<span className="text-[10px] font-bold text-white bg-blue-600 px-2 py-0.5 rounded-full shadow-xs">
|
||||
{unreadCount}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[11px] text-slate-400 font-mono">
|
||||
{allMailboxNotifications.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Starred */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActiveFolder('starred');
|
||||
setSelectedDraft(null);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium transition cursor-pointer ${
|
||||
activeFolder === 'starred'
|
||||
? 'bg-amber-500/20 text-white border border-amber-500/30'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Star className="w-4 h-4 text-amber-400" />
|
||||
<span>Starred</span>
|
||||
</div>
|
||||
<span className="text-[11px] text-slate-400 font-mono">
|
||||
{starredNotifications.length}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Sent */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActiveFolder('sent');
|
||||
setSelectedDraft(null);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium transition cursor-pointer ${
|
||||
activeFolder === 'sent'
|
||||
? 'bg-indigo-600/20 text-white border border-indigo-500/30'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Send className="w-4 h-4 text-indigo-400" />
|
||||
<span>Sent</span>
|
||||
</div>
|
||||
<span className="text-[11px] text-slate-400 font-mono">
|
||||
{sentNotifications.length}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Drafts */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActiveFolder('drafts');
|
||||
setSelectedMessage(null);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium transition cursor-pointer ${
|
||||
activeFolder === 'drafts'
|
||||
? 'bg-purple-600/20 text-white border border-purple-500/30'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<FileText className="w-4 h-4 text-purple-400" />
|
||||
<span>Drafts</span>
|
||||
</div>
|
||||
{drafts.length > 0 && (
|
||||
<span className="text-[10px] font-bold text-purple-300 bg-purple-500/20 border border-purple-500/30 px-2 py-0.5 rounded-full">
|
||||
{drafts.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Trash */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setActiveFolder('trash');
|
||||
setSelectedDraft(null);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium transition cursor-pointer ${
|
||||
activeFolder === 'trash'
|
||||
? 'bg-rose-600/20 text-white border border-rose-500/30'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Trash2 className="w-4 h-4 text-rose-400" />
|
||||
<span>Trash</span>
|
||||
</div>
|
||||
<span className="text-[11px] text-slate-400 font-mono">
|
||||
{trashedNotifications.length}
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Platform Filter Buttons */}
|
||||
<div className="pt-3 border-t border-slate-800/80 space-y-2">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 px-2 block">
|
||||
Channel Filter
|
||||
</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter('all')}
|
||||
className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs font-medium transition cursor-pointer ${
|
||||
platformFilter === 'all'
|
||||
? 'bg-slate-800 text-white font-semibold'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-900'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-3.5 h-3.5 text-blue-400" />
|
||||
<span>All Channels</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter('inapp')}
|
||||
className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs font-medium transition cursor-pointer ${
|
||||
platformFilter === 'inapp'
|
||||
? 'bg-blue-600/25 text-blue-200 font-semibold border border-blue-500/30'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-900'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Smartphone className="w-3.5 h-3.5 text-blue-400" />
|
||||
<span>In-App Markdown</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter('email')}
|
||||
className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs font-medium transition cursor-pointer ${
|
||||
platformFilter === 'email'
|
||||
? 'bg-emerald-600/25 text-emerald-200 font-semibold border border-emerald-500/30'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-900'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>Email HTML</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Filter: Unread Toggle */}
|
||||
{activeFolder === 'inbox' && (
|
||||
<div className="pt-2 border-t border-slate-800/80">
|
||||
<label className="flex items-center gap-2 px-2.5 py-1.5 rounded-xl hover:bg-slate-800/50 cursor-pointer text-xs text-slate-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showUnreadOnly}
|
||||
onChange={e => setShowUnreadOnly(e.target.checked)}
|
||||
className="rounded border-slate-700 bg-slate-900 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span>Unread only</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sidebar Footer Branding */}
|
||||
<div className="p-3 rounded-2xl bg-slate-900/40 border border-slate-800/60 space-y-1 text-[11px] text-slate-400">
|
||||
<div className="flex items-center gap-1.5 text-slate-300 font-semibold">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400" />
|
||||
<span>Format Standards</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">
|
||||
InApp messages are stored as Markdown. Email notifications are transformed to branded HTML.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* ======================================================== */}
|
||||
{/* PANE 2: Message List / Summary Cards */}
|
||||
{/* ======================================================== */}
|
||||
<section className="w-80 sm:w-96 shrink-0 border-r border-slate-800/80 bg-[#0d121f]/60 flex flex-col overflow-hidden">
|
||||
{/* Search Box Header */}
|
||||
<div className="p-3 border-b border-slate-800/80 bg-[#0d121f]/90 space-y-2">
|
||||
<div className="relative">
|
||||
<Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={e => setSearchTerm(e.target.value)}
|
||||
placeholder="Search messages by subject, sender, or text..."
|
||||
className="w-full pl-8 pr-7 py-1.5 rounded-xl bg-slate-900 border border-slate-700/80 text-xs text-slate-100 placeholder-slate-400 focus:border-blue-500 focus:outline-none transition shadow-inner"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchTerm('')}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-[11px] text-slate-400 px-1">
|
||||
<span className="capitalize font-semibold text-slate-200">
|
||||
{activeFolder} ({activeFolder === 'drafts' ? filteredDrafts.length : filteredMessages.length})
|
||||
</span>
|
||||
{activeFolder === 'inbox' && unreadCount > 0 && (
|
||||
<span className="text-blue-400 font-medium">{unreadCount} unread</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* List of Messages or Drafts */}
|
||||
<div className="flex-1 overflow-y-auto divide-y divide-slate-800/60">
|
||||
{activeFolder === 'drafts' ? (
|
||||
filteredDrafts.length === 0 ? (
|
||||
<div className="py-16 px-6 text-center text-slate-400">
|
||||
<FileText className="w-8 h-8 mx-auto text-slate-600 mb-2" />
|
||||
<p className="text-xs font-semibold text-slate-300">No Drafts Saved</p>
|
||||
<p className="text-[11px] text-slate-400 mt-1">
|
||||
When you save unfinished messages, they will appear here.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredDrafts.map(d => (
|
||||
<div
|
||||
key={d.id}
|
||||
onClick={() => handleEditDraft(d)}
|
||||
className="p-3.5 hover:bg-slate-800/60 transition cursor-pointer group flex flex-col gap-1.5 relative"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<span className="text-[10px] font-bold text-purple-300 bg-purple-500/15 border border-purple-500/30 px-1.5 py-0.2 rounded">
|
||||
Draft (Markdown)
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 font-mono">
|
||||
{formatDate(d.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h4 className="text-xs font-semibold text-white group-hover:text-purple-300 transition truncate">
|
||||
{d.subject || 'Untitled Draft'}
|
||||
</h4>
|
||||
|
||||
<p className="text-[11px] text-slate-300 line-clamp-2 leading-relaxed">
|
||||
{stripMarkdown(d.message || 'No content written yet.')}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between pt-1">
|
||||
<span className="text-[10px] text-slate-400 truncate">
|
||||
To: {d.recipientEmail || 'No recipient selected'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
deleteDraft(d.id);
|
||||
}}
|
||||
className="text-slate-400 hover:text-rose-400 p-1 rounded transition"
|
||||
title="Delete draft"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)
|
||||
) : filteredMessages.length === 0 ? (
|
||||
<div className="py-16 px-6 text-center text-slate-400">
|
||||
<MailOpen className="w-8 h-8 mx-auto text-slate-600 mb-2" />
|
||||
<p className="text-xs font-semibold text-slate-300">No Messages Found</p>
|
||||
<p className="text-[11px] text-slate-400 mt-1">
|
||||
{searchTerm
|
||||
? `No messages matched "${searchTerm}"`
|
||||
: `No items in ${activeFolder}`}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredMessages.map(item => {
|
||||
const isSelected = selectedMessage?.id === item.id;
|
||||
const isUnread = Number(item.status) !== NotificationStatus.Read;
|
||||
const isStarred = starredIds.includes(String(item.id));
|
||||
const isEmail = Number(item.platform) === NotificationPlatform.Email;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => handleSelectMessage(item)}
|
||||
className={`p-3.5 transition cursor-pointer flex flex-col gap-1 relative ${
|
||||
isSelected
|
||||
? 'bg-blue-600/15 border-l-4 border-l-blue-500 text-white shadow-inner'
|
||||
: 'hover:bg-slate-800/50 border-l-4 border-l-transparent'
|
||||
}`}
|
||||
>
|
||||
{/* Top line: unread dot, platform badge, star, time */}
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
{isUnread && (
|
||||
<span
|
||||
className="w-2 h-2 rounded-full bg-blue-500 shrink-0 shadow-sm shadow-blue-500 animate-pulse"
|
||||
title="Unread notification"
|
||||
/>
|
||||
)}
|
||||
<span className="text-[11px] font-semibold text-slate-300 truncate">
|
||||
{item.destination?.includes('From:')
|
||||
? item.destination.split('From:')[1]?.trim().replace(/[<>]/g, '')
|
||||
: item.destination || 'PFM System'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{isEmail ? (
|
||||
<span className="text-[9px] font-bold text-emerald-300 bg-emerald-500/15 border border-emerald-500/30 px-1.5 py-0.2 rounded font-mono">
|
||||
Email
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[9px] font-bold text-blue-300 bg-blue-500/15 border border-blue-500/30 px-1.5 py-0.2 rounded font-mono">
|
||||
InApp
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
toggleStar(item.id);
|
||||
}}
|
||||
className={`p-0.5 rounded transition ${
|
||||
isStarred ? 'text-amber-400 hover:text-amber-300' : 'text-slate-400 hover:text-slate-300'
|
||||
}`}
|
||||
title={isStarred ? 'Unstar message' : 'Star message'}
|
||||
>
|
||||
<Star className={`w-3.5 h-3.5 ${isStarred ? 'fill-amber-400' : ''}`} />
|
||||
</button>
|
||||
<span className="text-[10px] text-slate-400 font-mono">
|
||||
{formatDate(item.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subject */}
|
||||
<h4
|
||||
className={`text-xs truncate ${
|
||||
isUnread ? 'font-bold text-white' : 'font-medium text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{item.subject || 'Statutory Platform Notice'}
|
||||
</h4>
|
||||
|
||||
{/* Snippet preview stripped of markdown syntax */}
|
||||
<p className="text-[11px] text-slate-400 line-clamp-2 leading-relaxed">
|
||||
{stripMarkdown(item.message || 'No additional details provided.')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ======================================================== */}
|
||||
{/* PANE 3: Full Message Detail & Interactive Actions */}
|
||||
{/* ======================================================== */}
|
||||
<main className="flex-1 bg-[#090d16] flex flex-col overflow-y-auto">
|
||||
{activeFolder === 'drafts' ? (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center text-slate-400">
|
||||
<FileText className="w-12 h-12 text-slate-600 mb-3" />
|
||||
<h3 className="text-sm font-bold text-white">Drafts Folder</h3>
|
||||
<p className="text-xs text-slate-400 max-w-md mt-1 mb-4">
|
||||
Click any draft on the left pane to resume composing in Markdown and dispatch your notification.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleOpenCompose()}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold shadow-lg shadow-blue-600/30 transition cursor-pointer"
|
||||
>
|
||||
<PenSquare className="w-4 h-4" />
|
||||
<span>Create New Message</span>
|
||||
</button>
|
||||
</div>
|
||||
) : !selectedMessage ? (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center text-slate-400">
|
||||
<div className="w-16 h-16 rounded-3xl bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-600 mb-4 shadow-xl">
|
||||
<Mail className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-sm font-bold text-white">No Message Selected</h3>
|
||||
<p className="text-xs text-slate-400 max-w-sm mt-1 mb-4">
|
||||
Select an in-app conversation or email notice from the list to view its rendered markdown and attachments.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleOpenCompose()}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-200 border border-slate-700 text-xs font-semibold transition cursor-pointer"
|
||||
>
|
||||
<PenSquare className="w-3.5 h-3.5 text-blue-400" />
|
||||
<span>Compose New Message</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Message Header Toolbar */}
|
||||
<div className="p-5 border-b border-slate-800/80 bg-[#0d121f]/60 flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReplyMessage(selectedMessage)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold shadow-md shadow-blue-600/20 transition cursor-pointer"
|
||||
title="Reply to message"
|
||||
>
|
||||
<Reply className="w-3.5 h-3.5" />
|
||||
<span>Reply</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleStar(selectedMessage.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl border text-xs font-medium transition cursor-pointer ${
|
||||
starredIds.includes(String(selectedMessage.id))
|
||||
? 'bg-amber-500/15 border-amber-500/30 text-amber-300'
|
||||
: 'bg-slate-900/80 border-slate-700/80 text-slate-300 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Star
|
||||
className={`w-3.5 h-3.5 ${
|
||||
starredIds.includes(String(selectedMessage.id)) ? 'fill-amber-400' : ''
|
||||
}`}
|
||||
/>
|
||||
<span>{starredIds.includes(String(selectedMessage.id)) ? 'Starred' : 'Star'}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{activeFolder === 'trash' ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => restoreMessage(selectedMessage.id)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/80 hover:bg-slate-800 border border-slate-700 text-xs text-slate-200 transition cursor-pointer"
|
||||
title="Restore message to Inbox"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>Restore</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => permanentDelete(selectedMessage.id)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-rose-950/40 hover:bg-rose-900/40 border border-rose-800/60 text-xs text-rose-300 transition cursor-pointer"
|
||||
title="Permanently erase message"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5 text-rose-400" />
|
||||
<span>Delete Forever</span>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
deleteMessage(selectedMessage.id);
|
||||
setSelectedMessage(null);
|
||||
}}
|
||||
className="p-2 rounded-xl text-slate-400 hover:text-rose-400 hover:bg-rose-950/20 border border-transparent hover:border-rose-900/40 transition cursor-pointer"
|
||||
title="Move message to Trash"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message Details & Body */}
|
||||
<div className="p-6 space-y-6 flex-1 overflow-y-auto max-w-4xl">
|
||||
{/* Subject Header */}
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white tracking-tight leading-tight">
|
||||
{selectedMessage.subject || 'In-App Notification'}
|
||||
</h2>
|
||||
<div className="flex flex-wrap items-center gap-2 mt-2">
|
||||
{Number(selectedMessage.platform) === NotificationPlatform.Email ? (
|
||||
<span className="text-[10px] font-semibold text-emerald-300 bg-emerald-500/15 border border-emerald-500/30 px-2 py-0.5 rounded-md flex items-center gap-1">
|
||||
<Mail className="w-3 h-3 text-emerald-400" />
|
||||
Channel: Email (Branded HTML)
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[10px] font-semibold text-blue-300 bg-blue-500/15 border border-blue-500/30 px-2 py-0.5 rounded-md flex items-center gap-1">
|
||||
<Smartphone className="w-3 h-3 text-blue-400" />
|
||||
Channel: InApp (Markdown)
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className="text-[10px] font-mono text-slate-400 bg-slate-900 px-2 py-0.5 rounded-md border border-slate-800">
|
||||
ID: #{selectedMessage.id}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400">
|
||||
Received: {formatDate(selectedMessage.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sender & Recipient Card */}
|
||||
<div className="p-4 rounded-2xl bg-slate-900/60 border border-slate-800 flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center font-bold text-xs text-white shadow-md shadow-blue-500/20 shrink-0">
|
||||
{selectedMessage.destination?.includes('@')
|
||||
? selectedMessage.destination.split('@')[0].slice(0, 2).toUpperCase()
|
||||
: 'PF'}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-xs font-bold text-white">
|
||||
{selectedMessage.destination?.includes('From:')
|
||||
? selectedMessage.destination.split('From:')[1]?.trim().replace(/[<>]/g, '')
|
||||
: selectedMessage.destination || 'PFM Automated Dispatcher'}
|
||||
</p>
|
||||
<span className="text-[10px] text-slate-400 font-mono">
|
||||
({Number(selectedMessage.platform) === NotificationPlatform.Email ? 'SMTP Protocol' : 'InApp Protocol'})
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-400 mt-0.5">
|
||||
To:{' '}
|
||||
<strong className="text-slate-300">
|
||||
{selectedMessage.destination?.includes('To:')
|
||||
? selectedMessage.destination.split('To:')[1]?.split('|')[0]?.trim()
|
||||
: currentUserEmail || 'You'}
|
||||
</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="text-[10px] text-slate-400 font-mono shrink-0 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(selectedMessage.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Fully-Rendered Markdown & HTML Message Body with Branding */}
|
||||
<MarkdownViewer
|
||||
content={selectedMessage.message || ''}
|
||||
subject={selectedMessage.subject || ''}
|
||||
showBrandingHeader={true}
|
||||
/>
|
||||
|
||||
{/* Inline Quick Reply Section */}
|
||||
<div className="pt-6 border-t border-slate-800 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-xs font-bold text-white flex items-center gap-1.5">
|
||||
<Reply className="w-3.5 h-3.5 text-blue-400" />
|
||||
<span>Quick Markdown Reply</span>
|
||||
</h4>
|
||||
<span className="text-[10px] text-slate-400">
|
||||
Supports Markdown formatting (e.g. **bold**, - lists, `code`)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{inlineReplySuccess && (
|
||||
<div className="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
||||
<span>Reply dispatched successfully!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<textarea
|
||||
rows={4}
|
||||
value={inlineReplyText}
|
||||
onChange={e => setInlineReplyText(e.target.value)}
|
||||
placeholder="Type your markdown reply... (e.g. **Approved** milestone deliverable proof)"
|
||||
className="w-full p-3.5 rounded-2xl bg-slate-900/90 border border-slate-700/80 hover:border-slate-600 focus:border-blue-500 text-slate-100 placeholder-slate-400 text-xs focus:outline-none transition shadow-inner resize-y font-mono leading-relaxed"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReplyMessage(selectedMessage)}
|
||||
className="text-xs text-blue-400 hover:text-blue-300 font-medium transition cursor-pointer"
|
||||
>
|
||||
Open rich compose editor with live preview
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={isSending || !inlineReplyText.trim()}
|
||||
onClick={handleSendInlineReply}
|
||||
className="flex items-center gap-2 px-5 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold shadow-md shadow-blue-600/30 transition disabled:opacity-40 cursor-pointer"
|
||||
>
|
||||
{isSending ? (
|
||||
<div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : (
|
||||
<Send className="w-3.5 h-3.5" />
|
||||
)}
|
||||
<span>Send Reply</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Compose Message Modal */}
|
||||
<ComposeMessageModal
|
||||
isOpen={isComposeOpen}
|
||||
onClose={() => setIsComposeOpen(false)}
|
||||
initialRecipient={composeInitialRecipient}
|
||||
initialSubject={composeInitialSubject}
|
||||
initialMessage={composeInitialMessage}
|
||||
initialPlatform={composeInitialPlatform}
|
||||
draftToEdit={selectedDraft}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user