erp-platform/ui/src/components/template/UserDropdown.tsx

import type { CommonProps } from '@/@types/common'
import Dropdown from '@/components/ui/Dropdown'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useStoreState } from '@/store'
import withHeaderItem from '@/utils/hoc/withHeaderItem'
import useAuth from '@/utils/hooks/useAuth'
import { useLocalization } from '@/utils/hooks/useLocalization'
import classNames from 'classnames'
import { FiActivity } from 'react-icons/fi'
import { HiOutlineLogout, HiOutlineUser } from 'react-icons/hi'
import { Link } from 'react-router-dom'
import { Avatar } from '../ui'

type DropdownList = {
  label: string
  path: string
  icon: JSX.Element
}

const _UserDropdown = ({ className }: CommonProps) => {
  const { userName, name, email, avatar } = useStoreState((state) => state.auth.user)
  const tenant = useStoreState((state) => state.abpConfig.config?.currentTenant)
  const { translate } = useLocalization()
  const { signOut } = useAuth()

  const dropdownItemList: DropdownList[] = [
    {
      label: translate('::Abp.Identity.Profile'),
      path: ROUTES_ENUM.protected.admin.profile.general,
      icon: <HiOutlineUser />,
    },
    {
      label: translate('::Abp.Identity.ActivityLogs'),
      path: ROUTES_ENUM.protected.admin.activityLog,
      icon: <FiActivity />,
    },
  ]

  const UserAvatar = (
    <div className={classNames(className, 'flex items-center gap-2')}>
      <Avatar size={32} shape="circle" src={avatar} alt="avatar" />
      <div className="hidden md:block">
        <div className="text-xs">{userName}</div>
        <div className="font-bold">{name}</div>
        <div className="font-bold italic">{tenant?.name}</div>
      </div>
    </div>
  )

  return (
    <div>
      <Dropdown menuStyle={{ minWidth: 240 }} renderTitle={UserAvatar} placement="bottom-end">
        <Dropdown.Item variant="header">
          <div className="py-2 px-3 flex items-center gap-2">
            <Avatar shape="circle" src={avatar} alt="avatar" />
            <div>
              <div className="font-bold text-gray-900 dark:text-gray-100">{name}</div>
              <div className="text-xs">{email}</div>
            </div>
          </div>
        </Dropdown.Item>
        <Dropdown.Item variant="divider" />
        {dropdownItemList.map((item) => (
          <Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
            <Link className="flex h-full w-full px-2" to={item.path}>
              <span className="flex gap-2 items-center w-full">
                <span className="text-xl opacity-50">{item.icon}</span>
                <span>{item.label}</span>
              </span>
            </Link>
          </Dropdown.Item>
        ))}
        {/* <Dropdown.Item variant="divider" /> */}
        <Dropdown.Item eventKey="Sign Out" className="gap-2" onClick={signOut}>
          <span className="text-xl opacity-50">
            <HiOutlineLogout />
          </span>
          <span>{translate('::Abp.Identity.SignOut')} </span>
        </Dropdown.Item>
      </Dropdown>
    </div>
  )
}

const UserDropdown = withHeaderItem(_UserDropdown)

export default UserDropdown