page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import Link from 'next/link';
 
interface SmsAccount {
  f100: string;  // Account ID
  f109: string;  // Account Name
  f110: string;  // Type (SMS, SMTP, POP3, etc)
  f120: number;  // Status flags (1=Hold)
  f120s?: string; // Status string (Active/Hold)
  f120s_bkcolor?: string; // Background color
  f101?: string;  // Server/Config
  f102?: string;  // Port
  f103?: string;  // Username/Email
  f104?: string;  // Password
  f130?: string;  // SMS Provider type
  STAT?: Array<{
    f120?: string;
    TRCE?: Array<{ f110: string }>;
  }>;
}
 
interface SmsProvider {
  value: string;
  label: string;
  description: string;
  requiresEmail: boolean;
}
 
const SMS_PROVIDERS: SmsProvider[] = [
  { value: '0', label: '--Select One', description: '', requiresEmail: false },
  { value: '2', label: 'Fieldpine Gateway', description: 'Fieldpine provide a general purpose gateway for most countries. See Fieldpine SMS for pricing and further details', requiresEmail: false },
  { value: '1', label: 'Email Gateway', description: 'Enter the details of the email address to be sent too. This option requires an SMTP (Send Email) account.', requiresEmail: true },
  { value: '6401', label: 'NZ. Spark eTxt', description: 'Configure the SMS setup after you have registered for Spark eTxt and can successfully send Txt messages from your email account outside the POS. This option requires an SMTP (Send Email) account.', requiresEmail: false },
];
 
