page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
 
interface EmailMessage {
  physkey: string;
  fromemail: string;
  recvdtu: string;
  processingstatus: number;
  processingstatus_decoded: string;
  processingstatus_decoded_bkcolor?: string;
  subject: string;
  messagelength: number;
  _RowKey?: number;
}
 
interface EmailHeader {
  name: string;
  value: string;
  seq: number;
}
 
interface EmailPart {
  seq: number;
  contenttype: string;
  contenttransferencoding: string;
  name: string;
  partdata: string;
  fdlreaderextract?: string;
  fdlreadercontents?: string;
  fdlreaderstatus?: number;
}
 
export default function InboundMessagesPage() {
  const [messages, setMessages] = useState<EmailMessage[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [showNewArrival, setShowNewArrival] = useState(true);
  const [showReady, setShowReady] = useState(true);
  const [showDone, setShowDone] = useState(false);
  const [showDeleting, setShowDeleting] = useState(false);
  const [loading, setLoading] = useState(true);
 
  // Modal states
  const [viewModal, setViewModal] = useState(false);
  const [headersModal, setHeadersModal] = useState(false);
  const [selectedMessage, setSelectedMessage] = useState<EmailMessage | null>(null);
  const [messageContent, setMessageContent] = useState('');
  const [messageHeaders, setMessageHeaders] = useState<EmailHeader[]>([]);
  const [messageParts, setMessageParts] = useState<EmailPart[]>([]);
  const [viewedMalware, setViewedMalware] = useState(false);
 
  useEffect(() => {
    loadMessages();
  }, []);
 
  const loadMessages = async () => {
    try {
      const response = await fetch('/api/v1/messaging/inbound');
      
      if (!response.ok || !response.headers.get('content-type')?.includes('application/json')) {
        // Demo mode
        setMessages(getDemoMessages());
        setLoading(false);
        return;
      }
 
      const data = await response.json();
      setMessages(data.messages || []);
      setLoading(false);
    } catch (error) {
      console.error('Error loading inbound messages:', error);
      setMessages(getDemoMessages());
      setLoading(false);
    }
  };
 
  const getDemoMessages = (): EmailMessage[] => {
    return [
      {
        physkey: 'msg_001',
        fromemail: 'customer@example.com',
        recvdtu: '2025-12-29 14:30:00',
        processingstatus: 1,
        processingstatus_decoded: 'Ready',
        subject: 'Order inquiry - Product availability',
        messagelength: 2048,
      },
      {
        physkey: 'msg_002',
        fromemail: 'supplier@warehouse.com',
        recvdtu: '2025-12-29 13:15:00',
        processingstatus: 3,
        processingstatus_decoded: 'Completed',
        subject: 'Invoice #INV-2025-001 attached',
        messagelength: 15360,
      },
      {
        physkey: 'msg_003',
        fromemail: 'notifications@shipping.com',
        recvdtu: '2025-12-29 12:45:00',
        processingstatus: 0,
        processingstatus_decoded: 'New Arrival',
        subject: 'Delivery confirmation for order #12345',
        messagelength: 1024,
      },
    ];
  };
 
  const getStatusBadgeColor = (status: number) => {
    switch (status) {
      case 0: return 'bg-blue-100 text-blue-800';
      case 1: return 'bg-green-100 text-green-800';
      case 2: return 'bg-red-100 text-red-800';
      case 4: return 'bg-gray-100 text-gray-800';
      case 256:
      case 257:
        return 'bg-orange-500 text-white';
      default: return 'bg-gray-100 text-gray-800';
    }
  };
 
  const decodeStatus = (status: number): { text: string; bgColor?: string } => {
    switch (status) {
      case 0: return { text: 'New Arrival' };
      case 1: return { text: 'Ready' };
      case 2: return { text: 'Deleting' };
      case 4: return { text: 'Done' };
      case 256: return { text: '***MALWARE DETECTED***', bgColor: 'orange' };
      case 257: return { text: '***ATTACHMENT MALWARE DETECTED***', bgColor: 'orange' };
      default: return { text: `Unknown (${status})` };
    }
  };
 
  const filteredMessages = messages.filter(msg => {
    // Status filter
    const statusMap: { [key: number]: boolean } = {
      0: showNewArrival,
      1: showReady,
      2: showDeleting,
      4: showDone,
    };
    
    if (statusMap[msg.processingstatus] === false) return false;
 
    // Search filter
    if (searchTerm) {
      const search = searchTerm.toLowerCase();
      return (
        msg.fromemail.toLowerCase().includes(search) ||
        msg.subject.toLowerCase().includes(search)
      );
    }
 
    return true;
  });
 
  const handleViewMessage = async (msg: EmailMessage) => {
    // Check for malware
    if ((msg.processingstatus >= 256 && msg.processingstatus < 512) && !viewedMalware) {
      if (!confirm("This message has failed antivirus checks. It could be dangerous to your computer.\n\nDo you really wish to view it?")) {
        return;
      }
      if (!confirm("Are you really sure you want to continue?\n\nIt has been recorded that you have viewed this against advice.\n\nSupport due to damage may be chargeable")) {
        return;
      }
      setViewedMalware(true);
    }
 
    setSelectedMessage(msg);
    setMessageContent('Loading message content...');
    setMessageParts([]);
    setViewModal(true);
 
    // Fetch message content and parts
    try {
      const response = await fetch(`/api/v1/messaging/inbound/${msg.physkey}/content`);
      
      if (!response.ok || !response.headers.get('content-type')?.includes('application/json')) {
        // Demo content
        setMessageContent(`Demo message content for: ${msg.subject}\n\nThis is a sample email body. In production, the actual email content would be displayed here.\n\nFrom: ${msg.fromemail}\nReceived: ${msg.recvdtu}`);
        setMessageParts([
          {
            seq: 1,
            contenttype: 'text/html',
            contenttransferencoding: 'quoted-printable',
            name: 'message.html',
            partdata: 'Demo HTML content',
          },
          {
            seq: 2,
            contenttype: 'application/pdf',
            contenttransferencoding: 'base64',
            name: 'invoice.pdf',
            partdata: 'base64encodeddata...',
            fdlreaderextract: '{"invoice": "data"}',
          },
        ]);
        return;
      }
 
      const data = await response.json();
      setMessageContent(data.content || 'No content available');
      setMessageParts(data.parts || []);
    } catch (error) {
      console.error('Error loading message content:', error);
      setMessageContent('Error loading message content');
    }
  };
 
  const handleViewHeaders = async (msg: EmailMessage) => {
    setSelectedMessage(msg);
    setMessageHeaders([]);
    setHeadersModal(true);
 
    try {
      const response = await fetch(`/api/v1/messaging/inbound/${msg.physkey}/headers`);
      
      if (!response.ok || !response.headers.get('content-type')?.includes('application/json')) {
        // Demo headers
        setMessageHeaders([
          { name: 'From', value: msg.fromemail, seq: 1 },
          { name: 'To', value: 'store@yourcompany.com', seq: 2 },
          { name: 'Subject', value: msg.subject, seq: 3 },
          { name: 'Date', value: msg.recvdtu, seq: 4 },
          { name: 'Content-Type', value: 'multipart/mixed; boundary="boundary123"', seq: 5 },
          { name: 'MIME-Version', value: '1.0', seq: 6 },
        ]);
        return;
      }
 
      const data = await response.json();
      setMessageHeaders(data.headers || []);
    } catch (error) {
      console.error('Error loading headers:', error);
    }
  };
 
  const handleReprocess = async (msg: EmailMessage, event: React.MouseEvent) => {
    const ctrlKey = event.ctrlKey;
    
    if (ctrlKey) {
      if (!confirm('Reprocess ALL messages? This will reprocess every message in the list.')) {
        return;
      }
    }
 
    try {
      const response = await fetch('/api/v1/messaging/inbound/reprocess', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          physkey: ctrlKey ? 'all' : msg.physkey,
        }),
      });
 
      if (!response.ok) {
        alert('Reprocess queued (demo mode)');
        return;
      }
 
      alert('Message reprocessing queued');
      loadMessages();
    } catch (error) {
      console.error('Error reprocessing:', error);
      alert('Reprocess queued (demo mode)');
    }
  };
 
  const handleDelete = async (msg: EmailMessage) => {
    if (!confirm(`Delete message from ${msg.fromemail}?\n\n${msg.subject}`)) {
      return;
    }
 
    try {
      const response = await fetch(`/api/v1/messaging/inbound/${msg.physkey}`, {
        method: 'DELETE',
      });
 
      if (!response.ok) {
        alert('Delete queued (demo mode)');
        return;
      }
 
      alert('Message deletion queued');
      loadMessages();
    } catch (error) {
      console.error('Error deleting:', error);
      alert('Delete queued (demo mode)');
    }
  };
 
  const formatSize = (bytes: number): string => {
    return ((bytes + 512) / 1024).toFixed(2) + 'kb';
  };
 
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <div className="flex items-center gap-4 mb-4">
          <Link href="/marketing/messaging" className="text-blue-600 hover:text-blue-800">
            ← Back to Messaging
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">Inbound Messages</h1>
        </div>
        
        <p className="text-gray-600 mb-4">
          This page lists emails that have arrived and their automatic processing status. 
          Inbound email processing must be specifically configured and is typically only used 
          where Fieldpine has its own email account.
        </p>
      </div>
 
      {/* Search and Filters */}
      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
        <div className="flex flex-wrap items-center gap-4">
          <div className="flex-1 min-w-[200px]">
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Search (from/subject)
            </label>
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Filter by sender or subject..."
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
 
          <div className="flex flex-wrap items-center gap-4">
            <span className="text-sm font-medium text-gray-700">Show:</span>
            
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={showNewArrival}
                onChange={(e) => setShowNewArrival(e.target.checked)}
                className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
              />
              <span className="text-sm text-gray-700">New Arrival</span>
            </label>
 
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={showReady}
                onChange={(e) => setShowReady(e.target.checked)}
                className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
              />
              <span className="text-sm text-gray-700">Ready</span>
            </label>
 
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={showDone}
                onChange={(e) => setShowDone(e.target.checked)}
                className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
              />
              <span className="text-sm text-gray-700">Done</span>
            </label>
 
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={showDeleting}
                onChange={(e) => setShowDeleting(e.target.checked)}
                className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
              />
              <span className="text-sm text-gray-700">Deleting</span>
            </label>
          </div>
        </div>
      </div>
 
      {/* Messages Table */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  From
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Received (UTC)
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Options
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Subject
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Size
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {loading ? (
                <tr>
                  <td colSpan={6} className="px-6 py-8 text-center text-gray-500">
                    Loading messages...
                  </td>
                </tr>
              ) : filteredMessages.length === 0 ? (
                <tr>
                  <td colSpan={6} className="px-6 py-8 text-center text-gray-500">
                    No messages found matching the current filters.
                  </td>
                </tr>
              ) : (
                filteredMessages.map((msg, index) => (
                  <tr key={msg.physkey} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900 max-w-xs truncate" title={msg.fromemail}>
                        {msg.fromemail}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {msg.recvdtu}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadgeColor(msg.processingstatus)}`}>
                        {msg.processingstatus_decoded}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                      <button
                        onClick={() => handleViewMessage(msg)}
                        className="text-blue-600 hover:text-blue-900 font-medium"
                      >
                        View
                      </button>
                      <button
                        onClick={() => handleViewHeaders(msg)}
                        className="text-blue-600 hover:text-blue-900 font-medium"
                      >
                        Headers
                      </button>
                      <button
                        onClick={(e) => handleReprocess(msg, e)}
                        className="text-green-600 hover:text-green-900 font-medium"
                        title="Hold Ctrl to reprocess all"
                      >
                        Reprocess
                      </button>
                      {msg.processingstatus !== 2 && (
                        <button
                          onClick={() => handleDelete(msg)}
                          className="text-red-600 hover:text-red-900 font-medium"
                        >
                          Delete
                        </button>
                      )}
                    </td>
                    <td className="px-6 py-4">
                      <div className="text-sm text-gray-900 max-w-md truncate" title={msg.subject}>
                        {msg.subject}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {formatSize(msg.messagelength)}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
 
      {/* View Message Modal */}
      {viewModal && selectedMessage && (
        <div
          className="modal-overlay"
          onClick={() => setViewModal(false)}
        >
          <div
            className="bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="border-b border-gray-200 px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-semibold text-gray-900">
                Message Contents
                <span className="text-sm text-gray-500 ml-3">({selectedMessage.physkey})</span>
              </h2>
              <button
                onClick={() => setViewModal(false)}
                className="text-gray-400 hover:text-gray-600 text-2xl font-bold"
              >
                ×
              </button>
            </div>
 
            <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
              {/* Message Parts */}
              {messageParts.length > 0 && (
                <div className="mb-6">
                  <h3 className="text-lg font-semibold mb-3">Attachments & Parts</h3>
                  <table className="min-w-full border border-gray-300">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-4 py-2 border-b text-left text-sm font-medium text-gray-700">Content Type</th>
                        <th className="px-4 py-2 border-b text-left text-sm font-medium text-gray-700">Encoding</th>
                        <th className="px-4 py-2 border-b text-left text-sm font-medium text-gray-700">Name</th>
                        <th className="px-4 py-2 border-b text-left text-sm font-medium text-gray-700">Options</th>
                      </tr>
                    </thead>
                    <tbody>
                      {messageParts.map((part, idx) => (
                        <tr key={idx} className="hover:bg-gray-50">
                          <td className="px-4 py-2 border-b text-sm">{part.contenttype}</td>
                          <td className="px-4 py-2 border-b text-sm">{part.contenttransferencoding}</td>
                          <td className="px-4 py-2 border-b text-sm">{part.name || '-'}</td>
                          <td className="px-4 py-2 border-b text-sm">
                            {part.fdlreaderextract && (
                              <button
                                onClick={() => alert(`Extract data:\n${part.fdlreaderextract}`)}
                                className="text-blue-600 hover:text-blue-800 text-sm mr-2"
                              >
                                View Extract
                              </button>
                            )}
                            {part.fdlreadercontents && (
                              <button
                                onClick={() => alert(`Contents:\n${part.fdlreadercontents}`)}
                                className="text-blue-600 hover:text-blue-800 text-sm"
                              >
                                View Contents
                              </button>
                            )}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
 
              {/* Message Content */}
              <div className="mb-4">
                <h3 className="text-lg font-semibold mb-3">Message Content</h3>
                <pre className="bg-gray-50 p-4 rounded border border-gray-300 overflow-x-auto text-sm whitespace-pre-wrap">
                  {messageContent}
                </pre>
              </div>
            </div>
 
            <div className="border-t border-gray-200 px-6 py-4 flex justify-end">
              <button
                onClick={() => setViewModal(false)}
                className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
 
      {/* View Headers Modal */}
      {headersModal && selectedMessage && (
        <div
          className="modal-overlay"
          onClick={() => setHeadersModal(false)}
        >
          <div
            className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="border-b border-gray-200 px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-semibold text-gray-900">
                Message Headers
                <span className="text-sm text-gray-500 ml-3">({selectedMessage.physkey})</span>
              </h2>
              <button
                onClick={() => setHeadersModal(false)}
                className="text-gray-400 hover:text-gray-600 text-2xl font-bold"
              >
                ×
              </button>
            </div>
 
            <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
              <table className="min-w-full border border-gray-300">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-2 border-b text-left text-sm font-medium text-gray-700">Name</th>
                    <th className="px-4 py-2 border-b text-left text-sm font-medium text-gray-700">Value</th>
                  </tr>
                </thead>
                <tbody>
                  {messageHeaders.map((header, idx) => (
                    <tr key={idx} className="hover:bg-gray-50">
                      <td className="px-4 py-2 border-b text-sm font-medium">{header.name}</td>
                      <td className="px-4 py-2 border-b text-sm break-all">{header.value}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
 
            <div className="border-t border-gray-200 px-6 py-4 flex justify-end">
              <button
                onClick={() => setHeadersModal(false)}
                className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}