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

import classNames from 'classnames'
import Container from '@/components/shared/Container'
import { APP_NAME } from '@/constants/app.constant'
import { PAGE_CONTAINER_GUTTER_X } from '@/constants/theme.constant'
import { useStoreActions, useStoreState } from '@/store'
import { Link, useNavigate } from 'react-router-dom'
import { ROUTES_ENUM } from '@/routes/route.constant'
import UiDialog from '@/views/shared/UiDialog'

export type FooterPageContainerType = 'gutterless' | 'contained'

type FooterProps = {
  pageContainerType: FooterPageContainerType
}

const FooterContent = () => {
  const navigate = useNavigate()
  const { currentUiVersion } = useStoreState((a) => a.locale)
  const { setUiVersion } = useStoreActions((a) => a.locale)

  const apiConfig = useStoreState((state) => state.abpConfig.config?.extraProperties)

  const uiMode = import.meta.env.MODE
  const reactAppVersion  = import.meta.env.VITE_REACT_APP_VERSION

  return (
    <>
      <div className="flex flex-col sm:flex-row items-center justify-between w-full">
        <div className="space-x-1">
          <span>Copyright &copy; {new Date().getFullYear()}</span>
          <span className="font-semibold">{APP_NAME}</span>
        </div>
        <Link to={ROUTES_ENUM.protected.admin.changeLog}>
          <div className="text-muted capitalize">
            <span>
              <b>UI: </b>
              {uiMode}:{currentUiVersion}
            </span>
            <span className="mx-2">|</span>
            {apiConfig && (
              <span>
                <b>API: </b>
                {apiConfig['environment'].toString()}:{apiConfig['version'].toString()}
              </span>
            )}
          </div>
        </Link>
      </div>
      {reactAppVersion  != currentUiVersion && (
        <UiDialog
          key={`version-${reactAppVersion }`}
          isOpen={true}
          type="info"
          onConfirm={() => {
            setUiVersion(reactAppVersion )
            navigate(ROUTES_ENUM.protected.admin.changeLog)
          }}
          title="🎉 Yeni Güncelleme"
        >
          Sözsoft Kurs Platform Sistemi güncellendi.
          <p>Detayları, "Güncelleme Günlüğü" ekranında görebilirsiniz.</p>
        </UiDialog>
      )}
    </>
  )
}

export default function Footer({ pageContainerType = 'contained' }: FooterProps) {
  return (
    <footer
      className={classNames(`print:hidden footer flex flex-auto items-center h-6 ${PAGE_CONTAINER_GUTTER_X}`)}
    >
      {pageContainerType === 'contained' ? (
        <Container>
          <FooterContent />
        </Container>
      ) : (
        <FooterContent />
      )}
    </footer>
  )
}