export default function TxtOptionsPage() {
  const [accounts, setAccounts] = useState<SmsAccount[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  
  // Modal states
  const [showNewAccountModal, setShowNewAccountModal] = useState(false);
  const [showTestModal, setShowTestModal] = useState(false);
  const [showLogModal, setShowLogModal] = useState(false);
  const [showControlPanelModal, setShowControlPanelModal] = useState(false);
  
  // Selected account for modals
  const [selectedAccount, setSelectedAccount] = useState<SmsAccount | null>(null);
  
  // New account form
  const [accountType, setAccountType] = useState<'SMTP' | 'POP3' | 'UPLOAD' | 'FTP' | 'SMS'>('SMS');
  const [newAccountForm, setNewAccountForm] = useState({
    name: '',
    server: '',
    port: '',
    username: '',
    password: '',
    directory: '',
    smsProvider: '0',
    smsEmail: '',
  });
  
  // Test form
  const [testTarget, setTestTarget] = useState('');
  const [testMessage, setTestMessage] = useState('This is a test message to verify the system is configured correctly. You can delete this message.');
  
  // Control panel
  const [controlPanelStatus, setControlPanelStatus] = useState('Contacting Server, please wait...');
 
  useEffect(() => {
    loadAccounts();
    const interval = setInterval(loadAccounts, 30000); // Refresh every 30 seconds
    return () => clearInterval(interval);
  }, []);
 
  const loadAccounts = async () => {
    try {
      const response = await fetch('/api/v1/messaging/config');
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setError('⚠️ Messaging Config API not yet implemented - UI demonstration mode');
        setAccounts([
          {
            f100: 'demo1',
            f109: 'Demo SMS Account',
            f110: 'SMS',
            f120: 0,
            f120s: 'Active',
            f120s_bkcolor: '#00ff00',
            f130: '2',
            STAT: [{ f120: 'Connected and ready' }]
          }
        ]);
        setLoading(false);
        return;
      }
 
      const data = await response.json();
      
      // Process accounts
      const smsAccounts = (data.DATS || [])
        .filter((acc: SmsAccount) => acc.f110 === 'SMS')
        .map((acc: SmsAccount) => {
          const status = acc.f120 || 0;
          acc.f120s = (status & 1) === 1 ? 'Hold' : 'Active';
          acc.f120s_bkcolor = (status & 1) === 1 ? '#ff8080' : '#00ff00';
          return acc;
        });
      
      setAccounts(smsAccounts);
      setError('');
    } catch (err) {
      console.error('Error loading accounts:', err);
      setError('Failed to load accounts. Using demo mode.');
      setAccounts([
        {
          f100: 'demo1',
          f109: 'Demo SMS Account',
          f110: 'SMS',
          f120: 0,
          f120s: 'Active',
          f120s_bkcolor: '#00ff00',
          f130: '2',
          STAT: [{ f120: 'Connected and ready' }]
        }
      ]);
    } finally {
      setLoading(false);
    }
  };
 
  const createNewAccount = async () => {
    try {
      const payload: any = {
        f8_s: 'messaging.config.edit',
        f11_B: 'I',
        f109_s: newAccountForm.name,
        f110_s: accountType,
      };
 
      if (accountType === 'SMTP' || accountType === 'POP3' || accountType === 'FTP') {
        payload.f101_s = newAccountForm.server;
        payload.f102_s = newAccountForm.port;
        payload.f103_s = newAccountForm.username;
        payload.f104_s = newAccountForm.password;
      } else if (accountType === 'UPLOAD') {
        payload.f101_s = newAccountForm.directory;
      } else if (accountType === 'SMS') {
        payload.f103_s = newAccountForm.smsEmail;
        payload.f130_E = newAccountForm.smsProvider;
      }
 
      const response = await fetch('/api/v1/messaging/config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
 
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        alert('⚠️ Account creation API not yet implemented. In production, this would create the account.');
      } else {
        await response.json();
        alert('Account created successfully');
      }
 
      closeAllModals();
      setTimeout(loadAccounts, 100);
    } catch (err) {
      console.error('Error creating account:', err);
      alert('Failed to create account');
    }
  };
 
  const sendTestMessage = async () => {
    if (!selectedAccount || !testTarget || !testMessage) return;
 
    try {
      const response = await fetch('/api/v1/messaging/config', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          f8_s: 'messaging.config.edit',
          f11_B: 'E',
          f100_s: selectedAccount.f100,
          f200_s: testTarget,
          f201_s: testMessage,
        }),
      });
 
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        alert('⚠️ Test message API not yet implemented. In production, this would send: "' + testMessage.substring(0, 50) + '..." to ' + testTarget);
      } else {
        await response.json();
        alert('Test message queued successfully');
      }
 
      closeAllModals();
    } catch (err) {
      console.error('Error sending test:', err);
      alert('Failed to send test message');
    }
  };
 
  const toggleAccountStatus = async (account: SmsAccount, holdStatus: number) => {
    try {
      const response = await fetch('/api/v1/messaging/config', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          f8_s: 'messaging.config.edit',
          f11_B: 'E',
          f100_s: account.f100,
          f120_E: holdStatus,
        }),
      });
 
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        alert(`⚠️ Status change API not yet implemented. In production, this would ${holdStatus === 1 ? 'hold' : 'activate'} the account.`);
      } else {
        await response.json();
      }
 
      setTimeout(loadAccounts, 100);
    } catch (err) {
      console.error('Error toggling status:', err);
      alert('Failed to update account status');
    }
  };
 
  const openControlPanel = async (account: SmsAccount) => {
    setSelectedAccount(account);
    setShowControlPanelModal(true);
    setControlPanelStatus('Contacting Server, please wait...');
 
    try {
      const response = await fetch('/api/v1/messaging/sms/control', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          f8_s: 'messaging.sms.control',
          f11_B: 'E',
          f100_s: account.f100,
          f102_E: 1,
        }),
      });
 
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setControlPanelStatus('⚠️ Control panel API not yet implemented. In production, this would open the SMS provider control panel.');
        return;
      }
 
      const data = await response.json();
      const url = data.f130 || '';
      
      if (url.length > 8) {
        window.open(url, '_blank');
        closeAllModals();
      } else {
        setControlPanelStatus('Unable to connect to server at this time. Please try again later');
      }
    } catch (err) {
      console.error('Error opening control panel:', err);
      setControlPanelStatus('Error connecting to control panel');
    }
  };
 
  const closeAllModals = () => {
    setShowNewAccountModal(false);
    setShowTestModal(false);
    setShowLogModal(false);
    setShowControlPanelModal(false);
    setSelectedAccount(null);
    setNewAccountForm({
      name: '',
      server: '',
      port: '',
      username: '',
      password: '',
      directory: '',
      smsProvider: '0',
      smsEmail: '',
    });
  };
 
  const openTestModal = (account: SmsAccount) => {
    setSelectedAccount(account);
    setShowTestModal(true);
  };
 
  const openLogModal = (account: SmsAccount) => {
    setSelectedAccount(account);
    setShowLogModal(true);
  };
 
  const selectedProvider = SMS_PROVIDERS.find(p => p.value === newAccountForm.smsProvider);
 
  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 p-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center py-12">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-[#00946b]"></div>
            <p className="mt-2 text-gray-600">Loading accounts...</p>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <div>
              <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">💬 Txt Messaging Options</h1>
            </div>
            <button
              onClick={() => setShowNewAccountModal(true)}
              className="bg-[#00946b] text-white px-6 py-3 rounded-lg hover:bg-[#007055] font-medium transition-colors"
            >
              + Add New Account
            </button>
          </div>
          
          {error && (
            <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
              <p className="text-yellow-700">{error}</p>
            </div>
          )}
        </div>
 
        {/* Accounts Table */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <h2 className="text-xl font-semibold text-gray-900">Current SMS Accounts</h2>
          </div>
          
          <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">Account Name</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</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">Current State</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {accounts.length === 0 ? (
                  <tr>
                    <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
                      No SMS accounts configured. Click "Add New Account" to create one.
                    </td>
                  </tr>
                ) : (
                  accounts.map((account) => (
                    <tr key={account.f100} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">{account.f109}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-700">{account.f110}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span
                          className="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                          style={{ backgroundColor: account.f120s_bkcolor, color: account.f120s === 'Active' ? '#000' : '#fff' }}
                        >
                          {account.f120s}
                        </span>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-700">{account.STAT?.[0]?.f120 || 'Ready'}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm">
                        <div className="flex flex-wrap gap-2">
                          <button
                            onClick={() => openControlPanel(account)}
                            className="text-[#00946b] hover:text-[#007055] font-medium border border-[#00946b] px-3 py-1 rounded hover:bg-[#00946b] hover:text-white transition-colors"
                          >
                            Control Panel
                          </button>
                          <button
                            onClick={() => openTestModal(account)}
                            className="text-blue-600 hover:text-blue-800 font-medium border border-blue-600 px-3 py-1 rounded hover:bg-blue-600 hover:text-white transition-colors"
                          >
                            Test
                          </button>
                          <button
                            onClick={() => openLogModal(account)}
                            className="text-gray-600 hover:text-gray-800 font-medium border border-gray-400 px-3 py-1 rounded hover:bg-gray-600 hover:text-white transition-colors"
                          >
                            View Log
                          </button>
                          {account.f120s === 'Active' ? (
                            <button
                              onClick={() => toggleAccountStatus(account, 1)}
                              className="text-orange-600 hover:text-orange-800 font-medium border border-orange-600 px-3 py-1 rounded hover:bg-orange-600 hover:text-white transition-colors"
                            >
                              Place on Hold
                            </button>
                          ) : (
                            <button
                              onClick={() => toggleAccountStatus(account, 0)}
                              className="text-green-600 hover:text-green-800 font-medium border border-green-600 px-3 py-1 rounded hover:bg-green-600 hover:text-white transition-colors"
                            >
                              Set Active
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
 
      {/* New Account Modal */}
      {showNewAccountModal && (
        <div className="modal-overlay" onClick={closeAllModals}>
          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
            <div className="bg-[#00946b] text-white px-6 py-4 rounded-t-lg flex justify-between items-center">
              <h2 className="text-xl font-semibold">Add New Messaging Account</h2>
              <button onClick={closeAllModals} className="text-white hover:text-gray-200 text-2xl">×</button>
            </div>
            
            <div className="p-6">
              <div className="mb-6">
                <p className="text-gray-600 mb-4">Select the type of account to create:</p>
                <div className="flex gap-2 border-b border-gray-200 mb-4">
                  {['SMTP', 'POP3', 'UPLOAD', 'FTP', 'SMS'].map((type) => (
                    <button
                      key={type}
                      onClick={() => setAccountType(type as any)}
                      className={`px-4 py-2 font-medium transition-colors ${
                        accountType === type
                          ? 'border-b-2 border-[#00946b] text-[#00946b]'
                          : 'text-gray-600 hover:text-gray-900'
                      }`}
                    >
                      {type === 'SMTP' && 'SMTP (Send Email)'}
                      {type === 'POP3' && 'POP3 (Receive Email)'}
                      {type === 'UPLOAD' && 'Upload Folder'}
                      {type === 'FTP' && 'FTP'}
                      {type === 'SMS' && 'SMS/Txt'}
                    </button>
                  ))}
                </div>
              </div>
 
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Account Name</label>
                  <input
                    type="text"
                    value={newAccountForm.name}
                    onChange={(e) => setNewAccountForm({ ...newAccountForm, name: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                    placeholder="Enter account name"
                  />
                </div>
 
                {accountType === 'SMS' && (
                  <>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">SMS Provider</label>
                      <select
                        value={newAccountForm.smsProvider}
                        onChange={(e) => setNewAccountForm({ ...newAccountForm, smsProvider: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                      >
                        {SMS_PROVIDERS.map((provider) => (
                          <option key={provider.value} value={provider.value}>{provider.label}</option>
                        ))}
                      </select>
                      {selectedProvider && selectedProvider.description && (
                        <p className="mt-2 text-sm text-gray-600">{selectedProvider.description}</p>
                      )}
                    </div>
                    
                    {selectedProvider?.requiresEmail && (
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                        <input
                          type="email"
                          value={newAccountForm.smsEmail}
                          onChange={(e) => setNewAccountForm({ ...newAccountForm, smsEmail: e.target.value })}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                          placeholder="sms@provider.com"
                        />
                      </div>
                    )}
                    
                    <div className="bg-blue-50 border-l-4 border-blue-400 p-4">
                      <p className="text-sm text-blue-700">
                        SMS allows you to send Txt messages from within the POS. Charges per message sent may apply.
                      </p>
                    </div>
                  </>
                )}
 
                {(accountType === 'SMTP' || accountType === 'POP3' || accountType === 'FTP') && (
                  <>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Server Address</label>
                      <input
                        type="text"
                        value={newAccountForm.server}
                        onChange={(e) => setNewAccountForm({ ...newAccountForm, server: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                        placeholder="mail.example.com"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Port</label>
                      <input
                        type="text"
                        value={newAccountForm.port}
                        onChange={(e) => setNewAccountForm({ ...newAccountForm, port: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                        placeholder={accountType === 'SMTP' ? '587' : accountType === 'POP3' ? '995' : '21'}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
                      <input
                        type="text"
                        value={newAccountForm.username}
                        onChange={(e) => setNewAccountForm({ ...newAccountForm, username: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                        placeholder="username"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                      <input
                        type="password"
                        value={newAccountForm.password}
                        onChange={(e) => setNewAccountForm({ ...newAccountForm, password: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                        placeholder="••••••••"
                      />
                    </div>
                  </>
                )}
 
                {accountType === 'UPLOAD' && (
                  <>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Local Directory on Server</label>
                      <input
                        type="text"
                        value={newAccountForm.directory}
                        onChange={(e) => setNewAccountForm({ ...newAccountForm, directory: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                        placeholder="C:\uploads"
                      />
                    </div>
                    <div className="bg-blue-50 border-l-4 border-blue-400 p-4">
                      <p className="text-sm text-blue-700">
                        An Upload account is a folder that is read on the local machine and any transactions present are automatically applied. 
                        This is sometimes used when interfacing other systems.
                      </p>
                    </div>
                  </>
                )}
              </div>
 
              <div className="mt-6 flex justify-end gap-3">
                <button
                  onClick={closeAllModals}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={createNewAccount}
                  disabled={!newAccountForm.name}
                  className="px-4 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007055] disabled:bg-gray-400 disabled:cursor-not-allowed"
                >
                  Create Account
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
 
      {/* Test Modal */}
      {showTestModal && selectedAccount && (
        <div className="modal-overlay" onClick={closeAllModals}>
          <div className="bg-white rounded-lg shadow-xl max-w-lg w-full" onClick={(e) => e.stopPropagation()}>
            <div className="bg-[#00946b] text-white px-6 py-4 rounded-t-lg flex justify-between items-center">
              <h2 className="text-xl font-semibold">{selectedAccount.f109} - Test</h2>
              <button onClick={closeAllModals} className="text-white hover:text-gray-200 text-2xl">×</button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                  <input
                    type="text"
                    value={testTarget}
                    onChange={(e) => setTestTarget(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                    placeholder="6421234567"
                  />
                  <p className="mt-1 text-sm text-gray-600">
                    Enter the full phone number including the country code. eg. To Txt a New Zealand phone, prefix the number with &apos;64&apos;
                  </p>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
                  <textarea
                    value={testMessage}
                    onChange={(e) => setTestMessage(e.target.value)}
                    rows={4}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                  />
                </div>
                
                <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                  <p className="text-sm text-yellow-700">
                    The system automatically blocks sending the exact same message to a phone number within a reasonable time frame.
                    You may need to slightly change the message in order to send a message.
                  </p>
                </div>
              </div>
 
              <div className="mt-6 flex justify-end gap-3">
                <button
                  onClick={closeAllModals}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={sendTestMessage}
                  disabled={!testTarget || !testMessage}
                  className="px-4 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007055] disabled:bg-gray-400 disabled:cursor-not-allowed"
                >
                  Send Txt Message
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
 
      {/* Log Modal */}
      {showLogModal && selectedAccount && (
        <div className="modal-overlay" onClick={closeAllModals}>
          <div className="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[80vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
            <div className="bg-[#00946b] text-white px-6 py-4 rounded-t-lg flex justify-between items-center">
              <h2 className="text-xl font-semibold">{selectedAccount.f109} - Log</h2>
              <button onClick={closeAllModals} className="text-white hover:text-gray-200 text-2xl">×</button>
            </div>
            
            <div className="p-6">
              <p className="text-sm text-gray-600 mb-4">Log reads bottom to top. Most recent entries are at the top</p>
              
              <div className="bg-gray-50 border border-gray-200 rounded-md">
                {selectedAccount.STAT?.[0]?.TRCE && selectedAccount.STAT[0].TRCE.length > 0 ? (
                  <table className="min-w-full">
                    <tbody className="divide-y divide-gray-200">
                      {[...selectedAccount.STAT[0].TRCE].reverse().map((entry, idx) => (
                        <tr key={idx} className="hover:bg-gray-100">
                          <td className="px-4 py-3 text-sm text-gray-700">{entry.f110}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : (
                  <div className="px-4 py-8 text-center text-gray-500">
                    No Log Entries
                  </div>
                )}
              </div>
 
              <div className="mt-6 flex justify-end">
                <button
                  onClick={closeAllModals}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
 
      {/* Control Panel Modal */}
      {showControlPanelModal && selectedAccount && (
        <div className="modal-overlay" onClick={closeAllModals}>
          <div className="bg-white rounded-lg shadow-xl max-w-lg w-full" onClick={(e) => e.stopPropagation()}>
            <div className="bg-[#00946b] text-white px-6 py-4 rounded-t-lg flex justify-between items-center">
              <h2 className="text-xl font-semibold">{selectedAccount.f109} Control Panel</h2>
              <button onClick={closeAllModals} className="text-white hover:text-gray-200 text-2xl">×</button>
            </div>
            
            <div className="p-6">
              <div className="flex items-center gap-3 text-gray-700">
                {controlPanelStatus.includes('⚠️') ? (
                  <span>⚠️</span>
                ) : (
                  <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-[#00946b]"></div>
                )}
                <p>{controlPanelStatus}</p>
              </div>
 
              <div className="mt-6 flex justify-end">
                <button
                  onClick={closeAllModals}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}