Implemented mailbox in ConsoleUI

2026-10-22 18:01:22 +02:00
parent 6ff016e7ec
commit cb89817d88
20 changed files with 3208 additions and 19 deletions
@@ -79,6 +79,7 @@ export const NOTIFICATION_STATUS_OPTIONS = [
  { value: NotificationStatus.Failed, label: 'Failed' },
  { value: NotificationStatus.Cancelled, label: 'Cancelled' },
  { value: NotificationStatus.Bounced, label: 'Bounced' },
+  { value: NotificationStatus.Draft, label: 'Draft' },
 ];

 export const NOTIFICATION_PLATFORM_OPTIONS = [
@@ -509,6 +510,8 @@ export const getEmailStatusBadge = (status?: EmailStatuses | number | null) => {
 export const getNotificationStatusBadge = (status?: NotificationStatus | number | null) => {
  const s = Number(status);
  switch (s) {
+    case NotificationStatus.Draft:
+      return { label: 'Draft', className: 'bg-purple-50 text-purple-800 border-purple-300 font-semibold' };
    case NotificationStatus.Delivered:
    case NotificationStatus.Read:
      return { label: getNotificationStatusLabel(s), className: 'bg-emerald-50 text-emerald-800 border-emerald-300 font-semibold' };
@@ -0,0 +1,313 @@
+/**
+ * Markdown & Branded HTML Formatting Utilities for PostFundManagement (PFM)
+ */
+
+export const PFM_BRAND_LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="40" height="40" fill="none">
+  <defs>
+    <radialGradient id="pfm-ambient" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.4" />
+      <stop offset="70%" stop-color="#2563eb" stop-opacity="0.1" />
+      <stop offset="100%" stop-color="#1e1b4b" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="pfm-top" x1="12" y1="8" x2="52" y2="26" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#a5b4fc" />
+      <stop offset="35%" stop-color="#6366f1" />
+      <stop offset="100%" stop-color="#4338ca" />
+    </linearGradient>
+    <linearGradient id="pfm-left" x1="10" y1="22" x2="30" y2="56" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#38bdf8" />
+      <stop offset="45%" stop-color="#2563eb" />
+      <stop offset="100%" stop-color="#1e40af" />
+    </linearGradient>
+    <linearGradient id="pfm-right" x1="34" y1="28" x2="54" y2="56" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#22d3ee" />
+      <stop offset="50%" stop-color="#06b6d4" />
+      <stop offset="100%" stop-color="#10b981" />
+    </linearGradient>
+    <linearGradient id="pfm-core" x1="27" y1="27" x2="37" y2="37" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="40%" stop-color="#e0f2fe" />
+      <stop offset="100%" stop-color="#38bdf8" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="31" fill="#090d16" />
+  <circle cx="32" cy="32" r="30" stroke="#1e293b" stroke-width="1" />
+  <circle cx="32" cy="32" r="28" fill="url(#pfm-ambient)" />
+  <path d="M32 6.5 L53.5 19 C55 19.8 56 21.5 56 23.2 L56 40.8 C56 42.5 55 44.2 53.5 45 L32 57.5 C30.5 58.3 28.5 58.3 27 57.5 L5.5 45 C4 44.2 3 42.5 3 40.8 L3 23.2 C3 21.5 4 19.8 5.5 19 L27 6.5 C28.5 5.7 30.5 5.7 32 6.5 Z" stroke="#3b82f6" stroke-opacity="0.3" stroke-width="1.2" fill="none" />
+  <path d="M32 9 L51.5 20.2 L43 25.2 L32 18.8 L21 25.2 L12.5 20.2 Z" fill="url(#pfm-top)" />
+  <path d="M10 23 L19.2 28.4 L19.2 44.5 L30 50.8 L30 55.5 L10 43.8 Z" fill="url(#pfm-left)" />
+  <path d="M54 23 L54 43.8 L34 55.5 L34 50.8 L44.8 44.5 L44.8 28.4 Z" fill="url(#pfm-right)" />
+  <path d="M22 28.5 L32 22.8 L42 28.5 L42 35.5 L32 41.2 L22 35.5 Z" fill="#0b1120" stroke="#334155" stroke-width="1" />
+  <path d="M25 31.5 L32 27.5 L39 31.5 L32 35.5 Z" fill="url(#pfm-top)" opacity="0.9" />
+  <path d="M25 37 L32 41 L39 37 L32 33 L25 37 Z" fill="url(#pfm-right)" opacity="0.9" />
+  <polygon points="32,27 36.5,32 32,37 27.5,32" fill="url(#pfm-core)" />
+  <circle cx="32" cy="32" r="1.5" fill="#ffffff" />
+</svg>`;
+
+export const PFM_LOGO_DATA_URI = `data:image/svg+xml;utf8,${encodeURIComponent(PFM_BRAND_LOGO_SVG)}`;
+
+export interface MarkdownRenderOptions {
+  applyBranding?: boolean;
+  emailFormat?: boolean;
+  subject?: string;
+  tenantName?: string;
+}
+
+/**
+ * Checks if the content string is formatted HTML or Markdown.
+ */
+export function isHtmlContent(content: string): boolean {
+  if (!content) return false;
+  const trimmed = content.trim();
+  return (
+    trimmed.startsWith('<!DOCTYPE') ||
+    trimmed.startsWith('<html') ||
+    trimmed.startsWith('<div') ||
+    trimmed.startsWith('<table') ||
+    trimmed.startsWith('<p>') ||
+    (trimmed.includes('</') && trimmed.includes('>'))
+  );
+}
+
+/**
+ * Extracts raw plain text from markdown or HTML for concise notification snippets.
+ */
+export function stripMarkdown(text: string): string {
+  if (!text) return '';
+  return text
+    .replace(/<[^>]*>/g, ' ') // Strip HTML tags
+    .replace(/!\[.*?\]\(.*?\)/g, '') // Strip images
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1') // Extract link text
+    .replace(/#{1,6}\s+/g, '') // Strip headers
+    .replace(/(\*\*|__)(.*?)\1/g, '$2') // Strip bold
+    .replace(/(\*|_)(.*?)\1/g, '$2') // Strip italic
+    .replace(/~~(.*?)~~/g, '$1') // Strip strikethrough
+    .replace(/`{1,3}.*?`{1,3}/gs, '') // Strip code blocks
+    .replace(/^>\s+/gm, '') // Strip blockquotes
+    .replace(/^[-*+]\s+/gm, '') // Strip list markers
+    .replace(/^\d+\.\s+/gm, '') // Strip ordered list markers
+    .replace(/\|/g, ' ') // Replace table pipes
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/**
+ * Parses markdown text into semantic HTML.
+ */
+export function parseMarkdownToHtml(markdown: string): string {
+  if (!markdown) return '';
+
+  let html = markdown
+    // Sanitize script tags
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    // Normalize line endings
+    .replace(/\r\n/g, '\n');
+
+  // 1. Code blocks (```lang\ncode\n```)
+  html = html.replace(/```([a-zA-Z0-9_-]*)\n([\s\S]*?)```/g, (_match, _lang, code) => {
+    const escaped = code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    return `<pre style="background:#0b1120;border:1px solid #1e293b;border-radius:12px;padding:14px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:#e2e8f0;margin:12px 0;"><code>${escaped}</code></pre>`;
+  });
+
+  // 2. Inline code (`code`)
+  html = html.replace(/`([^`]+)`/g, (_match, code) => {
+    const escaped = code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    return `<code style="background:#1e293b;color:#38bdf8;padding:2px 6px;border-radius:6px;font-family:monospace;font-size:12px;">${escaped}</code>`;
+  });
+
+  // 3. Tables (| A | B |\n|---|---|\n| C | D |)
+  html = html.replace(/((?:\|[^\n]+\|\n?)+)/g, (match) => {
+    const rows = match.trim().split('\n');
+    if (rows.length < 2) return match;
+
+    const hasSeparator = rows[1] && rows[1].includes('---');
+    if (!hasSeparator) return match;
+
+    const parseCells = (row: string) =>
+      row
+        .split('|')
+        .slice(1, -1)
+        .map((c) => c.trim());
+
+    const headers = parseCells(rows[0]);
+    const bodyRows = rows.slice(2);
+
+    let tableHtml = `<div style="overflow-x:auto;margin:14px 0;"><table style="width:100%;border-collapse:collapse;border:1px solid #334155;border-radius:8px;font-size:12px;text-align:left;">`;
+    tableHtml += `<thead><tr style="background:#1e293b;color:#f8fafc;">`;
+    headers.forEach((h) => {
+      tableHtml += `<th style="padding:8px 12px;border:1px solid #334155;font-weight:600;">${h}</th>`;
+    });
+    tableHtml += `</tr></thead><tbody>`;
+
+    bodyRows.forEach((row, i) => {
+      const cells = parseCells(row);
+      const bg = i % 2 === 0 ? '#0f172a' : '#1e293b/40';
+      tableHtml += `<tr style="background:${bg};color:#cbd5e1;">`;
+      cells.forEach((c) => {
+        tableHtml += `<td style="padding:8px 12px;border:1px solid #334155;">${c}</td>`;
+      });
+      tableHtml += `</tr>`;
+    });
+
+    tableHtml += `</tbody></table></div>`;
+    return tableHtml;
+  });
+
+  // 4. Headers (# through ####)
+  html = html.replace(/^#### (.*?)$/gm, '<h4 style="font-size:14px;font-weight:700;color:#f8fafc;margin:12px 0 6px 0;">$1</h4>');
+  html = html.replace(/^### (.*?)$/gm, '<h3 style="font-size:16px;font-weight:700;color:#f8fafc;margin:14px 0 8px 0;">$1</h3>');
+  html = html.replace(/^## (.*?)$/gm, '<h2 style="font-size:18px;font-weight:800;color:#ffffff;margin:16px 0 8px 0;border-bottom:1px solid #1e293b;padding-bottom:6px;">$1</h2>');
+  html = html.replace(/^# (.*?)$/gm, '<h1 style="font-size:22px;font-weight:800;color:#ffffff;margin:18px 0 10px 0;border-bottom:1px solid #334155;padding-bottom:8px;">$1</h1>');
+
+  // 5. Blockquotes and GitHub alerts (> [!NOTE], > [!IMPORTANT], etc.)
+  html = html.replace(/^>\s*\[!NOTE\]\s*(.*?)$/gim, '<div style="background:#0c4a6e22;border-left:4px solid #0284c7;padding:10px 14px;border-radius:8px;margin:10px 0;color:#bae6fd;font-size:12px;"><strong>NOTE:</strong> $1</div>');
+  html = html.replace(/^>\s*\[!IMPORTANT\]\s*(.*?)$/gim, '<div style="background:#83184322;border-left:4px solid #db2777;padding:10px 14px;border-radius:8px;margin:10px 0;color:#fbcfe8;font-size:12px;"><strong>IMPORTANT:</strong> $1</div>');
+  html = html.replace(/^>\s*\[!WARNING\]\s*(.*?)$/gim, '<div style="background:#713f1222;border-left:4px solid #d97706;padding:10px 14px;border-radius:8px;margin:10px 0;color:#fef08a;font-size:12px;"><strong>WARNING:</strong> $1</div>');
+  html = html.replace(/^>\s*\[!TIP\]\s*(.*?)$/gim, '<div style="background:#064e3b22;border-left:4px solid #059669;padding:10px 14px;border-radius:8px;margin:10px 0;color:#a7f3d0;font-size:12px;"><strong>TIP:</strong> $1</div>');
+  html = html.replace(/^>\s*(.*?)$/gm, '<blockquote style="border-left:3px solid #3b82f6;padding-left:12px;margin:8px 0;color:#94a3b8;font-style:italic;">$1</blockquote>');
+
+  // 6. Horizontal Rules (---)
+  html = html.replace(/^(?:---|\*\*\*|___)\s*$/gm, '<hr style="border:none;border-top:1px solid #334155;margin:16px 0;" />');
+
+  // 7. Bold & Italic
+  html = html.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong style="color:#ffffff;">$1</strong>');
+  html = html.replace(/__(.*?)__/g, '<strong style="color:#ffffff;">$1</strong>');
+  html = html.replace(/\*(.*?)\*/g, '<em style="color:#cbd5e1;">$1</em>');
+  html = html.replace(/_(.*?)_/g, '<em style="color:#cbd5e1;">$1</em>');
+  html = html.replace(/~~(.*?)~~/g, '<del style="color:#64748b;">$1</del>');
+
+  // 8. Images and Links
+  html = html.replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1" style="max-width:100%;border-radius:8px;margin:10px 0;box-shadow:0 4px 12px rgba(0,0,0,0.5);" />');
+  html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" style="color:#38bdf8;text-decoration:underline;">$1</a>');
+
+  // 9. Unordered Lists (- or *)
+  html = html.replace(/^[-*+]\s+(.*?)$/gm, '<li style="margin-left:20px;list-style-type:disc;color:#cbd5e1;padding:2px 0;">$1</li>');
+
+  // 10. Ordered Lists (1. 2.)
+  html = html.replace(/^\d+\.\s+(.*?)$/gm, '<li style="margin-left:20px;list-style-type:decimal;color:#cbd5e1;padding:2px 0;">$1</li>');
+
+  // 11. Paragraphs
+  const paragraphs = html.split(/\n{2,}/);
+  html = paragraphs
+    .map((p) => {
+      const trimmed = p.trim();
+      if (!trimmed) return '';
+      if (
+        trimmed.startsWith('<h') ||
+        trimmed.startsWith('<div') ||
+        trimmed.startsWith('<table') ||
+        trimmed.startsWith('<pre') ||
+        trimmed.startsWith('<blockquote') ||
+        trimmed.startsWith('<hr') ||
+        trimmed.startsWith('<li')
+      ) {
+        return trimmed;
+      }
+      return `<p style="margin:8px 0;line-height:1.6;color:#cbd5e1;">${trimmed.replace(/\n/g, '<br />')}</p>`;
+    })
+    .join('\n');
+
+  return html;
+}
+
+/**
+ * Transforms Markdown into full branded executive HTML for email notifications.
+ */
+export function renderMarkdownToHtml(
+  markdown: string,
+  options?: MarkdownRenderOptions
+): string {
+  const contentHtml = parseMarkdownToHtml(markdown);
+
+  if (!options?.applyBranding && !options?.emailFormat) {
+    return contentHtml;
+  }
+
+  const subject = options?.subject || 'Statutory Platform Notification';
+  const tenantName = options?.tenantName || 'Post-Fund Management (PFM) Platform';
+  const dateFormatted = new Date().toLocaleDateString('en-ZA', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  });
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${subject}</title>
+</head>
+<body style="margin:0;padding:24px 12px;background-color:#090d16;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#cbd5e1;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:640px;margin:0 auto;background-color:#0d1322;border:1px solid #1e293b;border-radius:16px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.6);">
+    <!-- Executive Brand Header -->
+    <tr>
+      <td style="padding:20px 24px;background:linear-gradient(135deg, #0b1120 0%, #1e1b4b 50%, #0f172a 100%);border-bottom:1px solid #1e293b;">
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+          <tr>
+            <td width="48" style="vertical-align:middle;">
+              <img src="${PFM_LOGO_DATA_URI}" alt="PFM Logo" width="40" height="40" style="display:block;border-radius:10px;" />
+            </td>
+            <td style="padding-left:14px;vertical-align:middle;">
+              <div style="font-size:14px;font-weight:800;color:#ffffff;letter-spacing:-0.02em;text-transform:uppercase;">
+                Post-Fund Management (PFM)
+              </div>
+              <div style="font-size:11px;color:#38bdf8;font-weight:600;margin-top:2px;">
+                ${tenantName}
+              </div>
+            </td>
+            <td align="right" style="vertical-align:middle;">
+              <span style="font-size:10px;font-weight:700;color:#38bdf8;background-color:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.25);padding:4px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em;">
+                Official Notice
+              </span>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+    <!-- Subject Banner -->
+    <tr>
+      <td style="padding:16px 24px;background-color:#0b101b;border-bottom:1px solid #1e293b;">
+        <h2 style="margin:0;font-size:16px;font-weight:700;color:#ffffff;line-height:1.4;">
+          ${subject}
+        </h2>
+        <div style="font-size:11px;color:#64748b;margin-top:4px;">
+          Dispatched on ${dateFormatted} • Electronic System Communication
+        </div>
+      </td>
+    </tr>
+
+    <!-- Message Content Body -->
+    <tr>
+      <td style="padding:24px;font-size:13px;line-height:1.65;color:#e2e8f0;">
+        ${contentHtml}
+      </td>
+    </tr>
+
+    <!-- Executive Footer -->
+    <tr>
+      <td style="padding:18px 24px;background-color:#080c14;border-top:1px solid #1e293b;font-size:11px;color:#64748b;text-align:center;">
+        <div style="font-weight:600;color:#94a3b8;margin-bottom:4px;">
+          Post-Fund Management, Performance & Impact Governance Platform
+        </div>
+        <div>
+          This message was transmitted securely under active multi-tenant encryption. Please do not reply directly to automated dispatch notices.
+        </div>
+        <div style="margin-top:8px;font-size:10px;color:#475569;">
+          &copy; ${new Date().getFullYear()} PFM Governance Architecture. All rights reserved.
+        </div>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+