Function AuditLogs

apps/sim/ee/audit-logs/components/audit-logs.tsx:257–460

()

}

export function AuditLogs() {
  const [selectedTypes, setSelectedTypes] = useState<string[]>([])
  const [timeRange, setTimeRange] = useState<TimeRange>('Past 30 days')
  const [customStartDate, setCustomStartDate] = useState('')
  const [customEndDate, setCustomEndDate] = useState('')
  const [datePickerOpen, setDatePickerOpen] = useState(false)
  const previousTimeRangeRef = useRef<TimeRange>('Past 30 days')
  const dateRangeAppliedRef = useRef(false)
  const [searchTerm, setSearchTerm] = useState('')
  const [debouncedSearch, setDebouncedSearch] = useState('')
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const [isVisuallyRefreshing, setIsVisuallyRefreshing] = useState(false)
  const refreshTimersRef = useRef(new Set<number>())

  useEffect(() => {
    const trimmed = searchTerm.trim()
    if (trimmed === debouncedSearch) return
    debounceRef.current = setTimeout(() => {
      setDebouncedSearch(trimmed)
    }, 300)
    return () => {
      if (debounceRef.current) clearTimeout(debounceRef.current)
    }
  }, [searchTerm, debouncedSearch])

  useEffect(() => {
    const timers = refreshTimersRef.current
    return () => {
      for (const timerId of timers) window.clearTimeout(timerId)
    }
  }, [])

  const filters = useMemo<AuditLogFilters>(() => {
    return {
      search: debouncedSearch || undefined,
      resourceType: selectedTypes.length > 0 ? selectedTypes.join(',') : undefined,
      startDate: getStartDateFromTimeRange(timeRange, customStartDate)?.toISOString(),
      endDate: getEndDateFromTimeRange(timeRange, customEndDate)?.toISOString(),
    }
  }, [debouncedSearch, selectedTypes, timeRange, customStartDate, customEndDate])

  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, refetch } =
    useAuditLogs(filters)

  const allEntries = useMemo(() => {
    if (!data?.pages) return []
    return data.pages.flatMap((page) => page.data)
  }, [data])

  const typeDisplayLabel =
    selectedTypes.length === 0
      ? 'All types'
      : selectedTypes.length === 1
        ? RESOURCE_TYPE_OPTIONS.find((t) => t.value === selectedTypes[0])?.label || '1 selected'
        : `${selectedTypes.length} types`

  const timeDisplayLabel =
    timeRange === 'Custom range' && customStartDate && customEndDate