igny8/frontend/src/pages/admin/AdminActivityLogsPage.tsx

/**
 * Admin Activity Logs Page
 * View system activity and audit trail
 */

import { useState, useEffect } from 'react';
import { Search, Filter, Loader2, AlertCircle, Activity } from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';

interface ActivityLog {
  id: number;
  user_email: string;
  account_name: string;
  action: string;
  resource_type: string;
  resource_id: string | null;
  ip_address: string;
  timestamp: string;
  details: string;
}

export default function AdminActivityLogsPage() {
  const [logs, setLogs] = useState<ActivityLog[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [actionFilter, setActionFilter] = useState('all');

  useEffect(() => {
    // Mock data - replace with API call
    setLogs([
      {
        id: 1,
        user_email: 'john@example.com',
        account_name: 'Acme Corp',
        action: 'create',
        resource_type: 'Site',
        resource_id: '123',
        ip_address: '192.168.1.1',
        timestamp: new Date().toISOString(),
        details: 'Created new site "Main Website"',
      },
      {
        id: 2,
        user_email: 'jane@example.com',
        account_name: 'TechStart',
        action: 'update',
        resource_type: 'Account',
        resource_id: '456',
        ip_address: '192.168.1.2',
        timestamp: new Date(Date.now() - 3600000).toISOString(),
        details: 'Updated account billing address',
      },
    ]);
    setLoading(false);
  }, []);

  const filteredLogs = logs.filter((log) => {
    const matchesSearch = log.user_email.toLowerCase().includes(searchTerm.toLowerCase()) ||
                          log.account_name.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesAction = actionFilter === 'all' || log.action === actionFilter;
    return matchesSearch && matchesAction;
  });

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
          <Activity className="w-6 h-6" />
          Activity Logs
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          System activity and audit trail
        </p>
      </div>

      <div className="mb-6 flex flex-col md:flex-row gap-4">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
          <input
            type="text"
            placeholder="Search logs..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
          />
        </div>
        <div className="flex items-center gap-2">
          <Filter className="w-5 h-5 text-gray-400" />
          <select
            value={actionFilter}
            onChange={(e) => setActionFilter(e.target.value)}
            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
          >
            <option value="all">All Actions</option>
            <option value="create">Create</option>
            <option value="update">Update</option>
            <option value="delete">Delete</option>
            <option value="login">Login</option>
            <option value="logout">Logout</option>
          </select>
        </div>
      </div>

      <Card className="overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Timestamp</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Account</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Resource</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Details</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP Address</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
              {filteredLogs.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">No activity logs found</td>
                </tr>
              ) : (
                filteredLogs.map((log) => (
                  <tr key={log.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                      {new Date(log.timestamp).toLocaleString()}
                    </td>
                    <td className="px-6 py-4 text-sm font-medium">{log.user_email}</td>
                    <td className="px-6 py-4 text-sm text-gray-600">{log.account_name}</td>
                    <td className="px-6 py-4">
                      <Badge 
                        variant="light" 
                        color={
                          log.action === 'create' ? 'success' :
                          log.action === 'update' ? 'primary' :
                          log.action === 'delete' ? 'error' : 'default'
                        }
                      >
                        {log.action}
                      </Badge>
                    </td>
                    <td className="px-6 py-4 text-sm">{log.resource_type}</td>
                    <td className="px-6 py-4 text-sm text-gray-600">{log.details}</td>
                    <td className="px-6 py-4 text-sm text-gray-500">{log.ip_address}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}