import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import PageContainer from '@/components/layout/page-container';
import { getQueryClient } from '@/lib/query-client';
import { crmDashboardQueryOptions } from '@/features/crm-demo/api/queries';
import { CrmDashboardPage } from '@/features/crm-demo/components/crm-dashboard';

export const metadata = {
  title: 'Dashboard: CRM'
};

export default function CrmDashboardRoute() {
  const queryClient = getQueryClient();
  void queryClient.prefetchQuery(crmDashboardQueryOptions());

  return (
    <PageContainer
      pageTitle='CRM Dashboard'
      pageDescription='ภาพรวม workflow ของ Customer → Enquiry → Quotation → Approval → Won/Lost'
    >
      <HydrationBoundary state={dehydrate(queryClient)}>
        <CrmDashboardPage />
      </HydrationBoundary>
    </PageContainer>
  );
}
