TenantAudit.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import { apiFetch } from '../lib/api';
import './Customers.css';
 
export default function TenantAudit() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [logs, setLogs] = useState([]);
  const [tenant, setTenant] = useState(null);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [limit] = useState(50);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
 
  useEffect(() => {
    fetchTenant();
    fetchAuditLogs();
  }, [id, page]);
 
  async function fetchTenant() {
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/tenants/${id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
 
      if (res.ok) {
        const json = await res.json();
        setTenant(json.tenant);
      }
    } catch (err) {
      console.error('Failed to load tenant:', err);
    }
  }
 
  async function fetchAuditLogs() {
    setLoading(true);
    setError('');
    try {
      const token = localStorage.getItem('token');
      const params = new URLSearchParams();
      params.set('page', page);
      params.set('limit', limit);
 
      const res = await apiFetch(`/tenants/${id}/audit?${params.toString()}`, {
        headers: {
          Authorization: `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
 
      if (!res.ok) {
        const text = await res.text();
        throw new Error(text || 'Failed to load audit logs');
      }
 
      const json = await res.json();
      setLogs(json.logs || []);
      setTotal(json.total || 0);
    } catch (err) {
      console.error('Audit log error:', err);
      setError(err.message || 'Failed to load audit logs');
    } finally {
      setLoading(false);
    }
  }
 
  function formatDate(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleString('en-AU', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }
 
  function getActionBadgeClass(action) {
    const actionLower = action?.toLowerCase() || '';
    if (actionLower.includes('create')) return 'status-active';
    if (actionLower.includes('update') || actionLower.includes('edit')) return 'status-pending';
    if (actionLower.includes('delete')) return 'status-closed';
    return 'status-draft';
  }
 
  const totalPages = Math.ceil(total / limit);
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <div className="header-content">
            <h2>
              {tenant ? `${tenant.name} - Audit Log` : 'Tenant Audit Log'}
            </h2>
          </div>
          <div className="header-actions">
            <button className="btn btn-secondary" onClick={() => navigate(`/tenants/${id}`)}>
              <span className="material-symbols-outlined">arrow_back</span>
              Back to Tenant
            </button>
          </div>
        </div>
 
        {error && <div className="error-message">{error}</div>}
 
        {loading ? (
          <div className="loading">Loading audit logs...</div>
        ) : logs.length === 0 ? (
          <div className="empty-state">
            <span className="material-symbols-outlined">history</span>
            <p>No audit logs found for this tenant</p>
          </div>
        ) : (
          <>
            <table className="data-table">
              <thead>
                <tr>
                  <th>Timestamp</th>
                  <th>User</th>
                  <th>Action</th>
                  <th>Resource</th>
                  <th>Details</th>
                </tr>
              </thead>
              <tbody>
                {logs.map((log, idx) => (
                  <tr key={log.audit_id || idx}>
                    <td style={{ whiteSpace: 'nowrap' }}>
                      {formatDate(log.created_at)}
                    </td>
                    <td>
                      {log.user_name || log.user_email || `User #${log.user_id}` || '-'}
                    </td>
                    <td>
                      <span className={`status-badge ${getActionBadgeClass(log.action)}`}>
                        {log.action || '-'}
                      </span>
                    </td>
                    <td>
                      {log.resource_type || '-'}
                      {log.resource_id && (
                        <span style={{ color: 'var(--text-muted)', fontSize: '0.9em' }}>
                          {' '}#{log.resource_id}
                        </span>
                      )}
                    </td>
                    <td style={{ maxWidth: '400px', wordWrap: 'break-word' }}>
                      {log.details ? (
                        typeof log.details === 'string' ? log.details : JSON.stringify(log.details)
                      ) : '-'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
 
            {totalPages > 1 && (
              <div className="pagination">
                <button
                  className="btn"
                  disabled={page <= 1}
                  onClick={() => setPage(p => Math.max(1, p - 1))}
                >
                  <span className="material-symbols-outlined">navigate_before</span>
                </button>
                <span>Page {page} of {totalPages}</span>
                <button
                  className="btn"
                  disabled={page >= totalPages}
                  onClick={() => setPage(p => p + 1)}
                >
                  <span className="material-symbols-outlined">navigate_next</span>
                </button>
              </div>
            )}
          </>
        )}
      </div>
    </MainLayout>
  );
}