page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { fieldpineServerApi } from "@/lib/server/fieldpineApi";
 
interface EmailLog {
  f108: string; // Account
  f109: string; // Send Date
  f111: string; // To
  f112: string; // Message/Subject (fallback)
  f132: string; // Subject
  f133: string; // Confirmed delivered
  f141?: number; // Bounce flag
}
 
interface SmsLog {
  f108: string; // Account
  f109: string; // Date
  f111: string; // Phone
  f112: string; // Message
  f400?: number; // Status (1=sent, other=failed)
  f401?: string; // Status string
  f402?: string; // ISP Response (JSON)
  f420?: string; // Delivered date
  f421?: string; // Hard bounce
  f422?: string; // Soft bounce
  f423?: string; // Replied
  f426?: number; // Direction (1=sent, 2=received)
}
 
export default function MessagingPage() {
  const [activeTab, setActiveTab] = useState<"email" | "sms">("email");
  const [emailLogs, setEmailLogs] = useState<EmailLog[]>([]);
  const [smsLogs, setSmsLogs] = useState<SmsLog[]>([]);
  const [loading, setLoading] = useState(false);
  
  // Email filters
  const [emailFromDate, setEmailFromDate] = useState("");
  const [emailToDate, setEmailToDate] = useState("");
  
  // SMS filters
  const [smsRowLimit, setSmsRowLimit] = useState(500);
  const [smsShowSent, setSmsShowSent] = useState(true);
  const [smsShowReceived, setSmsShowReceived] = useState(true);
 
  useEffect(() => {
    loadEmailLogs();
  }, [emailFromDate, emailToDate]);
 
  useEffect(() => {
    if (activeTab === "sms" && smsLogs.length === 0) {
      loadSmsLogs();
    }
  }, [activeTab]);
 
  const loadEmailLogs = async () => {
    try {
      setLoading(true);
      const params: Record<string, string> = {};
      
      if (emailFromDate) params["101"] = emailFromDate;
      if (emailToDate) params["102"] = emailToDate;
 
      const response = await fetch("/api/v1/messaging/email/sendlog?" + new URLSearchParams(params));
      const data = await response.json();
      
      if (data.success && data.data?.DATS) {
        setEmailLogs(data.data.DATS);
      }
    } catch (error) {
      console.error("Error loading email logs:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const loadSmsLogs = async () => {
    try {
      setLoading(true);
      const params: Record<string, string> = {
        "8": smsRowLimit.toString(),
      };
      
      let onlyFilter = 0;
      if (smsShowSent) onlyFilter |= 1;
      if (smsShowReceived) onlyFilter |= 2;
      if (onlyFilter > 0 && onlyFilter !== 3) {
        params["160"] = onlyFilter.toString();
      }
 
      const response = await fetch("/api/v1/messaging/sms/sendlog?" + new URLSearchParams(params));
      const data = await response.json();
      
      if (data.success && data.data?.DATS) {
        setSmsLogs(data.data.DATS);
      }
    } catch (error) {
      console.error("Error loading SMS logs:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const formatDate = (dateStr: string) => {
    if (!dateStr) return "";
    const date = new Date(dateStr);
    return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };
 
  const getIspError = (jsonStr: string) => {
    try {
      const data = JSON.parse(jsonStr);
      if (data.error?.description) {
        const desc = data.error.description;
        return typeof desc === 'object' ? (desc.reason || JSON.stringify(desc)) : desc;
      }
    } catch {
      return "";
    }
    return "";
  };
 
  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>
            <span className="text-gray-900 font-semibold">Email & Interfaces</span>
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Email &amp; Interfaces</h1>
          <p className="text-gray-600 text-sm">
            Email and Interfaces is all about external communications in and out of the POS. It covers email and Txt messaging, 
            and also more technical aspects such as FTP or automatic upload folders.
          </p>
        </div>
 
        {/* Action Tiles */}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 mb-8">
          <Link href="/marketing/messaging/configure" className="bg-white rounded-lg border-2 border-[#00946b] shadow-md p-4 text-center hover:shadow-lg transition">
            <div className="text-4xl mb-2">⚙️</div>
            <span className="text-sm font-medium text-gray-900 hover:text-[#00946b]">
              Configure Accounts
            </span>
          </Link>
 
          <Link href="/marketing/messaging/bulk-email" className="bg-white rounded-lg border-2 border-[#00946b] shadow-md p-4 text-center hover:shadow-lg transition">
            <div className="text-4xl mb-2">📧</div>
            <span className="text-sm font-medium text-gray-900 hover:text-[#00946b]">
              Send Bulk Email
            </span>
          </Link>
 
          <Link href="/marketing/messaging/bulk-sms" className="bg-white rounded-lg border-2 border-[#00946b] shadow-md p-4 text-center hover:shadow-lg transition">
            <div className="text-4xl mb-2">💬</div>
            <span className="text-sm font-medium text-gray-900 hover:text-[#00946b]">
              Send Bulk SMS
            </span>
          </Link>
 
          <Link href="/marketing/messaging/txt-options" className="bg-white rounded-lg border-2 border-[#00946b] shadow-md p-4 text-center hover:shadow-lg transition">
            <div className="text-4xl mb-2">📱</div>
            <span className="text-sm font-medium text-gray-900 hover:text-[#00946b]">
              Txt Options
            </span>
          </Link>
 
          <Link href="/marketing/messaging/api-users" className="bg-white rounded-lg border-2 border-[#00946b] shadow-md p-4 text-center hover:shadow-lg transition">
            <div className="text-4xl mb-2">🔑</div>
            <span className="text-sm font-medium text-gray-900 hover:text-[#00946b]">
              API Users
            </span>
          </Link>
 
          <Link href="/marketing/messaging/pending" className="bg-white rounded-lg border-2 border-[#00946b] shadow-md p-4 text-center hover:shadow-lg transition">
            <div className="text-4xl mb-2">⏳</div>
            <span className="text-sm font-medium text-gray-900 hover:text-[#00946b]">
              Pending Messages
            </span>
          </Link>
 
          <Link href="/marketing/messaging/inbound" className="bg-white rounded-lg border-2 border-[#00946b] shadow-md p-4 text-center hover:shadow-lg transition">
            <div className="text-4xl mb-2">📥</div>
            <div className="text-sm font-medium text-gray-900 hover:text-[#00946b]">
              Inbound Messages
            </div>
          </Link>
        </div>
 
        {/* Recent Activity Section */}
        <div className="bg-white rounded-lg shadow-md">
          <div className="border-b border-gray-200">
            <h2 className="text-2xl font-bold text-gray-900 p-6">Recent Activity</h2>
            <div className="flex border-t border-gray-200">
              <button
                onClick={() => setActiveTab("email")}
                className={`px-6 py-3 font-medium transition ${
                  activeTab === "email"
                    ? "bg-white text-[#00946b] border-b-2 border-[#00946b]"
                    : "bg-gray-50 text-gray-600 hover:text-gray-900"
                }`}
              >
                Email
              </button>
              <button
                onClick={() => setActiveTab("sms")}
                className={`px-6 py-3 font-medium transition ${
                  activeTab === "sms"
                    ? "bg-white text-[#00946b] border-b-2 border-[#00946b]"
                    : "bg-gray-50 text-gray-600 hover:text-gray-900"
                }`}
              >
                Txt Messages
              </button>
            </div>
          </div>
 
          {/* Email Tab */}
          {activeTab === "email" && (
            <div className="p-6">
              <div className="mb-4 flex gap-4 items-center">
                <label className="text-sm text-gray-700">
                  From (incl):
                  <input
                    type="date"
                    value={emailFromDate}
                    onChange={(e) => setEmailFromDate(e.target.value)}
                    className="ml-2 px-3 py-1 border border-gray-300 rounded"
                  />
                </label>
                <label className="text-sm text-gray-700">
                  To (excl):
                  <input
                    type="date"
                    value={emailToDate}
                    onChange={(e) => setEmailToDate(e.target.value)}
                    className="ml-2 px-3 py-1 border border-gray-300 rounded"
                  />
                </label>
              </div>
 
              {loading ? (
                <div className="text-center py-8 text-gray-600">Loading...</div>
              ) : (
                <div className="overflow-x-auto">
                  <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">Send Date</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Account</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700" title="If ticked, indicates a copy of the message was received by Fieldpine, or otherwise confirmed as delivered">
                          Tx
                        </th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">To</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Subject</th>
                      </tr>
                    </thead>
                    <tbody>
                      {emailLogs.map((log, idx) => (
                        <tr
                          key={idx}
                          className={`border-b border-gray-100 hover:bg-gray-50 ${
                            log.f141 && log.f141 > 0 ? "bg-pink-50" : ""
                          }`}
                        >
                          <td className="px-4 py-3 text-gray-800">{formatDate(log.f109)}</td>
                          <td className="px-4 py-3 text-gray-800">{log.f108}</td>
                          <td className="px-4 py-3">
                            {log.f133 && <span className="text-green-600">✅</span>}
                            {log.f141 && log.f141 > 0 && (
                              <span className="ml-1" title="Email bounced and was not delivered">💥</span>
                            )}
                          </td>
                          <td className="px-4 py-3 text-gray-800">{log.f111}</td>
                          <td className="px-4 py-3 text-gray-800">{log.f132 || log.f112}</td>
                        </tr>
                      ))}
                      {emailLogs.length === 0 && (
                        <tr>
                          <td colSpan={5} className="px-4 py-8 text-center text-gray-500">
                            No email logs found
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          )}
 
          {/* SMS Tab */}
          {activeTab === "sms" && (
            <div className="p-6">
              <div className="mb-4 flex gap-4 items-center flex-wrap">
                <label className="text-sm text-gray-700">
                  Row Limit:
                  <input
                    type="number"
                    value={smsRowLimit}
                    onChange={(e) => setSmsRowLimit(parseInt(e.target.value) || 500)}
                    onBlur={loadSmsLogs}
                    className="ml-2 w-20 px-3 py-1 border border-gray-300 rounded"
                  />
                </label>
                <label className="flex items-center gap-2 text-sm text-gray-700">
                  <input
                    type="checkbox"
                    checked={smsShowSent}
                    onChange={(e) => {
                      setSmsShowSent(e.target.checked);
                      setTimeout(loadSmsLogs, 100);
                    }}
                    className="rounded"
                  />
                  Show Sent
                </label>
                <label className="flex items-center gap-2 text-sm text-gray-700">
                  <input
                    type="checkbox"
                    checked={smsShowReceived}
                    onChange={(e) => {
                      setSmsShowReceived(e.target.checked);
                      setTimeout(loadSmsLogs, 100);
                    }}
                    className="rounded"
                  />
                  Show Received
                </label>
              </div>
 
              {loading ? (
                <div className="text-center py-8 text-gray-600">Loading...</div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full text-sm">
                    <thead className="bg-gray-50 border-b border-gray-200">
                      <tr>
                        <th className="px-2 py-3 text-center font-semibold text-gray-700">Dir</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Date</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Account</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Phone</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">ISP Status</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Delivered</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Hard Bounce</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Soft Bounce</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Replied</th>
                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Message</th>
                      </tr>
                    </thead>
                    <tbody>
                      {smsLogs.map((log, idx) => {
                        const direction = log.f426 || 0;
                        const statusOk = log.f400 === 1;
                        const deliveredDate = log.f420 || "";
                        const deliveredYear = deliveredDate ? new Date(deliveredDate).getFullYear() : 0;
                        
                        return (
                          <tr key={idx} className="border-b border-gray-100 hover:bg-gray-50">
                            <td className="px-2 py-3 text-center text-xl">
                              {direction === 1 && (
                                <span className={statusOk ? "text-blue-500" : "text-pink-500"}>
                                  ⇨
                                </span>
                              )}
                              {direction === 2 && <span className="text-green-500">⇦</span>}
                            </td>
                            <td className="px-4 py-3 text-gray-800">{formatDate(log.f109)}</td>
                            <td className="px-4 py-3 text-gray-800">{log.f108}</td>
                            <td className="px-4 py-3 text-gray-800 font-mono">{log.f111}</td>
                            <td className="px-4 py-3 text-gray-800">{log.f401}</td>
                            <td className="px-4 py-3 text-gray-800">{getIspError(log.f402 || "")}</td>
                            <td className="px-4 py-3 text-gray-800">
                              {deliveredYear > 2020 && <span className="text-green-600">✅ </span>}
                              {deliveredDate}
                            </td>
                            <td className="px-4 py-3 text-gray-800">{log.f421}</td>
                            <td className="px-4 py-3 text-gray-800">{log.f422}</td>
                            <td className="px-4 py-3 text-gray-800">{log.f423}</td>
                            <td className="px-4 py-3 text-gray-800">{log.f112}</td>
                          </tr>
                        );
                      })}
                      {smsLogs.length === 0 && (
                        <tr>
                          <td colSpan={11} className="px-4 py-8 text-center text-gray-500">
                            No SMS logs found
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}