sozsoft-platform/ui/src/views/admin/activityLog/ActivityLog.tsx

import AdaptableCard from '@/components/shared/AdaptableCard'
import Container from '@/components/shared/Container'
import Drawer from '@/components/ui/Drawer'
import Button from '@/components/ui/Button'
import NotificationChannels from '@/constants/notification-channel.enum'
import { NotificationDto } from '@/proxy/notification/models'
import { getList } from '@/services/notification.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import dayjs from 'dayjs'
import { Dictionary } from 'lodash'
import forOwn from 'lodash/forOwn'
import groupBy from 'lodash/groupBy'
import has from 'lodash/has'
import merge from 'lodash/merge'
import { useEffect, useState } from 'react'
import Log from './components/Log'
import LogFilter from './components/LogFilter'
import { Helmet } from 'react-helmet'
import { APP_NAME } from '@/constants/app.constant'
import { DIR_RTL } from '@/constants/theme.constant'
import { useStoreState } from '@/store'

const itemsPerPage = 10

const ActivityLog = () => {
  const { translate } = useLocalization()

  const [loading, setLoading] = useState(false)
  const [notifications, setNotifications] = useState<Dictionary<NotificationDto[]>>({})
  const [page, setPage] = useState(0)
  const [hasMore, setHasMore] = useState(false)
  const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false)
  const direction = useStoreState((state) => state.theme.direction)
  const [filter, setFilter] = useState<string[]>([
    NotificationChannels.Desktop,
    NotificationChannels.Mail,
    NotificationChannels.Rocket,
    NotificationChannels.Sms,
    NotificationChannels.UiActivity,
    NotificationChannels.UiToast,
    NotificationChannels.WhatsApp,
  ])

  const fetchData = async (isLoadmore: boolean = false) => {
    setLoading(true)
    const response = await getList({
      maxResultCount: itemsPerPage,
      skipCount: page * itemsPerPage,
      sorting: 'CreationTime DESC',
      channels: filter,
      isListRequest: true,
    })
    const items = response.data?.items ?? []

    const currentItemCount = page * itemsPerPage + items.length
    setHasMore((response.data?.totalCount ?? 0) > currentItemCount)
    const logs = groupBy(items, (a) => dayjs(a.creationTime).format('YYYY-MM-DD'))

    if (isLoadmore) {
      forOwn(notifications, function (value, key) {
        if (has(logs, key)) {
          notifications[key] = [...notifications[key], ...logs[key]]
          delete logs[key]
        }
      })
      setNotifications(merge(notifications, logs))
    } else {
      setNotifications(logs)
    }
    setLoading(false)
  }

  useEffect(() => {
    fetchData(page > 0)
  }, [page, filter])

  const handleFilterChange = (value: string[]) => {
    setPage(0)
    setNotifications({})
    setHasMore(false)
    setFilter(value)
    setIsFilterDrawerOpen(false)
  }

  return (
    <Container>
      <Helmet
        titleTemplate={`%s | ${APP_NAME}`}
        title={translate('::' + 'Abp.Identity.ActivityLogs')}
        defaultTitle={APP_NAME}
      ></Helmet>

      <AdaptableCard className="overflow-hidden">
        <div className="w-full">
          <div className="mb-5 flex items-center justify-between gap-3">
            <h3 className="text-xl font-semibold md:text-2xl">
              {translate('::Abp.Identity.ActivityLogs')}
            </h3>
            <Button
              className="lg:hidden"
              size="sm"
              variant="twoTone"
              onClick={() => setIsFilterDrawerOpen(true)}
            >
              {translate('::Abp.Identity.ActivityLogs.Filters')}
            </Button>
          </div>

          <div className="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
            <div className="min-w-0 rounded-xl border border-gray-200 bg-white p-4 lg:p-6">
              <Log
                notifications={notifications}
                isLoading={loading}
                onLoadMore={() => setPage((prev) => prev + 1)}
                loadable={hasMore}
              ></Log>
            </div>

            <div className="hidden lg:block">
              <LogFilter filter={filter} onFilterChange={handleFilterChange} useAffix />
            </div>
          </div>
        </div>

        <Drawer
          title={translate('::Abp.Identity.ActivityLogs.Filters')}
          isOpen={isFilterDrawerOpen}
          width={340}
          placement={direction === DIR_RTL ? 'right' : 'left'}
          onClose={() => setIsFilterDrawerOpen(false)}
          onRequestClose={() => setIsFilterDrawerOpen(false)}
        >
          <LogFilter
            filter={filter}
            onFilterChange={handleFilterChange}
            useAffix={false}
            className="border-none p-0"
          />
        </Drawer>
      </AdaptableCard>
    </Container>
  )
}

export default ActivityLog