page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from "react";
import Link from "next/link";
 
interface MessagingAccount {
  f100: string; // Account ID
  f109: string; // Account Name
  f110: string; // Type (SMTP, POP3, IMAP, SMS, FTP, UPLOAD, AWSS3)
  f101?: string; // Server
  f102?: string; // Port
  f103?: string; // User/Email
  f104?: string; // Password
  f111?: string; // Auth schemes
  f112?: string; // From Name
  f118?: string; // Reply To
  f120?: number; // Status flags (1=hold)
  f120s?: string; // Status string
  f120s_bkcolor?: string; // Status background color
  f128?: number; // Well known server ID
  f129?: string; // Account headers
  f130?: string; // Provider type (for SMS) or FTP folder
  f131?: string; // File types (FTP)
  f132?: string; // Output folder (FTP)
  f133?: string; // API Key (SMS)
  f134?: string; // API Secret (SMS)
  f140?: string; // Bucket name (S3) or Country code (SMS)
  f141?: string; // Access key (S3)
  f142?: string; // Secret key (S3)
  f143?: string; // Region (S3)
  f160?: string; // Max per hour
  f190?: number; // Transactional email flag
  f191?: number; // Bulk email flag
  f192?: number; // Confirm TX flag
  f193?: number; // Save message flag
  f280?: string; // Network password
  f300?: number; // Used for transactions (UPLOAD)
  f301?: number; // Used for images (UPLOAD)
  f310?: string; // Allow list (SMS)
  f311?: string; // Block list (SMS)
  STAT?: any; // Status/log data
}
 
type AccountType = "SMTP" | "POP3" | "IMAP" | "SMS" | "FTP" | "UPLOAD" | "AWSS3";
 
