page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import Link from 'next/link';
 
interface PendingMessage {
  f100: number;  // Message ID
  f101: number;  // Status code
  f101s?: string; // Status string
  f102: number;  // Generation source code
  f102s?: string; // Generation source string
  f103: string;  // Created datetime
  f110: number;  // Customer ID
  f111?: number; // Product ID
  f112?: number; // Quantity
  f113?: number; // Sale number
  f120?: string; // Email/Phone
  f1001?: string; // Status message
  f1002?: string; // Source
  f1003?: string; // Additional contact
  f1004?: string; // Details
  holdreq?: boolean;   // Mark for hold
  relreq?: boolean;    // Mark for release
  neverreq?: boolean;  // Mark for never send
}
 
interface Stats {
  f201: number; // Sending
  f202: number; // On Hold
  f203: number; // Completed
  f204: number; // Never Send
  f217: number; // Awaiting Trigger
  f120: number; // Created Today
}
 
const STATUS_OPTIONS = [
  { value: '1', label: 'Sending' },
  { value: '2', label: 'Hold' },
  { value: '3', label: 'Completed' },
  { value: '4', label: 'NeverSend' },
  { value: '5', label: 'Active Locked' },
  { value: '8', label: 'Duplicate Rejected' },
  { value: '9', label: 'Re-Sending' },
  { value: '17', label: 'Awaiting Trigger' },
  { value: '0', label: 'All' },
];
 
const STATUS_NAMES: { [key: number]: string } = {
  1: 'Sending',
  2: 'Hold',
  3: 'Completed',
  4: 'Never Send',
  5: 'Active Locked',
  8: 'Duplicate',
  9: 'ReSending',
  17: 'Awaiting Trigger',
};
 
const GENERATION_SOURCE_NAMES: { [key: number]: string } = {
  109: 'Account Statement Email',
  119: 'Sale Receipt',
  134: 'Hold Request Pickup Email',
  135: 'Hold Request Pickup Txt',
};
 
