task-b

task-b.1
complere

src/app/dashboard/crm-demo/approvals/page.tsx

@@ -0,0 +1,26 @@
+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>
+  );
+}

src/app/dashboard/crm-demo/customers/[id]/page.tsx

@@ -0,0 +1,24 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import PageContainer from '@/components/layout/page-container';
+import { customerByIdOptions } from '@/features/crm-demo/api/queries';
+import { CustomerDetailPage } from '@/features/crm-demo/components/customer-detail';
+import { getQueryClient } from '@/lib/query-client';
+
+type PageProps = { params: Promise<{ id: string }> };
+
+export default async function CustomerDetailRoute({ params }: PageProps) {
+  const { id } = await params;
+  const queryClient = getQueryClient();
+  void queryClient.prefetchQuery(customerByIdOptions(id));
+
+  return (
+    <PageContainer
+      pageTitle='Customer Detail'
+      pageDescription='Overview, contacts, shared contacts, enquiries, quotations, and activity log'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <CustomerDetailPage id={id} />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/customers/page.tsx

@@ -0,0 +1,49 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import type { SearchParams } from 'nuqs/server';
+import PageContainer from '@/components/layout/page-container';
+import { crmReferenceQueryOptions, customersQueryOptions } from '@/features/crm-demo/api/queries';
+import { CustomersTablePage } from '@/features/crm-demo/components/customers-table';
+import { getQueryClient } from '@/lib/query-client';
+import { searchParamsCache } from '@/lib/searchparams';
+
+export const metadata = {
+  title: 'Dashboard: CRM Customers'
+};
+
+export default async function CustomersRoute({
+  searchParams
+}: {
+  searchParams: Promise<SearchParams>;
+}) {
+  searchParamsCache.parse(await searchParams);
+  const page = searchParamsCache.get('page');
+  const perPage = searchParamsCache.get('perPage');
+  const search = searchParamsCache.get('name');
+  const status = searchParamsCache.get('customerStatus');
+  const branch = searchParamsCache.get('branch');
+  const sort = searchParamsCache.get('sort');
+  const queryClient = getQueryClient();
+
+  void queryClient.prefetchQuery(crmReferenceQueryOptions());
+  void queryClient.prefetchQuery(
+    customersQueryOptions({
+      page,
+      limit: perPage,
+      ...(search && { search }),
+      ...(status && { status }),
+      ...(branch && { branch }),
+      ...(sort && { sort })
+    })
+  );
+
+  return (
+    <PageContainer
+      pageTitle='Customers'
+      pageDescription='Customer master พร้อม status, branch, contacts และ drawer สำหรับ create/edit'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <CustomersTablePage />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/enquiries/[id]/page.tsx

@@ -0,0 +1,24 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import PageContainer from '@/components/layout/page-container';
+import { enquiryByIdOptions } from '@/features/crm-demo/api/queries';
+import { EnquiryDetailPage } from '@/features/crm-demo/components/enquiry-detail';
+import { getQueryClient } from '@/lib/query-client';
+
+type PageProps = { params: Promise<{ id: string }> };
+
+export default async function EnquiryDetailRoute({ params }: PageProps) {
+  const { id } = await params;
+  const queryClient = getQueryClient();
+  void queryClient.prefetchQuery(enquiryByIdOptions(id));
+
+  return (
+    <PageContainer
+      pageTitle='Enquiry Detail'
+      pageDescription='Header summary, customer/contact, requirement summary, timeline, and related quotations'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <EnquiryDetailPage id={id} />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/enquiries/page.tsx

@@ -0,0 +1,55 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import type { SearchParams } from 'nuqs/server';
+import PageContainer from '@/components/layout/page-container';
+import { crmReferenceQueryOptions, enquiriesQueryOptions } from '@/features/crm-demo/api/queries';
+import { EnquiriesTablePage } from '@/features/crm-demo/components/enquiries-table';
+import { getQueryClient } from '@/lib/query-client';
+import { searchParamsCache } from '@/lib/searchparams';
+
+export const metadata = {
+  title: 'Dashboard: CRM Enquiries'
+};
+
+export default async function EnquiriesRoute({
+  searchParams
+}: {
+  searchParams: Promise<SearchParams>;
+}) {
+  searchParamsCache.parse(await searchParams);
+  const page = searchParamsCache.get('page');
+  const perPage = searchParamsCache.get('perPage');
+  const search = searchParamsCache.get('name');
+  const status = searchParamsCache.get('status');
+  const productType = searchParamsCache.get('productType');
+  const salesman = searchParamsCache.get('salesman');
+  const dateFrom = searchParamsCache.get('dateFrom');
+  const dateTo = searchParamsCache.get('dateTo');
+  const sort = searchParamsCache.get('sort');
+  const queryClient = getQueryClient();
+
+  void queryClient.prefetchQuery(crmReferenceQueryOptions());
+  void queryClient.prefetchQuery(
+    enquiriesQueryOptions({
+      page,
+      limit: perPage,
+      ...(search && { search }),
+      ...(status && { status }),
+      ...(productType && { productType }),
+      ...(salesman && { salesman }),
+      ...(dateFrom && { dateFrom }),
+      ...(dateTo && { dateTo }),
+      ...(sort && { sort })
+    })
+  );
+
+  return (
+    <PageContainer
+      pageTitle='Enquiries'
+      pageDescription='List ของ sales opportunity พร้อม filter, date range และ convert to quotation'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <EnquiriesTablePage />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/page.tsx

@@ -0,0 +1,25 @@
+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>
+  );
+}

src/app/dashboard/crm-demo/quotations/[id]/page.tsx

@@ -0,0 +1,24 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import PageContainer from '@/components/layout/page-container';
+import { quotationByIdOptions } from '@/features/crm-demo/api/queries';
+import { QuotationDetailPage } from '@/features/crm-demo/components/quotation-detail';
+import { getQueryClient } from '@/lib/query-client';
+
+type PageProps = { params: Promise<{ id: string }> };
+
+export default async function QuotationDetailRoute({ params }: PageProps) {
+  const { id } = await params;
+  const queryClient = getQueryClient();
+  void queryClient.prefetchQuery(quotationByIdOptions(id));
+
+  return (
+    <PageContainer
+      pageTitle='Quotation Detail'
+      pageDescription='Header, status, revision, customer roles, item table, approval timeline, and preview panel'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <QuotationDetailPage id={id} />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/quotations/page.tsx

@@ -0,0 +1,57 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import type { SearchParams } from 'nuqs/server';
+import PageContainer from '@/components/layout/page-container';
+import { crmReferenceQueryOptions, quotationsQueryOptions } from '@/features/crm-demo/api/queries';
+import { QuotationsTablePage } from '@/features/crm-demo/components/quotations-table';
+import { getQueryClient } from '@/lib/query-client';
+import { searchParamsCache } from '@/lib/searchparams';
+
+export const metadata = {
+  title: 'Dashboard: CRM Quotations'
+};
+
+export default async function QuotationsRoute({
+  searchParams
+}: {
+  searchParams: Promise<SearchParams>;
+}) {
+  searchParamsCache.parse(await searchParams);
+  const page = searchParamsCache.get('page');
+  const perPage = searchParamsCache.get('perPage');
+  const search = searchParamsCache.get('name');
+  const status = searchParamsCache.get('status');
+  const quotationType = searchParamsCache.get('quotationType');
+  const salesman = searchParamsCache.get('salesman');
+  const hot = searchParamsCache.get('hot');
+  const dateFrom = searchParamsCache.get('dateFrom');
+  const dateTo = searchParamsCache.get('dateTo');
+  const sort = searchParamsCache.get('sort');
+  const queryClient = getQueryClient();
+
+  void queryClient.prefetchQuery(crmReferenceQueryOptions());
+  void queryClient.prefetchQuery(
+    quotationsQueryOptions({
+      page,
+      limit: perPage,
+      ...(search && { search }),
+      ...(status && { status }),
+      ...(quotationType && { quotationType }),
+      ...(salesman && { salesman }),
+      ...(hot && { hot }),
+      ...(dateFrom && { dateFrom }),
+      ...(dateTo && { dateTo }),
+      ...(sort && { sort })
+    })
+  );
+
+  return (
+    <PageContainer
+      pageTitle='Quotations'
+      pageDescription='Quotation table with filters, hot project indicator, and kanban toggle'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <QuotationsTablePage />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/settings/document-sequences/page.tsx

@@ -0,0 +1,21 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import PageContainer from '@/components/layout/page-container';
+import { crmReferenceQueryOptions } from '@/features/crm-demo/api/queries';
+import { DocumentSequencesPage } from '@/features/crm-demo/components/settings-page';
+import { getQueryClient } from '@/lib/query-client';
+
+export default function DocumentSequencesRoute() {
+  const queryClient = getQueryClient();
+  void queryClient.prefetchQuery(crmReferenceQueryOptions());
+
+  return (
+    <PageContainer
+      pageTitle='Document Sequences'
+      pageDescription='Mock document sequence แยกตาม branch และ document type'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <DocumentSequencesPage />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/settings/master-options/page.tsx

@@ -0,0 +1,37 @@
+import { auth } from '@/auth';
+import PageContainer from '@/components/layout/page-container';
+import MasterOptionsListingPage from '@/features/foundation/master-options/components/master-options-listing';
+import { PERMISSIONS } from '@/lib/auth/rbac';
+import { searchParamsCache } from '@/lib/searchparams';
+import type { SearchParams } from 'nuqs/server';
+
+type PageProps = {
+  searchParams: Promise<SearchParams>;
+};
+
+export default async function MasterOptionsRoute(props: PageProps) {
+  const searchParams = await props.searchParams;
+  const session = await auth();
+  const canManageOptions =
+    session?.user?.systemRole === 'super_admin' ||
+    (!!session?.user?.activeOrganizationId &&
+      (session.user.activeMembershipRole === 'admin' ||
+        session.user.activePermissions.includes(PERMISSIONS.organizationManage)));
+
+  searchParamsCache.parse(searchParams);
+
+  return (
+    <PageContainer
+      pageTitle='Master Options'
+      pageDescription='Organization-scoped CRM option registry for statuses, product types, payment terms, currency, and branch abstractions.'
+      access={canManageOptions}
+      accessFallback={
+        <div className='text-muted-foreground rounded-lg border border-dashed p-8 text-center'>
+          You do not have access to master option management.
+        </div>
+      }
+    >
+      <MasterOptionsListingPage />
+    </PageContainer>
+  );
+}

src/app/dashboard/crm-demo/settings/templates/page.tsx

@@ -0,0 +1,21 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import PageContainer from '@/components/layout/page-container';
+import { crmReferenceQueryOptions } from '@/features/crm-demo/api/queries';
+import { TemplatesPage } from '@/features/crm-demo/components/settings-page';
+import { getQueryClient } from '@/lib/query-client';
+
+export default function TemplatesRoute() {
+  const queryClient = getQueryClient();
+  void queryClient.prefetchQuery(crmReferenceQueryOptions());
+
+  return (
+    <PageContainer
+      pageTitle='Quotation Templates'
+      pageDescription='Mock quotation template, version และ placeholder mappings สำหรับต่อยอด PDF preview'
+    >
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <TemplatesPage />
+      </HydrationBoundary>
+    </PageContainer>
+  );
+}

src/app/dashboard/crm/approvals/page.tsx

@@ -1,26 +1,28 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import PageContainer from '@/components/layout/page-container';
-import { approvalsQueryOptions, crmReferenceQueryOptions } from '@/features/crm/api/queries';
-import { ApprovalsPage } from '@/features/crm/components/approvals-page';
-import { getQueryClient } from '@/lib/query-client';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
 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'
+      pageDescription='Production approval workflow has not started yet. This route no longer imports demo approval state.'
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <ApprovalsPage />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Approval workflow pending'
+        summary='The old pending approvals mock list now lives only under crm-demo.'
+        foundationItems={[
+          'Permission checks',
+          'Business-role-aware access helpers',
+          'Branch validation',
+          'Audit log helper'
+        ]}
+        nextStep='Implement production approval workflow only after quotation persistence and routing are in place.'
+        demoHref='/dashboard/crm-demo/approvals'
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/customers/[id]/page.tsx

@@ -1,24 +1,30 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import PageContainer from '@/components/layout/page-container';
-import { customerByIdOptions } from '@/features/crm/api/queries';
-import { CustomerDetailPage } from '@/features/crm/components/customer-detail';
-import { getQueryClient } from '@/lib/query-client';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
-type PageProps = { params: Promise<{ id: string }> };
+type PageProps = {
+  params: Promise<{ id: string }>;
+};
 
 export default async function CustomerDetailRoute({ params }: PageProps) {
   const { id } = await params;
-  const queryClient = getQueryClient();
-  void queryClient.prefetchQuery(customerByIdOptions(id));
 
   return (
     <PageContainer
       pageTitle='Customer Detail'
-      pageDescription='Overview, contacts, shared contacts, enquiries, quotations, and activity log'
+      pageDescription={`Production detail route placeholder for customer ${id}.`}
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <CustomerDetailPage id={id} />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Customer detail pending'
+        summary='This detail route is intentionally isolated from legacy demo state until the production Customer module is implemented.'
+        foundationItems={[
+          'Current organization context',
+          'Permission checks',
+          'Branch validation abstraction',
+          'Audit log helper'
+        ]}
+        nextStep='Implement customer detail using real customer, contact, enquiry, and audit data from production APIs.'
+        demoHref={`/dashboard/crm-demo/customers/${id}`}
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/customers/page.tsx

@@ -1,49 +1,29 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
-import type { SearchParams } from 'nuqs/server';
 import PageContainer from '@/components/layout/page-container';
-import { crmReferenceQueryOptions, customersQueryOptions } from '@/features/crm/api/queries';
-import { CustomersTablePage } from '@/features/crm/components/customers-table';
-import { getQueryClient } from '@/lib/query-client';
-import { searchParamsCache } from '@/lib/searchparams';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
 export const metadata = {
   title: 'Dashboard: CRM Customers'
 };
 
-export default async function CustomersRoute({
-  searchParams
-}: {
-  searchParams: Promise<SearchParams>;
-}) {
-  searchParamsCache.parse(await searchParams);
-  const page = searchParamsCache.get('page');
-  const perPage = searchParamsCache.get('perPage');
-  const search = searchParamsCache.get('name');
-  const status = searchParamsCache.get('customerStatus');
-  const branch = searchParamsCache.get('branch');
-  const sort = searchParamsCache.get('sort');
-  const queryClient = getQueryClient();
-
-  void queryClient.prefetchQuery(crmReferenceQueryOptions());
-  void queryClient.prefetchQuery(
-    customersQueryOptions({
-      page,
-      limit: perPage,
-      ...(search && { search }),
-      ...(status && { status }),
-      ...(branch && { branch }),
-      ...(sort && { sort })
-    })
-  );
-
+export default function CustomersRoute() {
   return (
     <PageContainer
       pageTitle='Customers'
-      pageDescription='Customer master พร้อม status, branch, contacts และ drawer สำหรับ create/edit'
+      pageDescription='Production customer CRUD has not started yet. This route is reserved for the Task C implementation path.'
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <CustomersTablePage />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Customer module pending'
+        summary='The old customer list and form flow has been moved to the demo path so this route no longer depends on mock services.'
+        foundationItems={[
+          'Organization-first access boundary',
+          'Customer status options from master options',
+          'Branch scope abstraction for customer ownership',
+          'Document code generation for customer records',
+          'Audit hooks for future mutations'
+        ]}
+        nextStep='Implement Customer list, detail, and create/edit flows with real route handlers and persistence.'
+        demoHref='/dashboard/crm-demo/customers'
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/enquiries/[id]/page.tsx

@@ -1,24 +1,30 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import PageContainer from '@/components/layout/page-container';
-import { enquiryByIdOptions } from '@/features/crm/api/queries';
-import { EnquiryDetailPage } from '@/features/crm/components/enquiry-detail';
-import { getQueryClient } from '@/lib/query-client';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
-type PageProps = { params: Promise<{ id: string }> };
+type PageProps = {
+  params: Promise<{ id: string }>;
+};
 
 export default async function EnquiryDetailRoute({ params }: PageProps) {
   const { id } = await params;
-  const queryClient = getQueryClient();
-  void queryClient.prefetchQuery(enquiryByIdOptions(id));
 
   return (
     <PageContainer
       pageTitle='Enquiry Detail'
-      pageDescription='Header summary, customer/contact, requirement summary, timeline, and related quotations'
+      pageDescription={`Production detail route placeholder for enquiry ${id}.`}
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <EnquiryDetailPage id={id} />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Enquiry detail pending'
+        summary='This route is reserved for the production enquiry detail page and no longer imports the demo in-memory service.'
+        foundationItems={[
+          'Organization context',
+          'Branch validation',
+          'Master option lookups',
+          'Audit logging'
+        ]}
+        nextStep='Implement enquiry detail on top of persisted enquiry, activity, and relationship data.'
+        demoHref={`/dashboard/crm-demo/enquiries/${id}`}
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/enquiries/page.tsx

@@ -1,55 +1,29 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
-import type { SearchParams } from 'nuqs/server';
 import PageContainer from '@/components/layout/page-container';
-import { crmReferenceQueryOptions, enquiriesQueryOptions } from '@/features/crm/api/queries';
-import { EnquiriesTablePage } from '@/features/crm/components/enquiries-table';
-import { getQueryClient } from '@/lib/query-client';
-import { searchParamsCache } from '@/lib/searchparams';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
 export const metadata = {
   title: 'Dashboard: CRM Enquiries'
 };
 
-export default async function EnquiriesRoute({
-  searchParams
-}: {
-  searchParams: Promise<SearchParams>;
-}) {
-  searchParamsCache.parse(await searchParams);
-  const page = searchParamsCache.get('page');
-  const perPage = searchParamsCache.get('perPage');
-  const search = searchParamsCache.get('name');
-  const status = searchParamsCache.get('status');
-  const productType = searchParamsCache.get('productType');
-  const salesman = searchParamsCache.get('salesman');
-  const dateFrom = searchParamsCache.get('dateFrom');
-  const dateTo = searchParamsCache.get('dateTo');
-  const sort = searchParamsCache.get('sort');
-  const queryClient = getQueryClient();
-
-  void queryClient.prefetchQuery(crmReferenceQueryOptions());
-  void queryClient.prefetchQuery(
-    enquiriesQueryOptions({
-      page,
-      limit: perPage,
-      ...(search && { search }),
-      ...(status && { status }),
-      ...(productType && { productType }),
-      ...(salesman && { salesman }),
-      ...(dateFrom && { dateFrom }),
-      ...(dateTo && { dateTo }),
-      ...(sort && { sort })
-    })
-  );
-
+export default function EnquiriesRoute() {
   return (
     <PageContainer
       pageTitle='Enquiries'
-      pageDescription='List ของ sales opportunity พร้อม filter, date range และ convert to quotation'
+      pageDescription='Production enquiry flows are intentionally blocked from mock services until the real module is built.'
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <EnquiriesTablePage />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Enquiry module pending'
+        summary='The demo enquiry workflow remains available only under crm-demo while this production route stays foundation-safe.'
+        foundationItems={[
+          'Master option statuses',
+          'Organization-scoped document sequences',
+          'Branch scope abstraction',
+          'Permission layer',
+          'Audit logging'
+        ]}
+        nextStep='Implement enquiry listing and detail flows on production APIs after Customer and Contact are in place.'
+        demoHref='/dashboard/crm-demo/enquiries'
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/page.tsx

@@ -1,25 +1,31 @@
-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/api/queries';
-import { CrmDashboardPage } from '@/features/crm/components/crm-dashboard';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
 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'
+      pageTitle='CRM Foundation'
+      pageDescription='Production CRM routes are now isolated from legacy mock state and ready for foundation-backed modules.'
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <CrmDashboardPage />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='CRM production workspace'
+        summary='Task B.1 isolates the production CRM path so Task C can start on real architecture instead of in-memory demo state.'
+        foundationItems={[
+          'Current user context',
+          'Organization context',
+          'Permission helpers',
+          'Branch scope abstraction',
+          'Master options service',
+          'Document sequence service',
+          'Audit log helper'
+        ]}
+        nextStep='Start Customer and Contact modules on top of Route Handlers, Drizzle, and organization-first access checks.'
+        demoHref='/dashboard/crm-demo'
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/quotations/[id]/page.tsx

@@ -1,24 +1,30 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import PageContainer from '@/components/layout/page-container';
-import { quotationByIdOptions } from '@/features/crm/api/queries';
-import { QuotationDetailPage } from '@/features/crm/components/quotation-detail';
-import { getQueryClient } from '@/lib/query-client';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
-type PageProps = { params: Promise<{ id: string }> };
+type PageProps = {
+  params: Promise<{ id: string }>;
+};
 
 export default async function QuotationDetailRoute({ params }: PageProps) {
   const { id } = await params;
-  const queryClient = getQueryClient();
-  void queryClient.prefetchQuery(quotationByIdOptions(id));
 
   return (
     <PageContainer
       pageTitle='Quotation Detail'
-      pageDescription='Header, status, revision, customer roles, item table, approval timeline, and preview panel'
+      pageDescription={`Production detail route placeholder for quotation ${id}.`}
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <QuotationDetailPage id={id} />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Quotation detail pending'
+        summary='This production detail route is isolated from the legacy quotation preview and approval mock flow.'
+        foundationItems={[
+          'Document sequence helper',
+          'Branch scope validation',
+          'Master option lookups',
+          'Audit trail foundation'
+        ]}
+        nextStep='Implement production quotation detail with real approval, preview, and related-entity data.'
+        demoHref={`/dashboard/crm-demo/quotations/${id}`}
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/quotations/page.tsx

@@ -1,57 +1,28 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
-import type { SearchParams } from 'nuqs/server';
 import PageContainer from '@/components/layout/page-container';
-import { crmReferenceQueryOptions, quotationsQueryOptions } from '@/features/crm/api/queries';
-import { QuotationsTablePage } from '@/features/crm/components/quotations-table';
-import { getQueryClient } from '@/lib/query-client';
-import { searchParamsCache } from '@/lib/searchparams';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
 export const metadata = {
   title: 'Dashboard: CRM Quotations'
 };
 
-export default async function QuotationsRoute({
-  searchParams
-}: {
-  searchParams: Promise<SearchParams>;
-}) {
-  searchParamsCache.parse(await searchParams);
-  const page = searchParamsCache.get('page');
-  const perPage = searchParamsCache.get('perPage');
-  const search = searchParamsCache.get('name');
-  const status = searchParamsCache.get('status');
-  const quotationType = searchParamsCache.get('quotationType');
-  const salesman = searchParamsCache.get('salesman');
-  const hot = searchParamsCache.get('hot');
-  const dateFrom = searchParamsCache.get('dateFrom');
-  const dateTo = searchParamsCache.get('dateTo');
-  const sort = searchParamsCache.get('sort');
-  const queryClient = getQueryClient();
-
-  void queryClient.prefetchQuery(crmReferenceQueryOptions());
-  void queryClient.prefetchQuery(
-    quotationsQueryOptions({
-      page,
-      limit: perPage,
-      ...(search && { search }),
-      ...(status && { status }),
-      ...(quotationType && { quotationType }),
-      ...(salesman && { salesman }),
-      ...(hot && { hot }),
-      ...(dateFrom && { dateFrom }),
-      ...(dateTo && { dateTo }),
-      ...(sort && { sort })
-    })
-  );
-
+export default function QuotationsRoute() {
   return (
     <PageContainer
       pageTitle='Quotations'
-      pageDescription='Quotation table with filters, hot project indicator, and kanban toggle'
+      pageDescription='Production quotation flows will be built on foundation services, not on the legacy demo layer.'
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <QuotationsTablePage />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Quotation module pending'
+        summary='The mock quotation list, kanban, and detail experiences now live only under crm-demo.'
+        foundationItems={[
+          'Quotation status master options',
+          'Server-side document sequence generation',
+          'Organization and branch context',
+          'Audit log helper for future status changes'
+        ]}
+        nextStep='Implement quotation persistence and workflow after enquiry production APIs are ready.'
+        demoHref='/dashboard/crm-demo/quotations'
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/settings/document-sequences/page.tsx

@@ -1,21 +1,23 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import PageContainer from '@/components/layout/page-container';
-import { crmReferenceQueryOptions } from '@/features/crm/api/queries';
-import { DocumentSequencesPage } from '@/features/crm/components/settings-page';
-import { getQueryClient } from '@/lib/query-client';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
 export default function DocumentSequencesRoute() {
-  const queryClient = getQueryClient();
-  void queryClient.prefetchQuery(crmReferenceQueryOptions());
-
   return (
     <PageContainer
       pageTitle='Document Sequences'
-      pageDescription='Mock document sequence แยกตาม branch และ document type'
+      pageDescription='The sequence foundation is ready, but a production management UI has not been introduced yet.'
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <DocumentSequencesPage />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Document sequence UI pending'
+        summary='Sequence generation now exists in the foundation layer, but the old mock settings page has been isolated to the demo route.'
+        foundationItems={[
+          'Preview and generate sequence helpers',
+          'Organization-scoped sequence table',
+          'Branch-aware sequence support'
+        ]}
+        nextStep='Add a production management page only when the product requires editable sequence settings.'
+        demoHref='/dashboard/crm-demo/settings/document-sequences'
+      />
     </PageContainer>
   );
 }

src/app/dashboard/crm/settings/templates/page.tsx

@@ -1,21 +1,19 @@
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import PageContainer from '@/components/layout/page-container';
-import { crmReferenceQueryOptions } from '@/features/crm/api/queries';
-import { TemplatesPage } from '@/features/crm/components/settings-page';
-import { getQueryClient } from '@/lib/query-client';
+import { CrmProductionPlaceholder } from '@/features/foundation/components/crm-production-placeholder';
 
 export default function TemplatesRoute() {
-  const queryClient = getQueryClient();
-  void queryClient.prefetchQuery(crmReferenceQueryOptions());
-
   return (
     <PageContainer
       pageTitle='Quotation Templates'
-      pageDescription='Mock quotation template, version และ placeholder mappings สำหรับต่อยอด PDF preview'
+      pageDescription='Template management is not part of the production path yet and no longer depends on legacy demo services.'
     >
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <TemplatesPage />
-      </HydrationBoundary>
+      <CrmProductionPlaceholder
+        title='Template management pending'
+        summary='The placeholder quotation template demo has been isolated away from the production CRM route tree.'
+        foundationItems={['Master options foundation', 'Sequence foundation', 'Audit foundation']}
+        nextStep='Introduce template persistence only when the production quotation/PDF flow is designed.'
+        demoHref='/dashboard/crm-demo/settings/templates'
+      />
     </PageContainer>
   );
 }

src/app/dashboard/workspaces/page.tsx

@@ -1,14 +1,20 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import PageContainer from '@/components/layout/page-container';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { workspacesInfoContent } from '@/config/infoconfig';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
+import { useEffect, useState } from "react";
+import PageContainer from "@/components/layout/page-container";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { workspacesInfoContent } from "@/config/infoconfig";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
 
 type OrganizationSummary = {
   id: string;
@@ -23,12 +29,12 @@ type OrganizationSummary = {
 export default function WorkspacesPage() {
   const { data: session, status, update } = useSession();
   const router = useRouter();
-  const [workspaceName, setWorkspaceName] = useState('');
+  const [workspaceName, setWorkspaceName] = useState("");
   const [isCreating, setIsCreating] = useState(false);
   const [organizations, setOrganizations] = useState<OrganizationSummary[]>([]);
   const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
 
-  const canManageOrganizations = session?.user?.systemRole === 'super_admin';
+  const canManageOrganizations = session?.user?.systemRole === "super_admin";
 
   useEffect(() => {
     if (!canManageOrganizations) {
@@ -42,14 +48,14 @@ export default function WorkspacesPage() {
       setIsLoadingOrganizations(true);
 
       try {
-        const response = await fetch('/api/organizations');
+        const response = await fetch("/api/organizations");
         const data = (await response.json()) as {
           organizations?: OrganizationSummary[];
           message?: string;
         };
 
         if (!response.ok) {
-          throw new Error(data.message ?? 'Unable to load organizations');
+          throw new Error(data.message ?? "Unable to load organizations");
         }
 
         if (!cancelled) {
@@ -57,7 +63,11 @@ export default function WorkspacesPage() {
         }
       } catch (error) {
         if (!cancelled) {
-          toast.error(error instanceof Error ? error.message : 'Unable to load organizations');
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : "Unable to load organizations",
+          );
         }
       } finally {
         if (!cancelled) {
@@ -75,30 +85,34 @@ export default function WorkspacesPage() {
 
   const createWorkspace = async () => {
     if (!workspaceName.trim()) {
-      toast.error('Workspace name is required');
+      toast.error("Workspace name is required");
       return;
     }
 
     setIsCreating(true);
 
     try {
-      const response = await fetch('/api/organizations', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: workspaceName })
+      const response = await fetch("/api/organizations", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: workspaceName }),
       });
 
       if (!response.ok) {
-        const data = (await response.json().catch(() => null)) as { message?: string } | null;
-        throw new Error(data?.message ?? 'Unable to create workspace');
+        const data = (await response.json().catch(() => null)) as {
+          message?: string;
+        } | null;
+        throw new Error(data?.message ?? "Unable to create workspace");
       }
 
-      setWorkspaceName('');
+      setWorkspaceName("");
       await update();
       router.refresh();
-      toast.success('Workspace created');
+      toast.success("Workspace created");
     } catch (error) {
-      toast.error(error instanceof Error ? error.message : 'Unable to create workspace');
+      toast.error(
+        error instanceof Error ? error.message : "Unable to create workspace",
+      );
     } finally {
       setIsCreating(false);
     }
@@ -106,58 +120,65 @@ export default function WorkspacesPage() {
 
   return (
     <PageContainer
-      pageTitle='Workspaces'
-      pageDescription='Manage your app-owned workspaces and switch your active organization.'
+      pageTitle="Workspaces"
+      pageDescription="Manage your app-owned workspaces and switch your active organization."
       infoContent={workspacesInfoContent}
-      isLoading={status === 'loading' || (canManageOrganizations && isLoadingOrganizations)}
+      isLoading={
+        status === "loading" ||
+        (canManageOrganizations && isLoadingOrganizations)
+      }
       access={canManageOrganizations}
       accessFallback={
-        <div className='text-muted-foreground rounded-lg border border-dashed p-8 text-center'>
+        <div className="text-muted-foreground rounded-lg border border-dashed p-8 text-center">
           Only super admins can manage workspaces.
         </div>
       }
     >
-      <div className='grid gap-6 xl:grid-cols-[1.2fr_0.8fr]'>
+      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
         <Card>
           <CardHeader>
             <CardTitle>Your workspaces</CardTitle>
             <CardDescription>
-              The active workspace controls organization-scoped product data and access checks.
+              The active workspace controls organization-scoped product data and
+              access checks.
             </CardDescription>
           </CardHeader>
-          <CardContent className='space-y-3'>
+          <CardContent className="space-y-3">
             {organizations.length ? (
               organizations.map((organization) => {
-                const isActive = organization.id === session?.user?.activeOrganizationId;
+                const isActive =
+                  organization.id === session?.user?.activeOrganizationId;
 
                 return (
                   <button
                     key={organization.id}
-                    type='button'
-                    onClick={() => router.push('/dashboard/workspaces/team')}
+                    type="button"
+                    onClick={() => router.push("/dashboard/workspaces/team")}
                     aria-label={`Open workspace ${organization.name}`}
                     className={`w-full rounded-lg border p-4 text-left transition ${
-                      isActive ? 'border-primary bg-primary/5' : 'hover:bg-accent'
+                      isActive
+                        ? "border-primary bg-primary/5"
+                        : "hover:bg-accent"
                     }`}
                   >
-                    <div className='flex items-center justify-between gap-4'>
+                    <div className="flex items-center justify-between gap-4">
                       <div>
-                        <div className='font-semibold'>{organization.name}</div>
-                        <div className='text-muted-foreground text-sm'>
-                          Role: {organization.role} | Plan: {organization.plan}
+                        <div className="font-semibold">{organization.name}</div>
+                        <div className="text-muted-foreground text-sm">
+                          Role: {organization.role}
                         </div>
                       </div>
-                      <div className='text-xs font-medium uppercase'>
-                        {isActive ? 'Active' : 'Open'}
+                      <div className="text-xs font-medium uppercase">
+                        {isActive ? "Active" : "Open"}
                       </div>
                     </div>
                   </button>
                 );
               })
             ) : (
-              <div className='text-muted-foreground rounded-lg border border-dashed p-6 text-sm'>
-                No workspace found yet. Create your first workspace to unlock organization-scoped
-                product management.
+              <div className="text-muted-foreground rounded-lg border border-dashed p-6 text-sm">
+                No workspace found yet. Create your first workspace to unlock
+                organization-scoped product management.
               </div>
             )}
           </CardContent>
@@ -167,23 +188,28 @@ export default function WorkspacesPage() {
           <CardHeader>
             <CardTitle>Create workspace</CardTitle>
             <CardDescription>
-              This flow is limited to super admins in the organization RBAC model.
+              This flow is limited to super admins in the organization RBAC
+              model.
             </CardDescription>
           </CardHeader>
-          <CardContent className='space-y-4'>
-            <div className='space-y-2'>
-              <label htmlFor='workspace-name' className='text-sm font-medium'>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="workspace-name" className="text-sm font-medium">
                 Workspace name
               </label>
               <Input
-                id='workspace-name'
+                id="workspace-name"
                 value={workspaceName}
                 onChange={(event) => setWorkspaceName(event.target.value)}
-                placeholder='Acme Studio'
+                placeholder="Acme Studio"
                 disabled={isCreating}
               />
             </div>
-            <Button className='w-full' isLoading={isCreating} onClick={createWorkspace}>
+            <Button
+              className="w-full"
+              isLoading={isCreating}
+              onClick={createWorkspace}
+            >
               Create workspace
             </Button>
           </CardContent>