export default function ConfigureAccountsPage() {
  const [accounts, setAccounts] = useState<MessagingAccount[]>([]);
  const [loading, setLoading] = useState(true);
  const [showNewAccountModal, setShowNewAccountModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [selectedAccount, setSelectedAccount] = useState<MessagingAccount | null>(null);
  const [newAccountType, setNewAccountType] = useState<AccountType | null>(null);
 
  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");
      const data = await response.json();
      
      if (data.success && data.data?.DATS) {
        const accountsList = Array.isArray(data.data.DATS) ? data.data.DATS : [data.data.DATS];
        
        // Process accounts
        const processed = accountsList.map((acc: MessagingAccount) => {
          const status = acc.f120 || 0;
          if (status & 1) {
            acc.f120s = "Hold";
            acc.f120s_bkcolor = "#ff8080";
          } else {
            acc.f120s = "Active";
            acc.f120s_bkcolor = "#00ff00";
          }
          
          // Mark known internally
          if (acc.f128 && acc.f128 !== 9998 && acc.f128 !== 9999) {
            acc.f101 = "Known Internally";
          }
          
          return acc;
        });
        
        setAccounts(processed);
      }
    } catch (error) {
      console.error("Error loading accounts:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const handleCreateAccount = () => {
    setShowNewAccountModal(true);
  };
 
  const handleEditAccount = (account: MessagingAccount) => {
    setSelectedAccount(account);
    setShowEditModal(true);
  };
 
  const handleSetStatus = async (account: MessagingAccount, hold: boolean) => {
    try {
      await fetch("/api/v1/messaging/config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          f100: account.f100,
          f120: hold ? 1 : 0,
        }),
      });
      
      setTimeout(loadAccounts, 1000);
    } catch (error) {
      console.error("Error updating status:", error);
    }
  };
 
  const getAccountInfo = (account: MessagingAccount) => {
    const info: string[] = [];
    if (account.f110 === "SMTP") {
      if (account.f190 && account.f190 > 0) info.push("Txn Email");
      if (account.f191 && account.f191 > 0) info.push("Bulk Email");
      if (account.f192 && account.f192 > 0) info.push("Confirm TX");
      if (account.f193 && account.f193 > 0) info.push("Save Message");
    }
    return info.join(", ");
  };
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <Link href="/marketing" className="text-gray-600 hover:text-gray-800">
              Marketing
            </Link>
            <span className="text-gray-400">/</span>
            <Link href="/marketing/messaging" className="text-gray-600 hover:text-gray-800">
              Email & Interfaces
            </Link>
            <span className="text-gray-400">/</span>
            <span className="text-gray-900 font-semibold">Configure Accounts</span>
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Messaging Configuration</h1>
          <p className="text-gray-600 text-sm">
            Manage email, SMS, and interface accounts for external communications
          </p>
        </div>
 
        {/* New Account Button */}
        <div className="mb-6">
          <button
            onClick={handleCreateAccount}
            className="px-6 py-3 bg-[#00946b] text-white rounded-lg hover:bg-[#007555] transition shadow-md flex items-center gap-2"
          >
            <span className="text-xl">➕</span>
            New Account
          </button>
        </div>
 
        {/* Accounts Table */}
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="overflow-x-auto">
            {loading ? (
              <div className="p-8 text-center text-gray-600">Loading accounts...</div>
            ) : accounts.length === 0 ? (
              <div className="p-8 text-center text-gray-500">
                No accounts configured. Click "New Account" to create one.
              </div>
            ) : (
              <table className="w-full text-sm">
                <thead className="bg-gray-50 border-b border-gray-200">
                  <tr>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">Account Name</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">Type</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">Server</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">Port</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">User</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">Info</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">Status</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {accounts.map((account, idx) => (
                    <tr key={idx} className="border-b border-gray-100 hover:bg-gray-50">
                      <td className="px-4 py-3 font-medium text-gray-900">{account.f109}</td>
                      <td className="px-4 py-3 text-gray-700">
                        <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-medium">
                          {account.f110}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-gray-700 font-mono text-xs">{account.f101 || "-"}</td>
                      <td className="px-4 py-3 text-gray-700">{account.f102 || "-"}</td>
                      <td className="px-4 py-3 text-gray-700 font-mono text-xs truncate max-w-xs">
                        {account.f103 || "-"}
                      </td>
                      <td className="px-4 py-3 text-gray-600 text-xs">{getAccountInfo(account)}</td>
                      <td className="px-4 py-3">
                        <span
                          className="px-3 py-1 rounded-full text-xs font-medium"
                          style={{ backgroundColor: account.f120s_bkcolor, color: "#000" }}
                        >
                          {account.f120s}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex gap-2">
                          <button
                            onClick={() => handleEditAccount(account)}
                            className="px-3 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700"
                          >
                            Edit
                          </button>
                          {account.f120s === "Hold" ? (
                            <button
                              onClick={() => handleSetStatus(account, false)}
                              className="px-3 py-1 bg-green-600 text-white rounded text-xs hover:bg-green-700"
                            >
                              Activate
                            </button>
                          ) : (
                            <button
                              onClick={() => handleSetStatus(account, true)}
                              className="px-3 py-1 bg-orange-600 text-white rounded text-xs hover:bg-orange-700"
                            >
                              Hold
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
 
        {/* New Account Modal */}
        {showNewAccountModal && (
          <NewAccountModal
            onClose={() => setShowNewAccountModal(false)}
            onSuccess={() => {
              setShowNewAccountModal(false);
              setTimeout(loadAccounts, 1000);
            }}
          />
        )}
 
        {/* Edit Account Modal */}
        {showEditModal && selectedAccount && (
          <EditAccountModal
            account={selectedAccount}
            onClose={() => {
              setShowEditModal(false);
              setSelectedAccount(null);
            }}
            onSuccess={() => {
              setShowEditModal(false);
              setSelectedAccount(null);
              setTimeout(loadAccounts, 1000);
            }}
          />
        )}
      </div>
    </div>
  );
}
 
// New Account Modal Component
function NewAccountModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
  const [accountType, setAccountType] = useState<AccountType>("SMTP");
  const [formData, setFormData] = useState<any>({});
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      await fetch("/api/v1/messaging/config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...formData,
          f110: accountType,
        }),
      });
      
      onSuccess();
    } catch (error) {
      console.error("Error creating account:", error);
      alert("Failed to create account");
    }
  };
 
  return (
    <div className="modal-overlay">
      <div className="modal-content bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div className="sticky top-0 bg-[#5094fb] text-white p-4 rounded-t-lg flex justify-between items-center">
          <h2 className="text-xl font-bold">Add New Messaging Account</h2>
          <button onClick={onClose} className="text-white hover:text-gray-200 text-2xl leading-none">
            ×
          </button>
        </div>
 
        <div className="p-6">
          {/* Account Type Tabs */}
          <div className="flex gap-2 mb-6 flex-wrap">
            {(["SMTP", "IMAP", "POP3", "SMS", "FTP", "UPLOAD", "AWSS3"] as AccountType[]).map((type) => (
              <button
                key={type}
                onClick={() => setAccountType(type)}
                className={`px-4 py-2 rounded ${
                  accountType === type
                    ? "bg-[#5094fb] text-white"
                    : "bg-gray-200 text-gray-700 hover:bg-gray-300"
                }`}
              >
                {type}
              </button>
            ))}
          </div>
 
          <form onSubmit={handleSubmit}>
            <AccountForm
              accountType={accountType}
              formData={formData}
              onChange={(data) => setFormData(data)}
              isNew={true}
            />
 
            <div className="mt-6 flex gap-3">
              <button
                type="submit"
                className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007555]"
              >
                Create {accountType}
              </button>
              <button
                type="button"
                onClick={onClose}
                className="px-6 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}
 
// Edit Account Modal Component
function EditAccountModal({
  account,
  onClose,
  onSuccess,
}: {
  account: MessagingAccount;
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [formData, setFormData] = useState<any>(account);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      await fetch("/api/v1/messaging/config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });
      
      onSuccess();
    } catch (error) {
      console.error("Error updating account:", error);
      alert("Failed to update account");
    }
  };
 
  return (
    <div className="modal-overlay">
      <div className="modal-content bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
        <div className="sticky top-0 bg-[#00946b] text-white p-4 rounded-t-lg flex justify-between items-center">
          <h2 className="text-xl font-bold">{account.f109}</h2>
          <button onClick={onClose} className="text-white hover:text-gray-200 text-2xl leading-none">
            ×
          </button>
        </div>
 
        <div className="p-6">
          <form onSubmit={handleSubmit}>
            <AccountForm
              accountType={account.f110 as AccountType}
              formData={formData}
              onChange={(data) => setFormData(data)}
              isNew={false}
            />
 
            <div className="mt-6 flex gap-3">
              <button
                type="submit"
                className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007555]"
              >
                Save Changes
              </button>
              <button
                type="button"
                onClick={onClose}
                className="px-6 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}
 
// Reusable Account Form Component
function AccountForm({
  accountType,
  formData,
  onChange,
  isNew,
}: {
  accountType: AccountType;
  formData: any;
  onChange: (data: any) => void;
  isNew: boolean;
}) {
  const updateField = (field: string, value: any) => {
    onChange({ ...formData, [field]: value });
  };
 
  return (
    <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={formData.f109 || ""}
          onChange={(e) => updateField("f109", e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
          required
        />
      </div>
 
      {(accountType === "SMTP" || accountType === "POP3" || accountType === "IMAP") && (
        <>
          {(accountType === "SMTP" || accountType === "POP3") && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Well Known Server</label>
              <select
                value={formData.f128 || ""}
                onChange={(e) => updateField("f128", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
              >
                <option value="">Custom</option>
                <option value="1">Microsoft Office 365</option>
                <option value="2">Outlook.com</option>
                <option value="9998">Microsoft Exchange Online</option>
                <option value="12003">iServe.net.nz</option>
                <option value="9999">Corporate Connector</option>
              </select>
            </div>
          )}
 
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Server</label>
              <input
                type="text"
                value={formData.f101 || ""}
                onChange={(e) => updateField("f101", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Port</label>
              <input
                type="text"
                value={formData.f102 || ""}
                onChange={(e) => updateField("f102", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
          </div>
 
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">User/Email</label>
            <input
              type="text"
              value={formData.f103 || ""}
              onChange={(e) => updateField("f103", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            />
          </div>
 
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <input
              type="password"
              value={formData.f104 || ""}
              onChange={(e) => updateField("f104", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            />
          </div>
 
          {accountType === "SMTP" && (
            <>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">From Name</label>
                <input
                  type="text"
                  value={formData.f112 || ""}
                  onChange={(e) => updateField("f112", e.target.value)}
                  placeholder="My Store <email@example.com>"
                  className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                />
              </div>
 
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Reply To</label>
                <input
                  type="text"
                  value={formData.f118 || ""}
                  onChange={(e) => updateField("f118", e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                />
              </div>
 
              <div className="space-y-2">
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={formData.f190 !== undefined ? formData.f190 > 0 : true}
                    onChange={(e) => updateField("f190", e.target.checked ? 1 : 0)}
                    className="rounded"
                  />
                  <span className="text-sm text-gray-700">Transactional emails (Receipts, POs, etc.)</span>
                </label>
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={formData.f191 > 0}
                    onChange={(e) => updateField("f191", e.target.checked ? 1 : 0)}
                    className="rounded"
                  />
                  <span className="text-sm text-gray-700">Bulk marketing emails</span>
                </label>
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={formData.f192 > 0}
                    onChange={(e) => updateField("f192", e.target.checked ? 1 : 0)}
                    className="rounded"
                  />
                  <span className="text-sm text-gray-700">Send BCC to Fieldpine for confirmation</span>
                </label>
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={formData.f193 > 0}
                    onChange={(e) => updateField("f193", e.target.checked ? 1 : 0)}
                    className="rounded"
                  />
                  <span className="text-sm text-gray-700">Save sent email body</span>
                </label>
              </div>
            </>
          )}
        </>
      )}
 
      {accountType === "SMS" && (
        <>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">SMS Provider</label>
            <select
              value={formData.f130 || ""}
              onChange={(e) => updateField("f130", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            >
              <option value="">--Select One--</option>
              <option value="2">Fieldpine Gateway</option>
              <option value="1">Email Gateway</option>
              <option value="3">Output to File</option>
              <option value="4">Burst SMS</option>
              <option value="6401">NZ. Spark eTxt</option>
            </select>
          </div>
 
          {formData.f130 === "4" && (
            <>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">API Key</label>
                <input
                  type="text"
                  value={formData.f133 || ""}
                  onChange={(e) => updateField("f133", e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">API Secret</label>
                <input
                  type="password"
                  value={formData.f134 || ""}
                  onChange={(e) => updateField("f134", e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                />
              </div>
            </>
          )}
        </>
      )}
 
      {accountType === "FTP" && (
        <>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Server</label>
              <input
                type="text"
                value={formData.f101 || ""}
                onChange={(e) => updateField("f101", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Port</label>
              <input
                type="text"
                value={formData.f102 || ""}
                onChange={(e) => updateField("f102", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
              <input
                type="text"
                value={formData.f103 || ""}
                onChange={(e) => updateField("f103", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
              <input
                type="password"
                value={formData.f104 || ""}
                onChange={(e) => updateField("f104", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
          </div>
        </>
      )}
 
      {accountType === "UPLOAD" && (
        <>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Local Directory</label>
            <input
              type="text"
              value={formData.f101 || ""}
              onChange={(e) => updateField("f101", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            />
          </div>
          <div className="space-y-2">
            <label className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={formData.f300 > 0}
                onChange={(e) => updateField("f300", e.target.checked ? 1 : 0)}
                className="rounded"
              />
              <span className="text-sm text-gray-700">Used for transactions</span>
            </label>
            <label className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={formData.f301 > 0}
                onChange={(e) => updateField("f301", e.target.checked ? 1 : 0)}
                className="rounded"
              />
              <span className="text-sm text-gray-700">Used for images</span>
            </label>
          </div>
        </>
      )}
 
      {accountType === "AWSS3" && (
        <>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Bucket Name</label>
            <input
              type="text"
              value={formData.f140 || ""}
              onChange={(e) => updateField("f140", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Access Key</label>
            <input
              type="text"
              value={formData.f141 || ""}
              onChange={(e) => updateField("f141", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Secret Key</label>
            <input
              type="password"
              value={formData.f142 || ""}
              onChange={(e) => updateField("f142", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Region</label>
            <input
              type="text"
              value={formData.f143 || ""}
              onChange={(e) => updateField("f143", e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
            />
          </div>
        </>
      )}
    </div>
  );
}