export default function PendingMessagesPage() {
  const [messages, setMessages] = useState<PendingMessage[]>([]);
  const [stats, setStats] = useState<Stats>({
    f201: 0,
    f202: 0,
    f203: 0,
    f204: 0,
    f217: 0,
    f120: 0,
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  
  // Filter states
  const [statusFilter, setStatusFilter] = useState('2'); // Default to Hold
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [statsLevel, setStatsLevel] = useState('2'); // 2 months
 
  useEffect(() => {
    // Set default dates
    const today = new Date();
    const monthAgo = new Date();
    monthAgo.setMonth(monthAgo.getMonth() - 1);
    
    setStartDate(monthAgo.toISOString().split('T')[0]);
    setEndDate(today.toISOString().split('T')[0]);
    
    loadStats();
    loadMessages();
  }, []);
 
  const loadStats = async () => {
    try {
      const response = await fetch(`/api/v1/messaging/pending/stats?level=${statsLevel}`);
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setStats({
          f201: 12,
          f202: 45,
          f203: 1523,
          f204: 8,
          f217: 3,
          f120: 67,
        });
        return;
      }
 
      const data = await response.json();
      setStats(data);
    } catch (err) {
      console.error('Error loading stats:', err);
      setStats({
        f201: 12,
        f202: 45,
        f203: 1523,
        f204: 8,
        f217: 3,
        f120: 67,
      });
    }
  };
 
  const loadMessages = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        status: statusFilter,
        startDate,
        endDate,
      });
      
      const response = await fetch(`/api/v1/messaging/pending?${params}`);
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setError('⚠️ Pending Messages API not yet implemented - UI demonstration mode');
        setMessages([
          {
            f100: 1001,
            f101: 2,
            f101s: 'Hold',
            f102: 119,
            f102s: 'Sale Receipt',
            f103: '2024-12-28 14:30:00',
            f110: 5234,
            f111: 12345,
            f112: 2,
            f113: 78901,
            f120: 'customer@example.com',
            f1001: 'Ready to send',
            f1002: 'POS System',
            f1004: 'Order confirmation email',
          },
          {
            f100: 1002,
            f101: 1,
            f101s: 'Sending',
            f102: 134,
            f102s: 'Hold Request Pickup Email',
            f103: '2024-12-28 15:45:00',
            f110: 6789,
            f113: 78902,
            f120: 'john.smith@email.com',
            f1001: 'Queued',
            f1002: 'Online Order',
            f1004: 'Pickup notification',
          },
        ]);
        setLoading(false);
        return;
      }
 
      const data = await response.json();
      
      // Process messages
      const processedMessages = (data.DATS || []).map((msg: PendingMessage) => {
        msg.f101s = STATUS_NAMES[msg.f101] || 'Unknown';
        msg.f102s = GENERATION_SOURCE_NAMES[msg.f102] || String(msg.f102);
        return msg;
      });
      
      setMessages(processedMessages);
      setError('');
    } catch (err) {
      console.error('Error loading messages:', err);
      setError('Failed to load messages. Using demo mode.');
      setMessages([
        {
          f100: 1001,
          f101: 2,
          f101s: 'Hold',
          f102: 119,
          f102s: 'Sale Receipt',
          f103: '2024-12-28 14:30:00',
          f110: 5234,
          f120: 'customer@example.com',
          f1001: 'Ready to send',
          f1002: 'POS System',
        },
      ]);
    } finally {
      setLoading(false);
    }
  };
 
  const applyChanges = async () => {
    const changedMessages = messages.filter(msg => msg.holdreq || msg.relreq || msg.neverreq);
    
    if (changedMessages.length === 0) {
      alert('No changes to apply');
      return;
    }
 
    try {
      for (const msg of changedMessages) {
        let newStatus = msg.f101;
        if (msg.holdreq) newStatus = 2;
        if (msg.relreq) newStatus = 1;
        if (msg.neverreq) newStatus = 4;
 
        const response = await fetch('/api/v1/messaging/pending', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            f100: msg.f100,
            f101: newStatus,
          }),
        });
 
        if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
          console.log(`⚠️ Update API not yet implemented for message ${msg.f100}`);
        }
      }
 
      alert(`✓ ${changedMessages.length} message(s) updated successfully`);
      setTimeout(() => {
        window.location.reload();
      }, 500);
    } catch (err) {
      console.error('Error applying changes:', err);
      alert('⚠️ Failed to apply some changes');
    }
  };
 
  const toggleCheckbox = (messageId: number, field: 'holdreq' | 'relreq' | 'neverreq') => {
    setMessages(messages.map(msg => {
      if (msg.f100 === messageId) {
        // Clear other checkboxes
        const updated = { ...msg, holdreq: false, relreq: false, neverreq: false };
        updated[field] = !msg[field];
        return updated;
      }
      return msg;
    }));
  };
 
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-[1600px] mx-auto">
        {/* Header */}
        <div className="mb-8">
          <Link href="/marketing/messaging" className="text-[#00946b] hover:text-[#007055] mb-2 inline-block">
            ← Back to Messaging
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">📬 Pending Messages</h1>
          <p className="text-gray-600 mt-2">
            This report lists pending outbound messages due to be sent from this system to customers and other external parties.
          </p>
        </div>
 
        {error && (
          <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
            <p className="text-yellow-700">{error}</p>
          </div>
        )}
 
        {/* Stats Panel */}
        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
          <div className="bg-white rounded-lg border border-blue-200 p-4 shadow-sm">
            <div className="text-sm text-gray-600 mb-1">Sending</div>
            <div className="text-2xl font-bold text-gray-900">{stats.f201.toLocaleString()}</div>
          </div>
          <div className="bg-white rounded-lg border border-yellow-200 p-4 shadow-sm">
            <div className="text-sm text-gray-600 mb-1">Awaiting Trigger</div>
            <div className="text-2xl font-bold text-gray-900">{stats.f217.toLocaleString()}</div>
          </div>
          <div className="bg-white rounded-lg border border-orange-200 p-4 shadow-sm">
            <div className="text-sm text-gray-600 mb-1">On Hold</div>
            <div className="text-2xl font-bold text-gray-900">{stats.f202.toLocaleString()}</div>
          </div>
          <div className="bg-white rounded-lg border border-green-200 p-4 shadow-sm">
            <div className="text-sm text-gray-600 mb-1">Completed</div>
            <div className="text-2xl font-bold text-gray-900">{stats.f203.toLocaleString()}</div>
          </div>
          <div className="bg-white rounded-lg border border-red-200 p-4 shadow-sm">
            <div className="text-sm text-gray-600 mb-1">Never Send</div>
            <div className="text-2xl font-bold text-gray-900">{stats.f204.toLocaleString()}</div>
          </div>
          <div className="bg-white rounded-lg border border-purple-200 p-4 shadow-sm">
            <div className="text-sm text-gray-600 mb-1">Created Today</div>
            <div className="text-2xl font-bold text-gray-900">{stats.f120.toLocaleString()}</div>
          </div>
        </div>
 
        {/* Stats Level Selector */}
        <div className="flex justify-end mb-6">
          <div className="bg-white rounded-lg border border-gray-200 p-3 shadow-sm">
            <label className="text-sm text-gray-700 mr-2">Show:</label>
            <select
              value={statsLevel}
              onChange={(e) => {
                setStatsLevel(e.target.value);
                setTimeout(loadStats, 100);
              }}
              className="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-[#00946b]"
            >
              <option value="4">1 Month</option>
              <option value="2">2 Months</option>
              <option value="3">All</option>
            </select>
          </div>
        </div>
 
        {/* Filter Controls */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
          <div className="flex flex-wrap gap-4 items-end">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#00946b]"
              >
                {STATUS_OPTIONS.map(opt => (
                  <option key={opt.value} value={opt.value}>{opt.label}</option>
                ))}
              </select>
            </div>
 
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">From (including)</label>
              <input
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
 
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">To</label>
              <input
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
 
            <button
              onClick={loadMessages}
              disabled={loading}
              className="px-6 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007055] font-medium transition-colors disabled:bg-gray-400"
            >
              {loading ? 'Loading...' : 'Display'}
            </button>
 
            <button
              onClick={applyChanges}
              className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium transition-colors ml-auto"
            >
              Apply Changes
            </button>
          </div>
        </div>
 
        {/* Messages Table */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID#</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Gen Source</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Customer ID</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email/Phone</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Sale#</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Details</th>
                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Release</th>
                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Hold</th>
                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Never Send</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {loading ? (
                  <tr>
                    <td colSpan={11} className="px-6 py-8 text-center text-gray-500">
                      <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-[#00946b] mr-2"></div>
                      Loading messages...
                    </td>
                  </tr>
                ) : messages.length === 0 ? (
                  <tr>
                    <td colSpan={11} className="px-6 py-8 text-center text-gray-500">
                      No pending messages found for the selected filters.
                    </td>
                  </tr>
                ) : (
                  messages.map((msg) => (
                    <tr key={msg.f100} className="hover:bg-gray-50">
                      <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">{msg.f100}</td>
                      <td className="px-4 py-3 whitespace-nowrap">
                        <span
                          className={`px-2 py-1 text-xs font-semibold rounded-full ${
                            msg.f101 === 1 ? 'bg-blue-100 text-blue-800' :
                            msg.f101 === 2 ? 'bg-yellow-100 text-yellow-800' :
                            msg.f101 === 3 ? 'bg-green-100 text-green-800' :
                            msg.f101 === 4 ? 'bg-red-100 text-red-800' :
                            'bg-gray-100 text-gray-800'
                          }`}
                        >
                          {msg.f101s}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-700">{msg.f102s}</td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                        {new Date(msg.f103).toLocaleString()}
                      </td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{msg.f110}</td>
                      <td className="px-4 py-3 text-sm text-gray-700">{msg.f120 || msg.f1003 || '-'}</td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{msg.f113 || '-'}</td>
                      <td className="px-4 py-3 text-sm text-gray-700">{msg.f1004 || msg.f1001 || '-'}</td>
                      <td className="px-4 py-3 text-center">
                        <input
                          type="checkbox"
                          checked={msg.relreq || false}
                          onChange={() => toggleCheckbox(msg.f100, 'relreq')}
                          className="rounded border-gray-300 text-green-600 focus:ring-green-500"
                        />
                      </td>
                      <td className="px-4 py-3 text-center">
                        <input
                          type="checkbox"
                          checked={msg.holdreq || false}
                          onChange={() => toggleCheckbox(msg.f100, 'holdreq')}
                          className="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
                        />
                      </td>
                      <td className="px-4 py-3 text-center">
                        <input
                          type="checkbox"
                          checked={msg.neverreq || false}
                          onChange={() => toggleCheckbox(msg.f100, 'neverreq')}
                          className="rounded border-gray-300 text-red-600 focus:ring-red-500"
                        />
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}