Function AuditLogRow

apps/sim/ee/audit-logs/components/audit-logs.tsx:168–255

({ entry }: AuditLogRowProps)

}

function AuditLogRow({ entry }: AuditLogRowProps) {
  const [expanded, setExpanded] = useState(false)
  const timestamp = formatDateTime(new Date(entry.createdAt))
  const metadataEntries = getMetadataEntries(entry.metadata)

  return (
    <div
      className={cn(
        'rounded-md transition-colors',
        'hover-hover:bg-[var(--surface-2)]',
        expanded && 'bg-[var(--surface-2)]'
      )}
    >
      <button
        type='button'
        className='flex w-full items-center gap-3 px-3 py-2 text-left'
        onClick={() => setExpanded(!expanded)}
      >
        <span className='w-[160px] flex-shrink-0 text-[var(--text-secondary)] text-small'>
          {timestamp}
        </span>
        <span className='w-[180px] flex-shrink-0'>
          <ActionBadge action={entry.action} />
        </span>
        <span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-small'>
          {entry.description || entry.resourceName || entry.resourceId || '-'}
        </span>
        <span className='flex w-[160px] flex-shrink-0 items-center justify-end gap-1.5 text-[var(--text-secondary)] text-small'>
          <span className='min-w-0 truncate'>
            {entry.actorEmail || entry.actorName || 'System'}
          </span>
          <ChevronDown
            className={cn(
              'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
              expanded && 'rotate-180'
            )}
          />
        </span>
      </button>
      {expanded && (
        <div className='px-3 pb-2'>
          <div className='flex flex-col gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-3)] p-3 text-small'>
            <div className='flex gap-2'>
              <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>Resource</span>
              <span className='text-[var(--text-primary)]'>
                {formatResourceType(entry.resourceType)}
                {entry.resourceId && (
                  <span className='ml-1 text-[var(--text-muted)]'>({entry.resourceId})</span>
                )}
              </span>
            </div>
            {entry.resourceName && (
              <div className='flex gap-2'>
                <span className='w-[100px] flex-shrink-0 text-[var(--text-muted)]'>Name</span>
                <span className='text-[var(--text-primary)]'>{entry.resourceName}</span>
              </div>
            )}
            <div className='flex gap-2'>