erp-platform/ui/src/views/list/List.tsx

import { useLocation, useParams, useSearchParams } from 'react-router-dom'
import { useState } from 'react'
import Container from '@/components/shared/Container'
import Grid from './Grid'
import { FaList, FaTh, FaUser } from 'react-icons/fa'
import { useStoreState } from '@/store/store'
import classNames from 'classnames'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { GridDto } from '@/proxy/form/models'
import Card from './Card'
import { Button } from '@/components/ui'
import navigationIcon from '@/configs/navigation-icon.config'
import { navigationTreeToFlat } from '@/utils/navigation'

const List = () => {
  const params = useParams()
  const { translate } = useLocalization()
  const [searchParams] = useSearchParams()
  const listFormCode = params?.listFormCode ?? ''
  const [viewMode, setViewMode] = useState<'grid' | 'card'>('grid')
  const mode = useStoreState((state) => state.theme.mode)
  const [gridDto, setGridDto] = useState<GridDto>()
  const mainMenu = useStoreState((state) => state.abpConfig.menu.mainMenu)
  const location = useLocation()

  if (!listFormCode) return null

  const getCurrentMenuIcon = (className = 'w-6 h-6'): JSX.Element => {
    const menus = navigationTreeToFlat(mainMenu)
    const currentMenu = menus.find((menu) => menu.path === location.pathname)

    if (currentMenu?.icon) {
      const IconComponent = navigationIcon[currentMenu.icon] || FaUser
      return <IconComponent className={className} />
    }
    return <FaUser className={className} />
  }

  return (
    <Container>
      <div
        className={classNames('flex items-center border-solid gap-1 pb-1', {
          'border-gray-100': mode === 'light',
          'border-neutral-700': mode === 'dark',
        })}
      >
        <div className="flex items-center gap-2">
          {getCurrentMenuIcon('w-6 h-6')}
          <h3>{translate('::' + gridDto?.gridOptions?.title)}</h3>
        </div>

        {gridDto?.gridOptions?.description === gridDto?.gridOptions?.title ? (
          <p className="text-gray-600 mr-auto pt-1 ml-2"></p>
        ) : (
          <p className="text-gray-600 mr-auto pt-1 ml-2">
            {translate('::' + gridDto?.gridOptions?.description)}
          </p>
        )}

        <div className="flex gap-1">
          <Button
            size="xs"
            variant={viewMode === 'grid' ? 'solid' : 'default'}
            onClick={() => setViewMode('grid')}
            title="Grid Görünümü"
          >
            <FaList className="w-4 h-4" />
          </Button>
          <Button
            size="xs"
            variant={viewMode === 'card' ? 'solid' : 'default'}
            onClick={() => setViewMode('card')}
            title="Kart Görünümü"
          >
            <FaTh className="w-4 h-4" />
          </Button>
        </div>
      </div>

      {viewMode === 'grid' ? (
        <Grid
          listFormCode={listFormCode}
          searchParams={searchParams}
          isSubForm={false}
          onGridDtoLoad={setGridDto}
        />
      ) : (
        <Card listFormCode={listFormCode} searchParams={searchParams} />
      )}
    </Container>
  )
}

export default List