+ setPdfDocId(null)} t={t} />}
+
+ );
+};
+
+// ─────────────────────────────────────────────────────────── message list ──
+const MessageList: React.FC<{
+ folder: Folder;
+ queue?: import('../../../services/email.service').EmailQueueItem[];
+ received?: ReceivedEmail[];
+ loading: boolean;
+ selection: Selection;
+ onSelect: (s: Selection) => void;
+ t: (k: string, d?: string) => string;
+}> = ({ folder, queue, received, loading, selection, onSelect, t }) => {
+ if (folder.src === 'empty') {
+ return (
+
+
+
+
+
+
+
+
+
+ + {t('messages.subtitle', 'Sent, automated and incoming mail — one place.')} +
+
+ {/* ── account tree ── */}
+
+
+ {/* ── message list ── */}
+
+
+
+ {/* ── reading pane ── */}
+
+ navigate('/admin/accounting/inbox')}
+ t={t}
+ />
+
+
+
+ {pdfDocId != null &&
+
+ {folder.f.name}
+
+ {folder.a.addr || (folder.a.id === 'all' ? t('messages.unified', 'Unified across accounts') : t('messages.systemGenerated', 'System-generated'))}
+
+
+
+
+
+ );
+ }
+ if (loading) return {t('messages.noMessages', 'No messages')}
;
+ }
+
+ return (
+ -
+ {rows.map((r) => (
+
- + + + ))} +
+
+ );
+ }
+
+ const isAcct = account.id === 'acct' || (selection.kind === 'received');
+ return (
+
+
+ {t('messages.selectPrompt', 'Select a message to read')}
+
+
+ );
+};
+
+const QueueDetail: React.FC<{ d: import('../../../services/email.service').EmailQueueDetail; t: (k: string, d?: string) => string }> = ({ d, t }) => (
+ <>
+
+ {selection.kind === 'queue' ? (
+ detailQuery.isLoading ?
+ {t('messages.loadError', 'Could not load this message.')}
+ )
+ ) : (
+ + {friendlyType(d.emailType)} +
+
+
+
+ {d.renderedHtml ? (
+
+ {t('messages.from', 'from')} no-reply@ · {t('messages.to', 'to')}{' '}
+ {d.recipientEmail}
+
+ {d.cc && cc {d.cc}
}
+ {fmt(d.sentAt || d.createdAt)}
+
+ {/* rendered_html is our own template output — sandboxed, scripts blocked */}
+
+
+ ) : (
+
+ {t('messages.noBody', 'This message was sent before body capture was added, so no preview is available.')}
+
+ )}
+
+ {d.attachments.length > 0 && (
+
+
+ )}
+
+);
+
+const ReceivedDetail: React.FC<{
+ item: ReceivedEmail;
+ onViewDoc: (id: number) => void;
+ onOpenAccounting: () => void;
+ t: (k: string, d?: string) => string;
+}> = ({ item, onViewDoc, onOpenAccounting, t }) => (
+ <>
+
+ {d.attachments.length} {t('messages.attachments', 'attachment(s)')}
+
+
+ {d.attachments.map((a, i) => (
+
+
+
+ ))}
+ + {item.subject || t('messages.noSubject', '(no subject)')} +
+
+
+
+
+ {t('messages.from', 'from')} {item.from_address || '—'}
+ {' · '}{t('messages.to', 'to')} rechnungen@
+
+ {fmt(item.received_at)}
+
+ {t('messages.inboundBodyPending', 'Full message bodies are captured from the next phase. For now this shows the envelope and any attached document.')}
+
+
+ {item.inbound_document_id != null && (
+
+
+
+
+ )}
+ {item.error && (
+ {item.error}
+ )}
+
+);
+
+// ─────────────────────────────────────────────────────────────── toolbar ──
+const Toolbar: React.FC<{ isAcct: boolean; readonly: boolean; t: (k: string, d?: string) => string }> = ({ isAcct, readonly, t }) => {
+ const Tb: React.FC<{ icon: LucideIcon; label: string; accent?: boolean }> = ({ icon: Icon, label, accent }) => (
+
+ );
+ return (
+
+ {!readonly &&
+ );
+};
+
+// ─────────────────────────────────────────────────────────────── pdf modal ──
+const PdfModal: React.FC<{ docId: number; onClose: () => void; t: (k: string, d?: string) => string }> = ({ docId, onClose, t }) => {
+ const [page, setPage] = useState(1);
+ const [url, setUrl] = useState
+
+ );
+};
+
+export default MessagesPage;
diff --git a/frontend/src/services/email.service.ts b/frontend/src/services/email.service.ts
index 7524c3c1..8d72452b 100644
--- a/frontend/src/services/email.service.ts
+++ b/frontend/src/services/email.service.ts
@@ -22,6 +22,15 @@ export interface EmailQueueListResponse {
pagination: { total: number; page: number; pageSize: number; totalPages: number };
}
+/** Single sent/queued email including its rendered body — Messages reading pane. */
+export interface EmailQueueDetail extends EmailQueueItem {
+ /** Exact HTML that was sent (migration 119); null for pre-migration rows. */
+ renderedHtml: string | null;
+ cc: string | null;
+ /** Attachment filenames only — disk paths are never exposed. */
+ attachments: { filename: string; contentType: string | null }[];
+}
+
export interface EmailConfig {
smtp_host: string;
smtp_port: number;
@@ -207,6 +216,12 @@ export const emailService = {
return response.data;
},
+ /** Single sent email with its rendered body + attachment filenames. */
+ async getQueueItem(id: number): Promise e.stopPropagation()}>
+
+
+
+
+
+ {page}
+
+
+
+
+ {err ? (
+ 
+ ) : (
+
+ {t('messages.previewUnavailable', 'Preview unavailable')}
+ ) : url ? (
+
+ {t('messages.rasterNote', 'Server-rendered preview — the raw file never reaches the browser.')}
+
+
+
+ + {t('email.customerMailbox.subtitle', 'A second inbound mailbox for customer conversations. Its mail appears under Messages → Customers; attachments are not routed to Accounting.')} +
+ +
+
+
+
+
+
+ set('imap_host', e.target.value)} placeholder="imap.example.com" leftIcon={
+
+
+
+
+
+
+ set('imap_port', parseInt(e.target.value, 10) || 0)} placeholder="993" />
+
+
+
+
+
+
+
+ set('imap_user', e.target.value)} autoComplete="off" placeholder="hello@yourdomain.com" leftIcon={
+
+
+
+
+
+
+ set('imap_pass', e.target.value)} autoComplete="new-password" placeholder={t('email.enterPassword', 'Enter password')} leftIcon={
+
+
+ set('imap_folder', e.target.value)} placeholder="INBOX" />
+
+
+
+
+
+
+
diff --git a/frontend/src/pages/admin/messages/MessagesPage.tsx b/frontend/src/pages/admin/messages/MessagesPage.tsx
index a2a35d45..61b37cc9 100644
--- a/frontend/src/pages/admin/messages/MessagesPage.tsx
+++ b/frontend/src/pages/admin/messages/MessagesPage.tsx
@@ -20,7 +20,7 @@ import { Loading } from '../../../components/common';
*/
type FolderSrc = 'queue' | 'received' | 'empty';
-interface Folder { id: string; name: string; icon: LucideIcon; src: FolderSrc; note?: string; }
+interface Folder { id: string; name: string; icon: LucideIcon; src: FolderSrc; account?: string; note?: string; }
interface Account { id: string; name: string; addr?: string; color: string; folders: Folder[]; }
type Selection =
@@ -50,6 +50,7 @@ const fmt = (s?: string | null) =>
const STATUS_STYLES: Record = {
sent: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
ingested: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+ received: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
pending: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
error: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
@@ -67,14 +68,20 @@ export const MessagesPage: React.FC = () => {
queryFn: () => emailService.listQueue({ pageSize: 100 }),
refetchInterval: 60000,
});
- const receivedQuery = useQuery({
- queryKey: ['messages', 'received'],
- queryFn: () => emailService.listReceived({ pageSize: 100 }),
+ const acctQuery = useQuery({
+ queryKey: ['messages', 'received', 'accounting'],
+ queryFn: () => emailService.listReceived({ account: 'accounting', pageSize: 100 }),
+ refetchInterval: 60000,
+ });
+ const custQuery = useQuery({
+ queryKey: ['messages', 'received', 'customers'],
+ queryFn: () => emailService.listReceived({ account: 'customers', pageSize: 100 }),
refetchInterval: 60000,
});
const queueTotal = queueQuery.data?.pagination.total;
- const receivedTotal = receivedQuery.data?.pagination.total;
+ const acctTotal = acctQuery.data?.pagination.total;
+ const custTotal = custQuery.data?.pagination.total;
const accounts: Account[] = useMemo(() => [
{ id: 'all', name: t('messages.account.all', 'All mail'), color: '#64748b', folders: [
@@ -82,13 +89,12 @@ export const MessagesPage: React.FC = () => {
{ id: 'all-sent', name: t('messages.folder.sent', 'Sent'), icon: Send, src: 'queue' },
] },
{ id: 'cust', name: t('messages.account.customers', 'Customers'), addr: 'hello@', color: '#2563c9', folders: [
- { id: 'cust-in', name: t('messages.folder.inbox', 'Inbox'), icon: Inbox, src: 'empty',
- note: t('messages.empty.customerInbox', 'Connect the hello@ mailbox to see customer replies here (next phase).') },
+ { id: 'cust-in', name: t('messages.folder.inbox', 'Inbox'), icon: Inbox, src: 'received', account: 'customers' },
{ id: 'cust-sent', name: t('messages.folder.sent', 'Sent'), icon: Send, src: 'empty',
- note: t('messages.empty.customerSent', 'Your hand-written replies will appear here once compose ships.') },
+ note: t('messages.empty.customerSent', 'Your hand-written replies will appear here once compose ships (next phase).') },
] },
{ id: 'acct', name: t('messages.account.accounting', 'Accounting'), addr: 'rechnungen@', color: '#12876a', folders: [
- { id: 'acct-in', name: t('messages.folder.inbox', 'Inbox'), icon: Inbox, src: 'received' },
+ { id: 'acct-in', name: t('messages.folder.inbox', 'Inbox'), icon: Inbox, src: 'received', account: 'accounting' },
] },
{ id: 'auto', name: t('messages.account.automated', 'Automated'), addr: 'no-reply@', color: '#7a52d6', folders: [
{ id: 'auto-sent', name: t('messages.folder.sent', 'Sent'), icon: Send, src: 'queue' },
@@ -100,8 +106,31 @@ export const MessagesPage: React.FC = () => {
return { a: accounts[0], f: accounts[0].folders[0] };
}, [accounts, activeFolder]);
- const countFor = (src: FolderSrc) =>
- src === 'queue' ? queueTotal : src === 'received' ? receivedTotal : undefined;
+ const countFor = (f: Folder): number | undefined => {
+ if (f.src === 'queue') return queueTotal;
+ if (f.src === 'received') {
+ if (f.account === 'customers') return custTotal;
+ if (f.account === 'accounting') return acctTotal;
+ return (acctTotal || 0) + (custTotal || 0);
+ }
+ return undefined;
+ };
+
+ // Which received rows feed the active folder (customer / accounting / union).
+ const receivedItems = useMemo(() => {
+ if (folder.f.src !== 'received') return undefined;
+ const a = acctQuery.data?.items || [];
+ const c = custQuery.data?.items || [];
+ if (folder.f.account === 'customers') return c;
+ if (folder.f.account === 'accounting') return a;
+ return [...a, ...c].sort((x, y) => (y.received_at || '').localeCompare(x.received_at || ''));
+ }, [folder, acctQuery.data, custQuery.data]);
+
+ const receivedLoading = folder.f.account === 'customers'
+ ? custQuery.isLoading
+ : folder.f.account === 'accounting'
+ ? acctQuery.isLoading
+ : acctQuery.isLoading || custQuery.isLoading;
return (
@@ -129,7 +158,7 @@ export const MessagesPage: React.FC = () => {
{a.folders.map((f) => {
- const c = countFor(f.src);
+ const c = countFor(f);
const active = f.id === activeFolder;
return (