cloudflare-domain-manager/apps/web/src/routes/_auth/index.tsx

import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { certificatesQueryOptions, certSummaryQueryOptions, domainsListQueryOptions, groupsQueryOptions, serviceGroupsQueryOptions } from '@/queries'
import { PageHeader } from '@/components/page-header'
import { PageShell } from '@/components/page-shell'
import { QueryState } from '@/components/query-state'
import { SectionCards } from '@/components/section-cards'
import { SectionCardsSkeleton } from '@/components/section-cards-skeleton'

export const Route = createFileRoute('/_auth/')({
  loader: ({ context: { queryClient } }) =>
    Promise.all([
      queryClient.ensureQueryData(domainsListQueryOptions()),
      queryClient.ensureQueryData(certSummaryQueryOptions()),
      queryClient.ensureQueryData(groupsQueryOptions()),
      queryClient.ensureQueryData(serviceGroupsQueryOptions()),
    ]),
  component: DashboardPage,
})

function DashboardPage() {
  const {
    data: domains,
    isLoading: domainsLoading,
    isError: domainsError,
    error: domainsErr,
    refetch: refetchDomains,
  } = useQuery(domainsListQueryOptions())
  const {
    data: summary,
    isLoading: summaryLoading,
    isError: summaryError,
    error: summaryErr,
    refetch: refetchSummary,
  } = useQuery(certSummaryQueryOptions())
  const { data: certs } = useQuery(certificatesQueryOptions())
  const { data: groups } = useQuery(groupsQueryOptions())
  const { data: serviceData } = useQuery(serviceGroupsQueryOptions())

  const serviceCount =
    (serviceData?.groups.reduce((sum, g) => sum + g.services.length, 0) ?? 0) +
    (serviceData?.ungrouped.length ?? 0)

  const isLoading = domainsLoading || summaryLoading
  const isError = domainsError || summaryError
  const error = domainsErr ?? summaryErr

  return (
    <PageShell>
      <PageHeader
        title="Панель управления"
        description="Обзор доменов, групп, сервисов и сертификатов Cloudflare"
      />
      <QueryState
        isLoading={isLoading}
        isError={isError}
        error={error}
        skeleton={<SectionCardsSkeleton />}
        onRetry={() => {
          void refetchDomains()
          void refetchSummary()
        }}
      >
        <SectionCards
          domainCount={domains?.length ?? 0}
          certCount={certs?.length ?? 0}
          groupCount={groups?.length ?? 0}
          serviceCount={serviceCount}
          certSummary={summary}
        />
      </QueryState>
    </PageShell>
  )
}