EvoBGP/apps/web/src/routes/_auth/modules/index.tsx

import { Link, createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { Plus, RefreshCw } from 'lucide-react'

import { Button } from '@evobgp/ui/components/button'

import { FrameDataGrid } from '@/components/reui-kit'
import { ProjectsEmptyState } from '@/components/patterns/projects-empty-state'
import { ModulesListGrid } from '@/components/modules/modules-list-grid'
import { PageHeader } from '@/components/page-header'
import { QueryState } from '@/components/query-state'
import { TableSkeleton } from '@/components/skeletons'
import { modulesListQueryOptions } from '@/queries/modules'

export const Route = createFileRoute('/_auth/modules/')({
  component: ModulesListComponent,
})

function ModulesListComponent() {
  const query = useQuery(modulesListQueryOptions())

  return (
    <div className="flex flex-col gap-6">
      <PageHeader
        title="Модули"
        description="Маршрутные списки: AS, CDN, домены, IP-диапазоны"
        actions={
          <>
            <Button
              variant="outline"
              size="sm"
              onClick={() => query.refetch()}
              disabled={query.isFetching}
            >
              <RefreshCw className={query.isFetching ? 'animate-spin' : ''} />
              Обновить
            </Button>
          </>
        }
      />

      <FrameDataGrid
        title="Все модули"
        actions={
          <Button size="sm" render={<Link to="/modules/new" />}>
            <Plus />
            Создать
          </Button>
        }
      >
        <QueryState
          data={query.data?.items}
          isLoading={query.isLoading}
          isError={query.isError}
          error={query.error}
          empty={query.data?.items?.length === 0}
          emptyContent={<ProjectsEmptyState />}
          skeleton={<TableSkeleton rows={6} cols={5} />}
          onRetry={() => query.refetch()}
        >
          {(items) => (
            <ModulesListGrid
              items={items}
              isLoading={query.isFetching && !query.isLoading}
            />
          )}
        </QueryState>
      </FrameDataGrid>
    </div>
  )
}