page.tsx

Go to the documentation of this file.

"use client";
import { useState, useEffect } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { Icon } from '@/contexts/IconContext';
 
interface LoginLogEntry {
  f110: number; // Staff ID
  f210: string; // Staff Name
  f211: string; // Type (login/logout/in/out)
  f112: string; // DateTime
  f113: number; // Lane
}
 
interface LoginLogDetail {
  f110: number; // Staff ID
  f210: string; // Staff Name
  f111s: string; // Type
  f112: string; // DateTime
  f113: number; // Lane
}
 
interface TransactionEntry {
  id: string;
  timestamp: Date;
  user: string;
  action: string;
  resource: string;
  details: string;
  status: "success" | "error" | "warning";
}
 
export default function AuditPage() {
  const [activeTab, setActiveTab] = useState<"staff" | "transactions">("staff");
  
  // Staff Login Log State
  const [loginLogs, setLoginLogs] = useState<LoginLogEntry[]>([]);
  const [filteredLogs, setFilteredLogs] = useState<LoginLogEntry[]>([]);
  const [loadingStaff, setLoadingStaff] = useState(true);
  const [staffSearchTerm, setStaffSearchTerm] = useState("");
  const [fromDate, setFromDate] = useState("");
  const [toDate, setToDate] = useState("");
  const [filterType, setFilterType] = useState<string>("all");
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [selectedLogEntry, setSelectedLogEntry] = useState<LoginLogEntry | null>(null);
  const [loginDetails, setLoginDetails] = useState<LoginLogDetail[]>([]);
  
  // Transaction Log State
  const [transactionLog, setTransactionLog] = useState<TransactionEntry[]>([]);
  const [filteredTransactions, setFilteredTransactions] = useState<TransactionEntry[]>([]);
  const [loadingTransactions, setLoadingTransactions] = useState(true);
  const [transactionFilter, setTransactionFilter] = useState<string>("all");
  const [transactionSearchTerm, setTransactionSearchTerm] = useState("");
 
  useEffect(() => {
    // Set default from date to beginning of month
    const today = new Date();
    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
    setFromDate(firstDay.toISOString().split('T')[0]);
    setToDate(today.toISOString().split('T')[0]);
    
    loadLoginLogs();
    loadTransactionLog();
  }, []);
 
  useEffect(() => {
    loadLoginLogs();
  }, [fromDate, toDate]);
 
  useEffect(() => {
    applyFilters();
  }, [loginLogs, staffSearchTerm, filterType]);
  
  useEffect(() => {
    applyTransactionFilters();
  }, [transactionLog, transactionSearchTerm, transactionFilter]);
 
  const loadLoginLogs = async () => {
    try {
      setLoadingStaff(true);
      const params: any = {};
      if (fromDate) params.fromDate = fromDate;
      if (toDate) params.toDate = toDate;
      
      const result = await apiClient.getStaffUsage(params);
      
      if (result.success && result.data?.DATS) {
        setLoginLogs(result.data.DATS);
      }
    } catch (error) {
      console.error("Error loading login logs:", error);
    } finally {
      setLoadingStaff(false);
    }
  };
  
  const loadTransactionLog = async () => {
    try {
      setLoadingTransactions(true);
      // Simulate loading transaction log with mock data
      // In production, this would fetch from an API
      const mockData: TransactionEntry[] = [
        {
          id: "1",
          timestamp: new Date("2024-12-24T10:30:00"),
          user: "admin@everydaypos.com",
          action: "LOGIN",
          resource: "Authentication",
          details: "User logged in successfully",
          status: "success"
        },
        {
          id: "2",
          timestamp: new Date("2024-12-24T10:35:00"),
          user: "admin@everydaypos.com",
          action: "STOCK_ADJUSTMENT",
          resource: "Products",
          details: "Adjusted stock for Product ID 12345 by +10",
          status: "success"
        },
        {
          id: "3",
          timestamp: new Date("2024-12-24T10:40:00"),
          user: "admin@everydaypos.com",
          action: "SALE_CREATED",
          resource: "Sales",
          details: "Created sale SID 98765 for $125.50",
          status: "success"
        },
        {
          id: "4",
          timestamp: new Date("2024-12-24T10:45:00"),
          user: "admin@everydaypos.com",
          action: "API_ERROR",
          resource: "Fieldpine API",
          details: "Failed to connect to Fieldpine server - timeout",
          status: "error"
        },
        {
          id: "5",
          timestamp: new Date("2024-12-24T10:50:00"),
          user: "admin@everydaypos.com",
          action: "PRODUCT_UPDATE",
          resource: "Products",
          details: "Updated price for Product ID 67890",
          status: "success"
        }
      ];
      
      setTimeout(() => {
        setTransactionLog(mockData);
        setLoadingTransactions(false);
      }, 500);
    } catch (error) {
      console.error("Error loading transaction log:", error);
      setLoadingTransactions(false);
    }
  };
 
  const applyFilters = () => {
    let filtered = loginLogs;
 
    // Apply type filter
    if (filterType !== "all") {
      filtered = filtered.filter((log) => {
        const type = log.f211?.toLowerCase() || "";
        if (filterType === "login") {
          return type.includes("login") || type.includes("in");
        } else if (filterType === "logout") {
          return type.includes("logout") || type.includes("out");
        }
        return true;
      });
    }
 
    // Apply search filter
    if (staffSearchTerm) {
      const search = staffSearchTerm.toLowerCase();
      filtered = filtered.filter((log) => {
        return (
          log.f110?.toString().includes(search) ||
          log.f210?.toLowerCase().includes(search) ||
          log.f211?.toLowerCase().includes(search) ||
          log.f113?.toString().includes(search)
        );
      });
    }
 
    setFilteredLogs(filtered);
  };
  
  const applyTransactionFilters = () => {
    let filtered = transactionLog;
    
    // Apply status filter
    if (transactionFilter !== "all") {
      filtered = filtered.filter(entry => entry.status === transactionFilter);
    }
    
    // Apply search filter
    if (transactionSearchTerm) {
      const search = transactionSearchTerm.toLowerCase();
      filtered = filtered.filter(entry => 
        entry.action.toLowerCase().includes(search) ||
        entry.resource.toLowerCase().includes(search) ||
        entry.details.toLowerCase().includes(search) ||
        entry.user.toLowerCase().includes(search)
      );
    }
    
    setFilteredTransactions(filtered);
  };
  
  const getTransactionStatusColor = (status: string) => {
    switch (status) {
      case "success":
        return "bg-success/20 text-success border-success/30";
      case "error":
        return "bg-danger/20 text-danger border-danger/30";
      case "warning":
        return "bg-warn/20 text-warn border-warn/30";
      default:
        return "bg-surface-2 text-muted border-border";
    }
  };
 
  const getTransactionStatusIcon = (status: string) => {
    switch (status) {
      case "success":
        return <Icon name="check_circle" size={16} />;
      case "error":
        return <Icon name="cancel" size={16} />;
      case "warning":
        return <Icon name="warning" size={16} />;
      default:
        return <Icon name="circle" size={16} />;
    }
  };
 
  const openLogDetail = async (entry: LoginLogEntry) => {
    setSelectedLogEntry(entry);
    setShowDetailModal(true);
    
    try {
      const params = {
        staffId: entry.f110.toString(),
        fromDate,
        toDate,
      };
      
      const result = await apiClient.getStaffUsageDetail(params);
      
      if (result.success && result.data?.DATS) {
        setLoginDetails(result.data.DATS);
      }
    } catch (error) {
      console.error("Error loading login details:", error);
    }
  };
 
  const formatDateTime = (dateStr: string) => {
    if (!dateStr) return "—";
    const date = new Date(dateStr);
    return date.toLocaleString("en-GB", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  };
 
  const getActivityType = (type: string): "login" | "logout" | "other" => {
    const t = type?.toLowerCase() || "";
    if (t.includes("login") || t === "in") return "login";
    if (t.includes("logout") || t === "out") return "logout";
    return "other";
  };
 
  const loginCount = loginLogs.filter(log => getActivityType(log.f211) === "login").length;
  const logoutCount = loginLogs.filter(log => getActivityType(log.f211) === "logout").length;
  
  const loading = activeTab === "staff" ? loadingStaff : loadingTransactions;
 
  return (
    <div className="min-h-screen bg-bg">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-text mb-2">System Audit Logs</h1>
          <p className="text-muted">Monitor staff activity and system transactions</p>
        </div>
        
        {/* Tabs */}
        <div className="mb-6 border-b border-border">
          <nav className="-mb-px flex space-x-8">
            <button
              onClick={() => setActiveTab("staff")}
              className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === "staff"
                  ? "border-brand text-brand"
                  : "border-transparent text-muted hover:text-text hover:border-border"
              }`}
            >
              Staff Login Activity
            </button>
            <button
              onClick={() => setActiveTab("transactions")}
              className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === "transactions"
                  ? "border-brand text-brand"
                  : "border-transparent text-muted hover:text-text hover:border-border"
              }`}
            >
              System Transactions
            </button>
          </nav>
        </div>
 
        {/* Staff Login Filters */}
        {activeTab === "staff" && (
          <div className="bg-surface rounded-lg shadow-sm border border-border p-4 mb-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  From Date
                </label>
                <input
                  type="date"
                  value={fromDate}
                  onChange={(e) => setFromDate(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  To Date
                </label>
                <input
                  type="date"
                  value={toDate}
                  onChange={(e) => setToDate(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Filter by Type
                </label>
                <select
                  value={filterType}
                  onChange={(e) => setFilterType(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
                >
                  <option value="all">All Activity</option>
                  <option value="login">Login Only</option>
                  <option value="logout">Logout Only</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Search
                </label>
                <input
                  type="text"
                  value={staffSearchTerm}
                  onChange={(e) => setStaffSearchTerm(e.target.value)}
                  placeholder="Search staff, lane..."
                  className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
                />
              </div>
            </div>
          </div>
        )}
        
        {/* Transaction Filters */}
        {activeTab === "transactions" && (
          <div className="bg-surface rounded-lg shadow-sm border border-border p-4 mb-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Search
                </label>
                <input
                  type="text"
                  value={transactionSearchTerm}
                  onChange={(e) => setTransactionSearchTerm(e.target.value)}
                  placeholder="Search actions, resources, or details..."
                  className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">
                  Filter by Status
                </label>
                <select
                  value={transactionFilter}
                  onChange={(e) => setTransactionFilter(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
                >
                  <option value="all">All Status</option>
                  <option value="success">Success</option>
                  <option value="error">Error</option>
                  <option value="warning">Warning</option>
                </select>
              </div>
            </div>
          </div>
        )}
 
        {/* Stats - Staff Login */}
        {activeTab === "staff" && (
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div className="bg-surface rounded-lg shadow-sm border border-border p-4">
              <div className="text-sm text-muted mb-1">Total Events</div>
              <div className="text-2xl font-bold text-text">{loginLogs.length}</div>
            </div>
            <div className="bg-success/10 rounded-lg shadow-sm border border-success/30 p-4">
              <div className="text-sm text-success mb-1">Logins</div>
              <div className="text-2xl font-bold text-success">{loginCount}</div>
            </div>
            <div className="bg-danger/10 rounded-lg shadow-sm border border-danger/30 p-4">
              <div className="text-sm text-danger mb-1">Logouts</div>
              <div className="text-2xl font-bold text-danger">{logoutCount}</div>
            </div>
            <div className="bg-info/10 rounded-lg shadow-sm border border-info/30 p-4">
              <div className="text-sm text-info mb-1">Filtered Results</div>
              <div className="text-2xl font-bold text-info">{filteredLogs.length}</div>
            </div>
          </div>
        )}
        
        {/* Stats - Transactions */}
        {activeTab === "transactions" && (
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div className="bg-surface rounded-lg shadow-sm border border-border p-4">
              <div className="text-sm text-muted mb-1">Total Events</div>
              <div className="text-2xl font-bold text-text">{transactionLog.length}</div>
            </div>
            <div className="bg-success/10 rounded-lg shadow-sm border border-success/30 p-4">
              <div className="text-sm text-success mb-1">Success</div>
              <div className="text-2xl font-bold text-success">
                {transactionLog.filter(e => e.status === "success").length}
              </div>
            </div>
            <div className="bg-danger/10 rounded-lg shadow-sm border border-danger/30 p-4">
              <div className="text-sm text-danger mb-1">Errors</div>
              <div className="text-2xl font-bold text-danger">
                {transactionLog.filter(e => e.status === "error").length}
              </div>
            </div>
            <div className="bg-warn/10 rounded-lg shadow-sm border border-warn/30 p-4">
              <div className="text-sm text-warn mb-1">Warnings</div>
              <div className="text-2xl font-bold text-warn">
                {transactionLog.filter(e => e.status === "warning").length}
              </div>
            </div>
          </div>
        )}
 
        {/* Staff Login Activity Table */}
        {activeTab === "staff" && (
          <div className="bg-surface rounded-lg shadow-sm border border-border overflow-hidden">
            {loadingStaff ? (
              <div className="p-12 text-center text-muted">
                Loading staff activity log...
              </div>
            ) : filteredLogs.length === 0 ? (
              <div className="p-12 text-center text-muted">
                {staffSearchTerm ? `No events match "${staffSearchTerm}"` : "No activity found in the selected date range"}
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-surface-2">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Timestamp
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Staff
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Action
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Lane
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Details
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-surface divide-y divide-gray-200">
                    {filteredLogs.map((log, idx) => {
                      const activityType = getActivityType(log.f211);
                      return (
                        <tr key={idx} className="hover:bg-surface-2">
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                            {formatDateTime(log.f112)}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                            <div className="font-medium text-text">{log.f210 || "—"}</div>
                            <div className="text-xs text-muted">ID: {log.f110}</div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                            {log.f211 || "—"}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                            {log.f113 || "—"}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span
                              className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${
                                activityType === "login"
                                  ? "bg-success/20 text-success border-success/30"
                                  : activityType === "logout"
                                  ? "bg-danger/20 text-danger border-danger/30"
                                  : "bg-surface-2 text-muted border-border"
                              }`}
                            >
                              <span className="mr-1">
                                {activityType === "login" ? <Icon name="check" size={12} /> : activityType === "logout" ? <Icon name="close" size={12} /> : <Icon name="circle" size={12} />}
                              </span>
                              <button
                                onClick={() => openLogDetail(log)}
                                className="hover:underline"
                              >
                                View Details
                              </button>
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}
        
        {/* System Transactions Table */}
        {activeTab === "transactions" && (
          <div className="bg-surface rounded-lg shadow-sm border border-border overflow-hidden">
            {loadingTransactions ? (
              <div className="p-12 text-center text-muted">
                Loading transaction log...
              </div>
            ) : filteredTransactions.length === 0 ? (
              <div className="p-12 text-center text-muted">
                {transactionSearchTerm ? `No events match "${transactionSearchTerm}"` : "No events found"}
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-surface-2">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Timestamp
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        User
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Action
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Resource
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Details
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                        Status
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-surface divide-y divide-gray-200">
                    {filteredTransactions.map((entry) => (
                      <tr key={entry.id} className="hover:bg-surface-2">
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                          {entry.timestamp.toLocaleString()}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                          {entry.user}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                          {entry.action}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                          {entry.resource}
                        </td>
                        <td className="px-6 py-4 text-sm text-text">
                          {entry.details}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span
                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getTransactionStatusColor(
                              entry.status
                            )}`}
                          >
                            <span className="mr-1">{getTransactionStatusIcon(entry.status)}</span>
                            {entry.status.toUpperCase()}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}
 
        {/* Info Box */}
        <div className="mt-6 bg-info/10 border border-info/30 rounded-lg p-4">
          {activeTab === "staff" ? (
            <>
              <h3 className="font-semibold text-info mb-2">About Staff Activity Log</h3>
              <p className="text-info text-sm mb-2">
                The staff activity log tracks all staff login and logout events across POS terminals. This helps with:
              </p>
              <ul className="list-disc list-inside text-info text-sm space-y-1 ml-2">
                <li>Security monitoring and compliance</li>
                <li>Staff attendance tracking</li>
                <li>Terminal usage analysis</li>
                <li>Shift management and scheduling</li>
              </ul>
              <p className="text-info text-xs mt-3">
                <strong>Note:</strong> Data is fetched from the Fieldpine BUCK API (getStaffUsage). Click "View Details" to see complete activity history for a staff member.
              </p>
            </>
          ) : (
            <>
              <h3 className="font-semibold text-info mb-2">About System Transactions</h3>
              <p className="text-info text-sm mb-2">
                The transaction log tracks all system activities including user actions, API calls, and system events. This helps with:
              </p>
              <ul className="list-disc list-inside text-info text-sm space-y-1 ml-2">
                <li>Security monitoring and compliance</li>
                <li>Debugging and troubleshooting</li>
                <li>Performance analysis</li>
                <li>User activity tracking</li>
              </ul>
              <p className="text-info text-xs mt-3">
                <strong>Note:</strong> Currently showing mock data. Production will log real transactions.
              </p>
            </>
          )}
        </div>
      </div>
 
      {/* Detail Modal */}
      {showDetailModal && selectedLogEntry && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-surface rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-hidden">
            <div className="bg-gradient-to-r from-brand to-brand-2 text-surface px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-bold">
                Activity Details - {selectedLogEntry.f210} (ID: {selectedLogEntry.f110})
              </h2>
              <button
                onClick={() => setShowDetailModal(false)}
                className="text-surface hover:opacity-80 transition-opacity"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
 
            <div className="p-6 overflow-y-auto max-h-[calc(80vh-80px)]">
              {loginDetails.length === 0 ? (
                <div className="text-center py-8">
                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
                  <p className="text-muted">Loading activity details...</p>
                </div>
              ) : (
                <div>
                  <div className="mb-4 bg-surface-2 rounded-lg p-4">
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div>
                        <span className="text-muted">Staff Name:</span>
                        <span className="ml-2 font-semibold text-text">{selectedLogEntry.f210}</span>
                      </div>
                      <div>
                        <span className="text-muted">Staff ID:</span>
                        <span className="ml-2 font-semibold text-text">{selectedLogEntry.f110}</span>
                      </div>
                      <div>
                        <span className="text-muted">Date Range:</span>
                        <span className="ml-2 font-semibold text-text">{fromDate} to {toDate}</span>
                      </div>
                      <div>
                        <span className="text-muted">Total Events:</span>
                        <span className="ml-2 font-semibold text-text">{loginDetails.length}</span>
                      </div>
                    </div>
                  </div>
                  <table className="w-full border-collapse">
                    <thead className="bg-surface-2">
                      <tr>
                        <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider border-b">Action</th>
                        <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider border-b">Date & Time</th>
                        <th className="px-4 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider border-b">Lane</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200">
                      {loginDetails.map((detail, idx) => {
                        const activityType = getActivityType(detail.f111s);
                        return (
                          <tr key={idx} className="hover:bg-surface-2">
                            <td className="px-4 py-3 text-sm">
                              <span
                                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${
                                  activityType === "login"
                                    ? "bg-success/20 text-success border-success/30"
                                    : activityType === "logout"
                                    ? "bg-danger/20 text-danger border-danger/30"
                                    : "bg-surface-2 text-muted border-border"
                                }`}
                              >
                                <span className="mr-1">
                                  {activityType === "login" ? <Icon name="check" size={12} /> : activityType === "logout" ? <Icon name="close" size={12} /> : <Icon name="circle" size={12} />}
                                </span>
                                {detail.f111s || "—"}
                              </span>
                            </td>
                            <td className="px-4 py-3 text-sm text-muted">
                              {formatDateTime(detail.f112)}
                            </td>
                            <td className="px-4 py-3 text-sm text-muted">
                              {detail.f113 || "—"}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}