page.tsx

Go to the documentation of this file.

"use client";
import { useState, useEffect } from "react";
import { Icon } from '@/contexts/IconContext';
 
interface AuditEntry {
  id: string;
  timestamp: Date;
  user: string;
  action: string;
  resource: string;
  details: string;
  status: "success" | "error" | "warning";
}
 
export default function AuditPage() {
  const [auditLog, setAuditLog] = useState<AuditEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<string>("all");
  const [searchTerm, setSearchTerm] = useState("");
 
  useEffect(() => {
    // Simulate loading audit log
    // In production, this would fetch from an API
    const mockData: AuditEntry[] = [
      {
        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(() => {
      setAuditLog(mockData);
      setLoading(false);
    }, 500);
  }, []);
 
  const filteredLog = auditLog.filter(entry => {
    const matchesFilter = filter === "all" || entry.status === filter;
    const matchesSearch = 
      entry.action.toLowerCase().includes(searchTerm.toLowerCase()) ||
      entry.resource.toLowerCase().includes(searchTerm.toLowerCase()) ||
      entry.details.toLowerCase().includes(searchTerm.toLowerCase()) ||
      entry.user.toLowerCase().includes(searchTerm.toLowerCase());
    return matchesFilter && matchesSearch;
  });
 
  const getStatusColor = (status: string) => {
    switch (status) {
      case "success":
        return "bg-success/10 text-success border-success/30";
      case "error":
        return "bg-danger/10 text-danger border-danger/30";
      case "warning":
        return "bg-warn/10 text-warn border-warn/30";
      default:
        return "bg-surface-2 text-muted border-border";
    }
  };
 
  const getStatusIcon = (status: string) => {
    switch (status) {
      case "success":
        return "✓";
      case "error":
        return "✗";
      case "warning":
        return "⚠";
      default:
        return "•";
    }
  };
 
  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 flex items-center gap-3">
            <Icon name="receipt_long" size={32} />
            Transaction Log
          </h1>
          <p className="text-muted">Audit trail of system activities and API transactions</p>
        </div>
 
        {/* Filters */}
        <div className="bg-surface rounded-lg shadow-sm border border-border p-4 mb-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-text mb-2">
                Search
              </label>
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(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"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text mb-2">
                Filter by Status
              </label>
              <select
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand"
              >
                <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 */}
        <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">{auditLog.length}</div>
          </div>
          <div className="bg-green-50 rounded-lg shadow-sm border border-green-200 p-4">
            <div className="text-sm text-green-600 mb-1">Success</div>
            <div className="text-2xl font-bold text-green-900">
              {auditLog.filter(e => e.status === "success").length}
            </div>
          </div>
          <div className="bg-red-50 rounded-lg shadow-sm border border-red-200 p-4">
            <div className="text-sm text-red-600 mb-1">Errors</div>
            <div className="text-2xl font-bold text-red-900">
              {auditLog.filter(e => e.status === "error").length}
            </div>
          </div>
          <div className="bg-yellow-50 rounded-lg shadow-sm border border-yellow-200 p-4">
            <div className="text-sm text-yellow-600 mb-1">Warnings</div>
            <div className="text-2xl font-bold text-yellow-900">
              {auditLog.filter(e => e.status === "warning").length}
            </div>
          </div>
        </div>
 
        {/* Audit Log Table */}
        <div className="bg-surface rounded-lg shadow-sm border border-border overflow-hidden">
          {loading ? (
            <div className="p-12 text-center text-muted">
              Loading audit log...
            </div>
          ) : filteredLog.length === 0 ? (
            <div className="p-12 text-center text-muted">
              {searchTerm ? `No events match "${searchTerm}"` : "No events found"}
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-border">
                <thead className="bg-[var(--brand)] text-surface">
                  <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-border">
                  {filteredLog.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-muted">
                        {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-muted">
                        {entry.resource}
                      </td>
                      <td className="px-6 py-4 text-sm text-muted">
                        {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 ${getStatusColor(
                            entry.status
                          )}`}
                        >
                          <span className="mr-1">{getStatusIcon(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">
          <h3 className="font-semibold text-info mb-2">About the Audit Log</h3>
          <p className="text-info/90 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/90 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/80 text-xs mt-3">
            <strong>Note:</strong> Currently showing mock data. Production will log real transactions.
          </p>
        </div>
      </div>
    </div>
  );
}