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

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

export default function ApprovalsRoute() {
  const queryClient = getQueryClient();
  void queryClient.prefetchQuery(crmReferenceQueryOptions());
  void queryClient.prefetchQuery(approvalsQueryOptions({ page: 1, limit: 10 }));

  return (
    <PageContainer
      pageTitle='Approvals'
      pageDescription='Pending approval list, approver level, branch, amount และ approve/reject dialog'
    >
      <HydrationBoundary state={dehydrate(queryClient)}>
        <ApprovalsPage />
      </HydrationBoundary>
    </PageContainer>
  );
}
