init

src/features/crm/api/mutations.ts

@@ -0,0 +1,78 @@
+import { mutationOptions } from '@tanstack/react-query';
+import { getQueryClient } from '@/lib/query-client';
+import {
+  approveQuotation,
+  convertEnquiryToQuotation,
+  createCustomer,
+  createQuotationRevision,
+  markQuotationStatus,
+  rejectQuotation,
+  revokeContactShare,
+  shareContact,
+  submitQuotationApproval,
+  updateCustomer
+} from './service';
+import { crmKeys } from './queries';
+import type {
+  ApprovalActionPayload,
+  ContactSharePayload,
+  CustomerMutationPayload,
+  Quotation
+} from './types';
+
+function invalidateCrm() {
+  return getQueryClient().invalidateQueries({ queryKey: crmKeys.all });
+}
+
+export const createCustomerMutation = mutationOptions({
+  mutationFn: (payload: CustomerMutationPayload) => createCustomer(payload),
+  onSuccess: invalidateCrm
+});
+
+export const updateCustomerMutation = mutationOptions({
+  mutationFn: ({ id, values }: { id: string; values: CustomerMutationPayload }) =>
+    updateCustomer(id, values),
+  onSuccess: invalidateCrm
+});
+
+export const convertEnquiryMutation = mutationOptions({
+  mutationFn: (enquiryId: string) => convertEnquiryToQuotation(enquiryId),
+  onSuccess: invalidateCrm
+});
+
+export const submitApprovalMutation = mutationOptions({
+  mutationFn: (quotationId: string) => submitQuotationApproval(quotationId),
+  onSuccess: invalidateCrm
+});
+
+export const approveQuotationMutation = mutationOptions({
+  mutationFn: (payload: ApprovalActionPayload) => approveQuotation(payload),
+  onSuccess: invalidateCrm
+});
+
+export const rejectQuotationMutation = mutationOptions({
+  mutationFn: (payload: ApprovalActionPayload) => rejectQuotation(payload),
+  onSuccess: invalidateCrm
+});
+
+export const createQuotationRevisionMutation = mutationOptions({
+  mutationFn: (quotationId: string) => createQuotationRevision(quotationId),
+  onSuccess: invalidateCrm
+});
+
+export const markQuotationStatusMutation = mutationOptions({
+  mutationFn: ({ quotationId, status }: { quotationId: string; status: Quotation['status'] }) =>
+    markQuotationStatus(quotationId, status),
+  onSuccess: invalidateCrm
+});
+
+export const shareContactMutation = mutationOptions({
+  mutationFn: (payload: ContactSharePayload) => shareContact(payload),
+  onSuccess: invalidateCrm
+});
+
+export const revokeContactShareMutation = mutationOptions({
+  mutationFn: ({ contactId, shareId }: { contactId: string; shareId: string }) =>
+    revokeContactShare(contactId, shareId),
+  onSuccess: invalidateCrm
+});

src/features/crm/api/queries.ts

@@ -0,0 +1,85 @@
+import { queryOptions } from '@tanstack/react-query';
+import {
+  getApprovals,
+  getCrmDashboardData,
+  getCrmReferenceData,
+  getCustomerById,
+  getCustomers,
+  getEnquiries,
+  getEnquiryById,
+  getQuotationById,
+  getQuotations
+} from './service';
+import type {
+  ApprovalFilters,
+  CustomerFilters,
+  EnquiryFilters,
+  QuotationFilters
+} from './types';
+
+export const crmKeys = {
+  all: ['crm'] as const,
+  references: () => [...crmKeys.all, 'references'] as const,
+  dashboard: () => [...crmKeys.all, 'dashboard'] as const,
+  customers: (filters: CustomerFilters) => [...crmKeys.all, 'customers', filters] as const,
+  customer: (id: string) => [...crmKeys.all, 'customer', id] as const,
+  enquiries: (filters: EnquiryFilters) => [...crmKeys.all, 'enquiries', filters] as const,
+  enquiry: (id: string) => [...crmKeys.all, 'enquiry', id] as const,
+  quotations: (filters: QuotationFilters) => [...crmKeys.all, 'quotations', filters] as const,
+  quotation: (id: string) => [...crmKeys.all, 'quotation', id] as const,
+  approvals: (filters: ApprovalFilters) => [...crmKeys.all, 'approvals', filters] as const
+};
+
+export const crmReferenceQueryOptions = () =>
+  queryOptions({
+    queryKey: crmKeys.references(),
+    queryFn: getCrmReferenceData
+  });
+
+export const crmDashboardQueryOptions = () =>
+  queryOptions({
+    queryKey: crmKeys.dashboard(),
+    queryFn: getCrmDashboardData
+  });
+
+export const customersQueryOptions = (filters: CustomerFilters) =>
+  queryOptions({
+    queryKey: crmKeys.customers(filters),
+    queryFn: () => getCustomers(filters)
+  });
+
+export const customerByIdOptions = (id: string) =>
+  queryOptions({
+    queryKey: crmKeys.customer(id),
+    queryFn: () => getCustomerById(id)
+  });
+
+export const enquiriesQueryOptions = (filters: EnquiryFilters) =>
+  queryOptions({
+    queryKey: crmKeys.enquiries(filters),
+    queryFn: () => getEnquiries(filters)
+  });
+
+export const enquiryByIdOptions = (id: string) =>
+  queryOptions({
+    queryKey: crmKeys.enquiry(id),
+    queryFn: () => getEnquiryById(id)
+  });
+
+export const quotationsQueryOptions = (filters: QuotationFilters) =>
+  queryOptions({
+    queryKey: crmKeys.quotations(filters),
+    queryFn: () => getQuotations(filters)
+  });
+
+export const quotationByIdOptions = (id: string) =>
+  queryOptions({
+    queryKey: crmKeys.quotation(id),
+    queryFn: () => getQuotationById(id)
+  });
+
+export const approvalsQueryOptions = (filters: ApprovalFilters) =>
+  queryOptions({
+    queryKey: crmKeys.approvals(filters),
+    queryFn: () => getApprovals(filters)
+  });

src/features/crm/api/service.ts

@@ -0,0 +1,474 @@
+import type {
+  ApprovalActionPayload,
+  ApprovalFilters,
+  ContactSharePayload,
+  CrmDashboardData,
+  CrmReferenceData,
+  Customer,
+  CustomerDetailResponse,
+  CustomerFilters,
+  CustomerMutationPayload,
+  Enquiry,
+  EnquiryDetailResponse,
+  EnquiryFilters,
+  PaginatedResponse,
+  Quotation,
+  QuotationDetailResponse,
+  QuotationFilters
+} from './types';
+import { initialCrmState, type CrmMockState } from '../data/mock-crm';
+
+function clone<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+let crmState: CrmMockState = clone(initialCrmState);
+
+function sortItems<T>(items: T[], sort?: string) {
+  if (!sort) return items;
+
+  try {
+    const parsed = JSON.parse(sort) as Array<{ id: string; desc?: boolean }>;
+    const [rule] = parsed;
+
+    if (!rule) return items;
+
+    return [...items].sort((a, b) => {
+      const av = String((a as Record<string, unknown>)[rule.id] ?? '');
+      const bv = String((b as Record<string, unknown>)[rule.id] ?? '');
+      return rule.desc ? bv.localeCompare(av) : av.localeCompare(bv);
+    });
+  } catch {
+    return items;
+  }
+}
+
+function paginate<T>(items: T[], page = 1, limit = 10): PaginatedResponse<T> {
+  const start = (page - 1) * limit;
+  return {
+    items: items.slice(start, start + limit),
+    totalItems: items.length
+  };
+}
+
+function findBranch(branchId: string) {
+  return crmState.branches.find((branch) => branch.id === branchId);
+}
+
+function findSalesperson(id: string) {
+  return crmState.salespersons.find((sales) => sales.id === id);
+}
+
+export async function getCrmReferenceData(): Promise<CrmReferenceData> {
+  return clone({
+    branches: crmState.branches,
+    salespersons: crmState.salespersons,
+    masterOptions: crmState.masterOptions,
+    sequences: crmState.sequences,
+    templates: crmState.templates
+  });
+}
+
+export async function getCrmDashboardData(): Promise<CrmDashboardData> {
+  const openEnquiries = crmState.enquiries.filter((enquiry) =>
+    ['new', 'qualifying', 'requirement', 'follow_up'].includes(enquiry.status)
+  );
+  const pendingQuotations = crmState.quotations.filter(
+    (quotation) => quotation.status === 'pending_approval'
+  );
+  const wonQuotations = crmState.quotations.filter((quotation) => quotation.status === 'accepted');
+  const lostQuotations = crmState.quotations.filter((quotation) => quotation.status === 'lost');
+  const hotQuotations = crmState.quotations.filter((quotation) => quotation.isHotProject);
+  const dueFollowUps = crmState.quotations.flatMap((quotation) => quotation.followUps).slice(0, 5);
+  const conversionRate = Math.round(
+    (wonQuotations.length / Math.max(1, crmState.enquiries.length)) * 100
+  );
+
+  return clone({
+    metrics: [
+      { id: 'm-1', label: 'Total Enquiries', value: String(crmState.enquiries.length), change: '+12%', trend: 'up' },
+      { id: 'm-2', label: 'Open Enquiries', value: String(openEnquiries.length), change: '+3', trend: 'up' },
+      { id: 'm-3', label: 'Pending Quotations', value: String(pendingQuotations.length), change: '+2', trend: 'up' },
+      { id: 'm-4', label: 'Pending Approval', value: String(crmState.approvals.filter((item) => item.status === 'pending').length), change: 'Needs review', trend: 'flat' },
+      { id: 'm-5', label: 'Won Amount', value: `${Math.round(wonQuotations.reduce((sum, item) => sum + item.totalAmount, 0) / 1000000)}M`, change: '+18%', trend: 'up' },
+      { id: 'm-6', label: 'Lost Amount', value: `${Math.round(lostQuotations.reduce((sum, item) => sum + item.totalAmount, 0) / 1000000)}M`, change: '-6%', trend: 'down' },
+      { id: 'm-7', label: 'Conversion Rate', value: `${conversionRate}%`, change: '+4pts', trend: 'up' },
+      { id: 'm-8', label: 'Hot Projects', value: String(hotQuotations.length), change: 'Focus', trend: 'flat' },
+      { id: 'm-9', label: 'Follow-up Due Today', value: String(dueFollowUps.length), change: 'Today', trend: 'flat' }
+    ],
+    enquiryPipeline: [
+      { label: 'New', value: crmState.enquiries.filter((item) => item.status === 'new').length },
+      { label: 'Qualifying', value: crmState.enquiries.filter((item) => item.status === 'qualifying').length },
+      { label: 'Requirement', value: crmState.enquiries.filter((item) => item.status === 'requirement').length },
+      { label: 'Follow Up', value: crmState.enquiries.filter((item) => item.status === 'follow_up').length },
+      { label: 'Converted', value: crmState.enquiries.filter((item) => item.status === 'converted').length }
+    ],
+    quotationPipeline: [
+      { label: 'Draft', value: crmState.quotations.filter((item) => item.status === 'draft').length },
+      { label: 'Pending', value: crmState.quotations.filter((item) => item.status === 'pending_approval').length },
+      { label: 'Sent', value: crmState.quotations.filter((item) => item.status === 'sent').length },
+      { label: 'Accepted', value: crmState.quotations.filter((item) => item.status === 'accepted').length },
+      { label: 'Lost', value: crmState.quotations.filter((item) => item.status === 'lost').length }
+    ],
+    salesPerformance: crmState.salespersons.map((salesperson) => ({
+      label: salesperson.nickname,
+      value: crmState.quotations.filter((quotation) => quotation.salesmanId === salesperson.id).length,
+      secondaryValue: crmState.quotations
+        .filter((quotation) => quotation.salesmanId === salesperson.id)
+        .reduce((sum, quotation) => sum + quotation.totalAmount, 0)
+    })),
+    competitorAnalysis: [
+      { label: 'Apex Dock', value: 3 },
+      { label: 'LiftPro', value: 2 },
+      { label: 'SunNorth', value: 1 },
+      { label: 'Others', value: 2 }
+    ],
+    wonLostTrend: [
+      { label: 'Jan', value: 1, secondaryValue: 0 },
+      { label: 'Feb', value: 2, secondaryValue: 1 },
+      { label: 'Mar', value: 1, secondaryValue: 1 },
+      { label: 'Apr', value: 3, secondaryValue: 1 },
+      { label: 'May', value: 2, secondaryValue: 2 },
+      { label: 'Jun', value: 2, secondaryValue: 1 }
+    ],
+    pendingApprovals: crmState.approvals.filter((item) => item.status === 'pending'),
+    hotQuotations,
+    dueFollowUps
+  });
+}
+
+export async function getCustomers(filters: CustomerFilters): Promise<PaginatedResponse<Customer>> {
+  let items = [...crmState.customers];
+
+  if (filters.search) {
+    const search = filters.search.toLowerCase();
+    items = items.filter(
+      (customer) =>
+        customer.name.toLowerCase().includes(search) || customer.code.toLowerCase().includes(search)
+    );
+  }
+
+  if (filters.status) {
+    items = items.filter((customer) => customer.customerStatus === filters.status);
+  }
+
+  if (filters.branch) {
+    items = items.filter((customer) => customer.branchId === filters.branch);
+  }
+
+  items = sortItems(items, filters.sort);
+  return clone(paginate(items, filters.page, filters.limit));
+}
+
+export async function getCustomerById(id: string): Promise<CustomerDetailResponse> {
+  const customer = crmState.customers.find((item) => item.id === id);
+  if (!customer) {
+    throw new Error('Customer not found');
+  }
+
+  return clone({
+    customer,
+    contacts: crmState.contacts.filter((contact) => contact.customerId === id),
+    shares: crmState.contactShares.filter((share) =>
+      crmState.contacts.some((contact) => contact.id === share.contactId && contact.customerId === id)
+    ),
+    shareLogs: crmState.contactShareLogs.filter((log) =>
+      crmState.contacts.some((contact) => contact.id === log.contactId && contact.customerId === id)
+    ),
+    enquiries: crmState.enquiries.filter((enquiry) => enquiry.customerId === id),
+    quotations: crmState.quotations.filter((quotation) =>
+      quotation.customerRoles.some((role) => role.customerId === id)
+    ),
+    auditEvents: crmState.auditEvents.filter((event) => event.entityId === id),
+    branch: findBranch(customer.branchId)!
+  });
+}
+
+export async function getEnquiries(filters: EnquiryFilters): Promise<PaginatedResponse<Enquiry>> {
+  let items = [...crmState.enquiries];
+
+  if (filters.search) {
+    const search = filters.search.toLowerCase();
+    items = items.filter(
+      (item) => item.code.toLowerCase().includes(search) || item.title.toLowerCase().includes(search)
+    );
+  }
+  if (filters.status) items = items.filter((item) => item.status === filters.status);
+  if (filters.productType) items = items.filter((item) => item.productType === filters.productType);
+  if (filters.salesman) items = items.filter((item) => item.salesmanId === filters.salesman);
+  if (filters.dateFrom) items = items.filter((item) => item.createdAt >= filters.dateFrom!);
+  if (filters.dateTo) items = items.filter((item) => item.createdAt <= `${filters.dateTo!}T23:59:59.999Z`);
+
+  items = sortItems(items, filters.sort);
+  return clone(paginate(items, filters.page, filters.limit));
+}
+
+export async function getEnquiryById(id: string): Promise<EnquiryDetailResponse> {
+  const enquiry = crmState.enquiries.find((item) => item.id === id);
+  if (!enquiry) {
+    throw new Error('Enquiry not found');
+  }
+
+  const customer = crmState.customers.find((item) => item.id === enquiry.customerId)!;
+  const contact = crmState.contacts.find((item) => item.id === enquiry.contactId)!;
+  return clone({
+    enquiry,
+    customer,
+    contact,
+    quotations: crmState.quotations.filter((quotation) => quotation.enquiryId === id),
+    branch: findBranch(enquiry.branchId)!,
+    salesman: findSalesperson(enquiry.salesmanId)!
+  });
+}
+
+export async function getQuotations(
+  filters: QuotationFilters
+): Promise<PaginatedResponse<Quotation>> {
+  let items = [...crmState.quotations];
+
+  if (filters.search) {
+    const search = filters.search.toLowerCase();
+    items = items.filter(
+      (quotation) =>
+        quotation.code.toLowerCase().includes(search) ||
+        quotation.project.toLowerCase().includes(search)
+    );
+  }
+  if (filters.status) items = items.filter((quotation) => quotation.status === filters.status);
+  if (filters.quotationType) items = items.filter((quotation) => quotation.quotationType === filters.quotationType);
+  if (filters.salesman) items = items.filter((quotation) => quotation.salesmanId === filters.salesman);
+  if (filters.hot) items = items.filter((quotation) => (filters.hot === 'yes' ? quotation.isHotProject : !quotation.isHotProject));
+  if (filters.dateFrom) items = items.filter((quotation) => quotation.quotationDate >= filters.dateFrom!);
+  if (filters.dateTo) items = items.filter((quotation) => quotation.quotationDate <= filters.dateTo!);
+
+  items = sortItems(items, filters.sort);
+  return clone(paginate(items, filters.page, filters.limit));
+}
+
+export async function getQuotationById(id: string): Promise<QuotationDetailResponse> {
+  const quotation = crmState.quotations.find((item) => item.id === id);
+  if (!quotation) {
+    throw new Error('Quotation not found');
+  }
+
+  const enquiry = crmState.enquiries.find((item) => item.id === quotation.enquiryId)!;
+  const customerIds = [...new Set(quotation.customerRoles.map((role) => role.customerId))];
+  const contactIds = [...new Set(quotation.customerRoles.map((role) => role.contactId).filter(Boolean))] as string[];
+
+  return clone({
+    quotation,
+    enquiry,
+    customers: crmState.customers.filter((item) => customerIds.includes(item.id)),
+    contacts: crmState.contacts.filter((item) => contactIds.includes(item.id)),
+    branch: findBranch(quotation.branchId)!,
+    salesman: findSalesperson(quotation.salesmanId)!,
+    saleAdmin: findSalesperson(quotation.saleAdminId)!,
+    auditEvents: crmState.auditEvents.filter((event) => quotation.auditEventIds.includes(event.id))
+  });
+}
+
+export async function getApprovals(filters: ApprovalFilters) {
+  let items = [...crmState.approvals];
+  if (filters.branch) items = items.filter((item) => item.branchId === filters.branch);
+  if (filters.status) items = items.filter((item) => item.status === filters.status);
+  return clone(paginate(items, filters.page, filters.limit));
+}
+
+export async function createCustomer(values: CustomerMutationPayload) {
+  const customer: Customer = { id: `cus-${Date.now()}`, contactIds: [], ...values };
+  crmState.customers.unshift(customer);
+  return clone(customer);
+}
+
+export async function updateCustomer(id: string, values: CustomerMutationPayload) {
+  crmState.customers = crmState.customers.map((customer) =>
+    customer.id === id ? { ...customer, ...values } : customer
+  );
+  return getCustomerById(id);
+}
+
+export async function convertEnquiryToQuotation(enquiryId: string) {
+  const enquiry = crmState.enquiries.find((item) => item.id === enquiryId);
+  if (!enquiry) throw new Error('Enquiry not found');
+
+  const nextId = `qt-${Date.now()}`;
+  const newQuotation: Quotation = {
+    id: nextId,
+    code: `QT2606-${String(crmState.quotations.length + 1).padStart(3, '0')}`,
+    enquiryId,
+    quotationDate: '2026-06-11',
+    validUntil: '2026-07-11',
+    quotationType: 'official',
+    project: enquiry.title,
+    siteLocation: enquiry.projectLocation,
+    customerRoles: [{ role: 'owner', customerId: enquiry.customerId, contactId: enquiry.contactId }],
+    salesmanId: enquiry.salesmanId,
+    saleAdminId: 'sp-2',
+    branchId: enquiry.branchId,
+    status: 'draft',
+    revision: 0,
+    totalAmount: enquiry.expectedValue,
+    chancePercent: enquiry.chancePercent,
+    isHotProject: enquiry.chancePercent >= 70,
+    items: [{ id: `${nextId}-item-1`, topic: 'Scope', description: enquiry.requirementSummary, quantity: 1, unit: 'lot', unitPrice: enquiry.expectedValue, amount: enquiry.expectedValue }],
+    topics: [
+      { id: `${nextId}-topic-1`, type: 'scope', label: 'Scope', items: [enquiry.requirementSummary] },
+      { id: `${nextId}-topic-2`, type: 'exclusion', label: 'Exclusion', items: ['To be confirmed'] },
+      { id: `${nextId}-topic-3`, type: 'payment', label: 'Payment', items: ['Pending setup'] }
+    ],
+    followUps: [],
+    attachments: [],
+    approvalSteps: [],
+    auditEventIds: []
+  };
+
+  crmState.quotations.unshift(newQuotation);
+  crmState.enquiries = crmState.enquiries.map((item) =>
+    item.id === enquiryId
+      ? {
+          ...item,
+          status: 'converted',
+          quotationIds: [...item.quotationIds, nextId],
+          activities: [
+            ...item.activities,
+            {
+              id: `${enquiryId}-activity-${Date.now()}`,
+              type: 'CONVERT',
+              title: 'Convert to quotation',
+              detail: `สร้าง ${newQuotation.code}`,
+              actorName: 'CRM Demo',
+              createdAt: '2026-06-11T10:00:00.000Z'
+            }
+          ]
+        }
+      : item
+  );
+
+  return clone(newQuotation);
+}
+
+export async function submitQuotationApproval(quotationId: string) {
+  crmState.quotations = crmState.quotations.map((quotation) =>
+    quotation.id === quotationId
+      ? {
+          ...quotation,
+          status: 'pending_approval',
+          approvalSteps:
+            quotation.approvalSteps.length > 0
+              ? quotation.approvalSteps
+              : [
+                  { id: `${quotationId}-ap-1`, level: 1, approverName: 'Sales Director', approverPosition: 'Director', status: 'pending' }
+                ]
+        }
+      : quotation
+  );
+}
+
+export async function approveQuotation(payload: ApprovalActionPayload) {
+  crmState.quotations = crmState.quotations.map((quotation) => {
+    if (quotation.id !== payload.quotationId) return quotation;
+
+    const nextSteps = quotation.approvalSteps.map((step, index) =>
+      index === quotation.approvalSteps.findIndex((item) => item.status === 'pending')
+        ? {
+            ...step,
+            status: 'approved',
+            actedAt: '2026-06-11T11:00:00.000Z',
+            comment: payload.comment
+          }
+        : step
+    );
+
+    const hasPending = nextSteps.some((step) => step.status === 'pending');
+    return {
+      ...quotation,
+      approvalSteps: nextSteps,
+      status: hasPending ? 'pending_approval' : 'approved',
+      approvedPdfUrl: hasPending ? quotation.approvedPdfUrl : `/mock/${quotation.code.toLowerCase()}.pdf`
+    };
+  });
+
+  crmState.approvals = crmState.approvals.map((item) =>
+    item.quotationId === payload.quotationId ? { ...item, status: 'approved' } : item
+  );
+}
+
+export async function rejectQuotation(payload: ApprovalActionPayload) {
+  crmState.quotations = crmState.quotations.map((quotation) =>
+    quotation.id === payload.quotationId
+      ? {
+          ...quotation,
+          status: 'rejected',
+          approvalSteps: quotation.approvalSteps.map((step, index) =>
+            index === quotation.approvalSteps.findIndex((item) => item.status === 'pending')
+              ? {
+                  ...step,
+                  status: 'rejected',
+                  actedAt: '2026-06-11T11:30:00.000Z',
+                  comment: payload.comment
+                }
+              : step
+          )
+        }
+      : quotation
+  );
+  crmState.approvals = crmState.approvals.map((item) =>
+    item.quotationId === payload.quotationId ? { ...item, status: 'rejected' } : item
+  );
+}
+
+export async function createQuotationRevision(quotationId: string) {
+  const quotation = crmState.quotations.find((item) => item.id === quotationId);
+  if (!quotation) throw new Error('Quotation not found');
+
+  const revisionNumber = quotation.revision + 1;
+  const newQuotation: Quotation = {
+    ...clone(quotation),
+    id: `${quotationId}-rev-${revisionNumber}`,
+    code: `${quotation.code}-R${String(revisionNumber).padStart(2, '0')}`,
+    revision: revisionNumber,
+    status: 'revised',
+    totalAmount: quotation.totalAmount + 125000
+  };
+
+  crmState.quotations.unshift(newQuotation);
+  return clone(newQuotation);
+}
+
+export async function markQuotationStatus(quotationId: string, status: Quotation['status']) {
+  crmState.quotations = crmState.quotations.map((quotation) =>
+    quotation.id === quotationId ? { ...quotation, status } : quotation
+  );
+}
+
+export async function shareContact(payload: ContactSharePayload) {
+  const share = {
+    id: `share-${Date.now()}`,
+    createdAt: '2026-06-11T12:00:00.000Z',
+    ...payload
+  };
+  crmState.contactShares.unshift(share);
+  crmState.contactShareLogs.unshift({
+    id: `share-log-${Date.now()}`,
+    contactId: payload.contactId,
+    action: 'SHARE',
+    targetUserName: payload.sharedWithUserName,
+    actorName: 'CRM Demo',
+    createdAt: '2026-06-11T12:00:00.000Z'
+  });
+}
+
+export async function revokeContactShare(contactId: string, shareId: string) {
+  const current = crmState.contactShares.find((share) => share.id === shareId);
+  crmState.contactShares = crmState.contactShares.filter((share) => share.id !== shareId);
+  if (current) {
+    crmState.contactShareLogs.unshift({
+      id: `share-log-${Date.now()}`,
+      contactId,
+      action: 'REVOKE',
+      targetUserName: current.sharedWithUserName,
+      actorName: 'CRM Demo',
+      createdAt: '2026-06-11T12:30:00.000Z'
+    });
+  }
+}

src/features/crm/api/types.ts

@@ -0,0 +1,392 @@
+export type CrmStatusTone = 'default' | 'secondary' | 'outline' | 'destructive';
+
+export interface CrmBranch {
+  id: string;
+  code: string;
+  name: string;
+  region: string;
+}
+
+export interface CrmSalesperson {
+  id: string;
+  name: string;
+  nickname: string;
+  branchId: string;
+  role: 'sales' | 'sale_admin' | 'manager';
+}
+
+export interface CustomerContact {
+  id: string;
+  customerId: string;
+  name: string;
+  position: string;
+  email: string;
+  phone: string;
+  lineId?: string;
+  isPrimary?: boolean;
+}
+
+export interface ContactShareLog {
+  id: string;
+  contactId: string;
+  action: 'SHARE' | 'REVOKE';
+  targetUserName: string;
+  actorName: string;
+  createdAt: string;
+}
+
+export interface ContactShare {
+  id: string;
+  contactId: string;
+  sharedWithUserId: string;
+  sharedWithUserName: string;
+  permission: 'view' | 'edit';
+  createdAt: string;
+}
+
+export interface Customer {
+  id: string;
+  code: string;
+  name: string;
+  taxId: string;
+  address: string;
+  province: string;
+  district: string;
+  subDistrict: string;
+  postalCode: string;
+  phone: string;
+  fax?: string;
+  email: string;
+  customerType: 'developer' | 'contractor' | 'owner' | 'consultant';
+  customerStatus: 'active' | 'prospect' | 'inactive';
+  branchId: string;
+  contactIds: string[];
+}
+
+export type EnquiryStatus =
+  | 'new'
+  | 'qualifying'
+  | 'requirement'
+  | 'follow_up'
+  | 'converted'
+  | 'closed_lost'
+  | 'cancelled';
+
+export interface EnquiryActivity {
+  id: string;
+  type: 'CALL' | 'MEETING' | 'VISIT' | 'NOTE' | 'UPDATE' | 'CONVERT';
+  title: string;
+  detail: string;
+  actorName: string;
+  createdAt: string;
+}
+
+export interface Enquiry {
+  id: string;
+  code: string;
+  title: string;
+  customerId: string;
+  contactId: string;
+  branchId: string;
+  salesmanId: string;
+  productType: 'crane' | 'dockdoor' | 'solarcell';
+  status: EnquiryStatus;
+  requirementSummary: string;
+  projectLocation: string;
+  chancePercent: number;
+  competitor: string;
+  expectedValue: number;
+  dueDate: string;
+  createdAt: string;
+  updatedAt: string;
+  quotationIds: string[];
+  activities: EnquiryActivity[];
+}
+
+export type QuotationStatus =
+  | 'draft'
+  | 'pending_approval'
+  | 'approved'
+  | 'rejected'
+  | 'sent'
+  | 'accepted'
+  | 'lost'
+  | 'cancelled'
+  | 'revised';
+
+export interface QuotationCustomerRole {
+  role: 'owner' | 'consultant' | 'contractor' | 'billing';
+  customerId: string;
+  contactId?: string;
+}
+
+export interface QuotationItem {
+  id: string;
+  topic: string;
+  description: string;
+  quantity: number;
+  unit: string;
+  unitPrice: number;
+  amount: number;
+}
+
+export interface QuotationTopic {
+  id: string;
+  type: 'scope' | 'exclusion' | 'payment';
+  label: string;
+  items: string[];
+}
+
+export interface QuotationFollowUp {
+  id: string;
+  title: string;
+  dueDate: string;
+  ownerName: string;
+  status: 'open' | 'done';
+}
+
+export interface QuotationAttachment {
+  id: string;
+  fileName: string;
+  fileType: 'pdf' | 'doc' | 'xls' | 'zip';
+  uploadedAt: string;
+}
+
+export interface ApprovalStep {
+  id: string;
+  level: number;
+  approverName: string;
+  approverPosition: string;
+  status: 'pending' | 'approved' | 'rejected';
+  actedAt?: string;
+  comment?: string;
+}
+
+export interface Quotation {
+  id: string;
+  code: string;
+  enquiryId: string;
+  quotationDate: string;
+  validUntil: string;
+  quotationType: 'budgetary' | 'official' | 'service';
+  project: string;
+  siteLocation: string;
+  customerRoles: QuotationCustomerRole[];
+  salesmanId: string;
+  saleAdminId: string;
+  branchId: string;
+  status: QuotationStatus;
+  revision: number;
+  totalAmount: number;
+  chancePercent: number;
+  isHotProject: boolean;
+  approvedPdfUrl?: string;
+  approvalSnapshot?: string;
+  items: QuotationItem[];
+  topics: QuotationTopic[];
+  followUps: QuotationFollowUp[];
+  attachments: QuotationAttachment[];
+  approvalSteps: ApprovalStep[];
+  auditEventIds: string[];
+}
+
+export interface ApprovalItem {
+  id: string;
+  quotationId: string;
+  quotationCode: string;
+  amount: number;
+  productType: string;
+  branchId: string;
+  submitterName: string;
+  approverLevel: number;
+  status: 'pending' | 'approved' | 'rejected';
+}
+
+export interface AuditEvent {
+  id: string;
+  entityType: 'customer' | 'enquiry' | 'quotation' | 'approval';
+  entityId: string;
+  action: 'CREATE' | 'UPDATE' | 'SEND' | 'APPROVE' | 'REJECT' | 'CONVERT' | 'REVISE';
+  actorName: string;
+  detail: string;
+  createdAt: string;
+}
+
+export interface DocumentSequence {
+  id: string;
+  documentType: 'enquiry' | 'quotation' | 'quotation_revision';
+  prefix: string;
+  period: string;
+  branchId: string;
+  currentNumber: number;
+  paddingLength: number;
+}
+
+export interface MasterOption {
+  id: string;
+  group: 'status' | 'product_type' | 'payment_term' | 'currency' | 'tax_rate';
+  code: string;
+  label: string;
+  description?: string;
+  active: boolean;
+}
+
+export interface TemplateMapping {
+  id: string;
+  key: string;
+  placeholder: string;
+  sourceField: string;
+}
+
+export interface QuotationTemplate {
+  id: string;
+  name: string;
+  version: string;
+  branchId?: string;
+  description: string;
+  mappings: TemplateMapping[];
+}
+
+export interface CrmDashboardMetric {
+  id: string;
+  label: string;
+  value: string;
+  change: string;
+  trend: 'up' | 'down' | 'flat';
+  tone?: CrmStatusTone;
+}
+
+export interface CrmChartDatum {
+  label: string;
+  value: number;
+  secondaryValue?: number;
+}
+
+export interface CrmDashboardData {
+  metrics: CrmDashboardMetric[];
+  enquiryPipeline: CrmChartDatum[];
+  quotationPipeline: CrmChartDatum[];
+  salesPerformance: CrmChartDatum[];
+  competitorAnalysis: CrmChartDatum[];
+  wonLostTrend: CrmChartDatum[];
+  pendingApprovals: ApprovalItem[];
+  hotQuotations: Quotation[];
+  dueFollowUps: QuotationFollowUp[];
+}
+
+export interface CustomerFilters {
+  page?: number;
+  limit?: number;
+  search?: string;
+  status?: string;
+  branch?: string;
+  sort?: string;
+}
+
+export interface EnquiryFilters {
+  page?: number;
+  limit?: number;
+  search?: string;
+  status?: string;
+  productType?: string;
+  salesman?: string;
+  dateFrom?: string;
+  dateTo?: string;
+  sort?: string;
+}
+
+export interface QuotationFilters {
+  page?: number;
+  limit?: number;
+  search?: string;
+  status?: string;
+  quotationType?: string;
+  salesman?: string;
+  hot?: string;
+  dateFrom?: string;
+  dateTo?: string;
+  sort?: string;
+}
+
+export interface ApprovalFilters {
+  page?: number;
+  limit?: number;
+  branch?: string;
+  status?: string;
+}
+
+export interface PaginatedResponse<T> {
+  items: T[];
+  totalItems: number;
+  summary?: {
+    activeFilters: number;
+  };
+}
+
+export interface CustomerDetailResponse {
+  customer: Customer;
+  contacts: CustomerContact[];
+  shares: ContactShare[];
+  shareLogs: ContactShareLog[];
+  enquiries: Enquiry[];
+  quotations: Quotation[];
+  auditEvents: AuditEvent[];
+  branch: CrmBranch;
+}
+
+export interface EnquiryDetailResponse {
+  enquiry: Enquiry;
+  customer: Customer;
+  contact: CustomerContact;
+  quotations: Quotation[];
+  branch: CrmBranch;
+  salesman: CrmSalesperson;
+}
+
+export interface QuotationDetailResponse {
+  quotation: Quotation;
+  enquiry: Enquiry;
+  customers: Customer[];
+  contacts: CustomerContact[];
+  branch: CrmBranch;
+  salesman: CrmSalesperson;
+  saleAdmin: CrmSalesperson;
+  auditEvents: AuditEvent[];
+}
+
+export interface CrmReferenceData {
+  branches: CrmBranch[];
+  salespersons: CrmSalesperson[];
+  masterOptions: MasterOption[];
+  sequences: DocumentSequence[];
+  templates: QuotationTemplate[];
+}
+
+export interface CustomerMutationPayload {
+  id?: string;
+  code: string;
+  name: string;
+  taxId: string;
+  email: string;
+  phone: string;
+  customerType: Customer['customerType'];
+  customerStatus: Customer['customerStatus'];
+  branchId: string;
+  address: string;
+  province: string;
+  district: string;
+  subDistrict: string;
+  postalCode: string;
+}
+
+export interface ApprovalActionPayload {
+  quotationId: string;
+  comment?: string;
+}
+
+export interface ContactSharePayload {
+  contactId: string;
+  sharedWithUserId: string;
+  sharedWithUserName: string;
+  permission: 'view' | 'edit';
+}

src/features/crm/components/approvals-page.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { approvalsQueryOptions, crmReferenceQueryOptions } from '../api/queries';
+import { approveQuotationMutation, rejectQuotationMutation } from '../api/mutations';
+import { BranchBadge, SectionCard, TimelineList } from './shared';
+import { formatCurrency } from '../utils/format';
+
+function DecisionDialog({
+  label,
+  description,
+  isPending,
+  onConfirm
+}: {
+  label: string;
+  description: string;
+  isPending: boolean;
+  onConfirm: (comment: string) => void;
+}) {
+  const [comment, setComment] = useState('');
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant='outline' size='sm'>
+          {label}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{label}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <Input value={comment} onChange={(event) => setComment(event.target.value)} placeholder='Comment' />
+        <DialogFooter>
+          <Button isLoading={isPending} onClick={() => onConfirm(comment)}>
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function ApprovalsPage() {
+  const { data } = useSuspenseQuery(approvalsQueryOptions({ page: 1, limit: 10 }));
+  const { data: reference } = useSuspenseQuery(crmReferenceQueryOptions());
+  const baseApproveMutation = approveQuotationMutation;
+  const baseRejectMutation = rejectQuotationMutation;
+
+  const approveMutation = useMutation({
+    ...baseApproveMutation,
+    onSuccess: async (...args) => {
+      await baseApproveMutation.onSuccess?.(...args);
+      toast.success('Approve mock สำเร็จ');
+    }
+  });
+
+  const rejectMutation = useMutation({
+    ...baseRejectMutation,
+    onSuccess: async (...args) => {
+      await baseRejectMutation.onSuccess?.(...args);
+      toast.success('Reject mock สำเร็จ');
+    }
+  });
+
+  return (
+    <div className='grid gap-4 xl:grid-cols-12'>
+      <SectionCard
+        title='Pending Approval List'
+        description='Sequential approval MVP'
+        className='xl:col-span-7'
+      >
+        <div className='space-y-3'>
+          {data.items.map((item) => {
+            const branch = reference.branches.find((value) => value.id === item.branchId);
+            return (
+              <div key={item.id} className='rounded-xl border bg-muted/10 p-4'>
+                <div className='flex flex-wrap items-start justify-between gap-3'>
+                  <div>
+                    <div className='flex items-center gap-2'>
+                      <p className='font-semibold'>{item.quotationCode}</p>
+                      {branch ? <BranchBadge branch={branch} /> : null}
+                    </div>
+                    <p className='text-muted-foreground mt-1 text-sm'>
+                      {item.productType} / Submitter: {item.submitterName}
+                    </p>
+                    <p className='mt-2 text-sm font-medium'>
+                      Level {item.approverLevel} / {formatCurrency(item.amount)}
+                    </p>
+                  </div>
+                  <div className='flex gap-2'>
+                    <DecisionDialog
+                      label='Approve'
+                      description='อนุมัติ quotation mock นี้'
+                      isPending={approveMutation.isPending}
+                      onConfirm={(comment) =>
+                        approveMutation.mutate({ quotationId: item.quotationId, comment })
+                      }
+                    />
+                    <DecisionDialog
+                      label='Reject'
+                      description='Reject quotation mock นี้'
+                      isPending={rejectMutation.isPending}
+                      onConfirm={(comment) =>
+                        rejectMutation.mutate({ quotationId: item.quotationId, comment })
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </SectionCard>
+
+      <SectionCard
+        title='Approval Timeline'
+        description='ภาพรวมเส้นทางการอนุมัติ'
+        className='xl:col-span-5'
+      >
+        <TimelineList
+          items={data.items.map((item) => ({
+            id: item.id,
+            title: `${item.quotationCode} / Level ${item.approverLevel}`,
+            detail: `${item.submitterName} ส่งอนุมัติสำหรับ ${item.productType}`,
+            timestamp: '2026-06-11'
+          }))}
+        />
+      </SectionCard>
+    </div>
+  );
+}

src/features/crm/components/crm-dashboard.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
+import { crmDashboardQueryOptions } from '../api/queries';
+import { KpiCard, QuotationStatusBadge, RelatedQuotationList, SectionCard } from './shared';
+import { formatCurrency, formatDate } from '../utils/format';
+
+const chartConfig = {
+  primary: { label: 'Primary', color: 'var(--chart-1)' },
+  secondary: { label: 'Secondary', color: 'var(--chart-2)' },
+  tertiary: { label: 'Tertiary', color: 'var(--chart-3)' }
+};
+
+export function CrmDashboardPage() {
+  const { data } = useSuspenseQuery(crmDashboardQueryOptions());
+
+  return (
+    <div className='space-y-6'>
+      <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5'>
+        {data.metrics.map((metric) => (
+          <KpiCard
+            key={metric.id}
+            label={metric.label}
+            value={metric.value}
+            change={metric.change}
+            trend={metric.trend}
+          />
+        ))}
+      </div>
+
+      <div className='grid gap-4 xl:grid-cols-12'>
+        <Card className='xl:col-span-5'>
+          <CardHeader>
+            <CardTitle>Enquiry Pipeline</CardTitle>
+            <CardDescription>สถานะ opportunity ปัจจุบัน</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig}>
+              <BarChart data={data.enquiryPipeline}>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey='label' tickLine={false} axisLine={false} />
+                <YAxis allowDecimals={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey='value' radius={8} fill='var(--chart-1)' />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className='xl:col-span-4'>
+          <CardHeader>
+            <CardTitle>Quotation Pipeline</CardTitle>
+            <CardDescription>ภาพรวมเอกสารเสนอราคา</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig}>
+              <PieChart>
+                <Pie data={data.quotationPipeline} dataKey='value' nameKey='label' innerRadius={56} outerRadius={92}>
+                  {data.quotationPipeline.map((entry, index) => (
+                    <Cell
+                      key={entry.label}
+                      fill={['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'][index % 5]}
+                    />
+                  ))}
+                </Pie>
+                <ChartTooltip content={<ChartTooltipContent />} />
+              </PieChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className='xl:col-span-3'>
+          <CardHeader>
+            <CardTitle>Competitor Analysis</CardTitle>
+            <CardDescription>คู่แข่งที่เจอบ่อยใน pipeline</CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-3'>
+            {data.competitorAnalysis.map((item) => (
+              <div key={item.label} className='space-y-1'>
+                <div className='flex items-center justify-between text-sm'>
+                  <span>{item.label}</span>
+                  <span className='font-medium'>{item.value}</span>
+                </div>
+                <div className='bg-muted h-2 rounded-full'>
+                  <div
+                    className='bg-primary h-2 rounded-full'
+                    style={{ width: `${(item.value / 4) * 100}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className='grid gap-4 xl:grid-cols-12'>
+        <Card className='xl:col-span-6'>
+          <CardHeader>
+            <CardTitle>Sales Performance</CardTitle>
+            <CardDescription>จำนวน quotation และมูลค่าแยกตาม salesperson</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig}>
+              <BarChart data={data.salesPerformance}>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey='label' tickLine={false} axisLine={false} />
+                <YAxis allowDecimals={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey='value' fill='var(--chart-2)' radius={8} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className='xl:col-span-6'>
+          <CardHeader>
+            <CardTitle>Won / Lost Trend</CardTitle>
+            <CardDescription>เทียบจำนวนดีลชนะและแพ้รายเดือน</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={chartConfig}>
+              <AreaChart data={data.wonLostTrend}>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey='label' tickLine={false} axisLine={false} />
+                <YAxis allowDecimals={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Area type='monotone' dataKey='value' stroke='var(--chart-1)' fill='var(--chart-1)' fillOpacity={0.2} />
+                <Area type='monotone' dataKey='secondaryValue' stroke='var(--chart-3)' fill='var(--chart-3)' fillOpacity={0.12} />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className='grid gap-4 xl:grid-cols-12'>
+        <SectionCard title='Pending Approvals' description='รายการที่ต้องตัดสินใจวันนี้' className='xl:col-span-4'>
+          <div className='space-y-3'>
+            {data.pendingApprovals.map((item) => (
+              <div key={item.id} className='rounded-lg border p-3'>
+                <div className='flex items-center justify-between gap-3'>
+                  <p className='font-medium'>{item.quotationCode}</p>
+                  <QuotationStatusBadge status='pending_approval' />
+                </div>
+                <p className='text-muted-foreground mt-1 text-sm'>{item.productType} / Approver Level {item.approverLevel}</p>
+                <p className='mt-2 text-sm font-medium'>{formatCurrency(item.amount)}</p>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+
+        <SectionCard title='Hot Projects' description='ดีลที่ต้องติดตามใกล้ชิด' className='xl:col-span-5'>
+          <RelatedQuotationList quotations={data.hotQuotations} />
+        </SectionCard>
+
+        <SectionCard title='Follow-ups Due Today' description='กิจกรรมติดตามที่ครบกำหนด' className='xl:col-span-3'>
+          <div className='space-y-3'>
+            {data.dueFollowUps.map((item) => (
+              <div key={item.id} className='rounded-lg border p-3'>
+                <p className='font-medium'>{item.title}</p>
+                <p className='text-muted-foreground mt-1 text-sm'>Owner: {item.ownerName}</p>
+                <p className='text-muted-foreground text-sm'>Due: {formatDate(item.dueDate)}</p>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+      </div>
+    </div>
+  );
+}

src/features/crm/components/customer-detail.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { customerByIdOptions } from '../api/queries';
+import { revokeContactShareMutation, shareContactMutation } from '../api/mutations';
+import {
+  AuditTimeline,
+  EmptyState,
+  InfoGrid,
+  RelatedQuotationList,
+  SectionCard,
+  TimelineList
+} from './shared';
+import { formatDate } from '../utils/format';
+
+export function CustomerDetailPage({ id }: { id: string }) {
+  const { data } = useSuspenseQuery(customerByIdOptions(id));
+  const [targetUserName, setTargetUserName] = useState('');
+  const baseShareMutation = shareContactMutation;
+  const baseRevokeMutation = revokeContactShareMutation;
+
+  const shareMutation = useMutation({
+    ...baseShareMutation,
+    onSuccess: async (...args) => {
+      await baseShareMutation.onSuccess?.(...args);
+      toast.success('แชร์ contact mock สำเร็จ');
+      setTargetUserName('');
+    }
+  });
+
+  const revokeMutation = useMutation({
+    ...baseRevokeMutation,
+    onSuccess: async (...args) => {
+      await baseRevokeMutation.onSuccess?.(...args);
+      toast.success('ยกเลิกแชร์ contact mock สำเร็จ');
+    }
+  });
+
+  const primaryContact = data.contacts.find((contact) => contact.isPrimary) ?? data.contacts[0];
+
+  return (
+    <div className='space-y-4'>
+      <InfoGrid
+        cols={4}
+        items={[
+          { label: 'Customer Code', value: data.customer.code },
+          { label: 'Primary Contact', value: primaryContact?.name ?? '-' },
+          { label: 'Branch', value: data.branch.name },
+          {
+            label: 'Last Activity',
+            value: data.auditEvents[0] ? formatDate(data.auditEvents[0].createdAt) : '-'
+          }
+        ]}
+      />
+
+      <Tabs defaultValue='overview' className='space-y-4'>
+        <TabsList>
+          <TabsTrigger value='overview'>Overview</TabsTrigger>
+          <TabsTrigger value='contacts'>Contacts</TabsTrigger>
+          <TabsTrigger value='shared'>Shared Contacts</TabsTrigger>
+          <TabsTrigger value='enquiries'>Enquiries</TabsTrigger>
+          <TabsTrigger value='quotations'>Quotations</TabsTrigger>
+          <TabsTrigger value='activity'>Activity Log</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value='overview'>
+          <SectionCard title='Customer Overview'>
+            <InfoGrid
+              cols={3}
+              items={[
+                { label: 'Tax ID', value: data.customer.taxId },
+                { label: 'Email', value: data.customer.email },
+                { label: 'Phone', value: data.customer.phone },
+                {
+                  label: 'Address',
+                  value: `${data.customer.address}, ${data.customer.subDistrict}`
+                },
+                { label: 'District', value: data.customer.district },
+                { label: 'Province', value: data.customer.province }
+              ]}
+            />
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value='contacts'>
+          <SectionCard title='Customer Contacts'>
+            <div className='grid gap-3 md:grid-cols-2'>
+              {data.contacts.map((contact) => (
+                <div key={contact.id} className='rounded-lg border p-4'>
+                  <div className='flex items-center justify-between gap-2'>
+                    <p className='font-medium'>{contact.name}</p>
+                    {contact.isPrimary ? (
+                      <span className='text-primary text-xs'>Primary</span>
+                    ) : null}
+                  </div>
+                  <p className='text-muted-foreground text-sm'>{contact.position}</p>
+                  <p className='mt-2 text-sm'>{contact.email}</p>
+                  <p className='text-sm'>{contact.phone}</p>
+                </div>
+              ))}
+            </div>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value='shared'>
+          <SectionCard title='Share Contact' description='Mock contact sharing UI'>
+            <div className='flex flex-col gap-3 md:flex-row'>
+              <Input
+                placeholder='ชื่อผู้ใช้ที่ต้องการแชร์'
+                value={targetUserName}
+                onChange={(event) => setTargetUserName(event.target.value)}
+              />
+              <Button
+                isLoading={shareMutation.isPending}
+                onClick={() =>
+                  primaryContact &&
+                  targetUserName &&
+                  shareMutation.mutate({
+                    contactId: primaryContact.id,
+                    sharedWithUserId: `mock-${targetUserName}`,
+                    sharedWithUserName: targetUserName,
+                    permission: 'view'
+                  })
+                }
+              >
+                แชร์ Contact
+              </Button>
+            </div>
+            <div className='mt-4 space-y-3'>
+              {data.shares.length === 0 ? (
+                <EmptyState
+                  title='ยังไม่มีการแชร์ contact'
+                  description='เริ่มจากกรอกชื่อผู้ใช้ด้านบน'
+                />
+              ) : (
+                data.shares.map((share) => (
+                  <div
+                    key={share.id}
+                    className='flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3'
+                  >
+                    <div>
+                      <p className='font-medium'>{share.sharedWithUserName}</p>
+                      <p className='text-muted-foreground text-sm'>
+                        Permission: {share.permission}
+                      </p>
+                    </div>
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      isLoading={revokeMutation.isPending}
+                      onClick={() =>
+                        revokeMutation.mutate({
+                          contactId: share.contactId,
+                          shareId: share.id
+                        })
+                      }
+                    >
+                      Revoke
+                    </Button>
+                  </div>
+                ))
+              )}
+            </div>
+            <div className='mt-6'>
+              <TimelineList
+                items={data.shareLogs.map((log) => ({
+                  id: log.id,
+                  title: log.action,
+                  detail: `${log.targetUserName} โดย ${log.actorName}`,
+                  timestamp: log.createdAt,
+                  tone: log.action === 'SHARE' ? 'success' : 'danger'
+                }))}
+              />
+            </div>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value='enquiries'>
+          <SectionCard title='Customer Enquiries'>
+            <div className='space-y-3'>
+              {data.enquiries.map((enquiry) => (
+                <div key={enquiry.id} className='rounded-lg border p-3'>
+                  <p className='font-medium'>{enquiry.code}</p>
+                  <p className='text-muted-foreground text-sm'>{enquiry.title}</p>
+                </div>
+              ))}
+            </div>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value='quotations'>
+          <RelatedQuotationList quotations={data.quotations} />
+        </TabsContent>
+
+        <TabsContent value='activity'>
+          <SectionCard title='Activity Log'>
+            <AuditTimeline events={data.auditEvents} />
+          </SectionCard>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/features/crm/components/customer-form-sheet.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle
+} from '@/components/ui/sheet';
+import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
+import { crmReferenceQueryOptions } from '../api/queries';
+import { createCustomerMutation, updateCustomerMutation } from '../api/mutations';
+import type { Customer } from '../api/types';
+import { customerStatusOptions } from '../data/options';
+import { customerSchema, type CustomerFormValues } from '../schemas/customer';
+
+const customerTypeOptions = [
+  { value: 'developer', label: 'Developer' },
+  { value: 'contractor', label: 'Contractor' },
+  { value: 'owner', label: 'Owner' },
+  { value: 'consultant', label: 'Consultant' }
+];
+
+export function CustomerFormSheet({
+  open,
+  onOpenChange,
+  customer
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  customer?: Customer;
+}) {
+  const { data: reference } = useSuspenseQuery(crmReferenceQueryOptions());
+  const { FormTextField, FormSelectField } = useFormFields<CustomerFormValues>();
+  const isEdit = !!customer;
+  const baseCreateMutation = createCustomerMutation;
+  const baseUpdateMutation = updateCustomerMutation;
+
+  const createMutation = useMutation({
+    ...baseCreateMutation,
+    onSuccess: async (...args) => {
+      await baseCreateMutation.onSuccess?.(...args);
+      toast.success('สร้าง customer mock สำเร็จ');
+      onOpenChange(false);
+    },
+    onError: (error) => toast.error(error instanceof Error ? error.message : 'บันทึกไม่สำเร็จ')
+  });
+
+  const updateMutation = useMutation({
+    ...baseUpdateMutation,
+    onSuccess: async (...args) => {
+      await baseUpdateMutation.onSuccess?.(...args);
+      toast.success('อัปเดต customer mock สำเร็จ');
+      onOpenChange(false);
+    },
+    onError: (error) => toast.error(error instanceof Error ? error.message : 'บันทึกไม่สำเร็จ')
+  });
+
+  const form = useAppForm({
+    defaultValues: {
+      code: customer?.code ?? '',
+      name: customer?.name ?? '',
+      taxId: customer?.taxId ?? '',
+      email: customer?.email ?? '',
+      phone: customer?.phone ?? '',
+      customerType: customer?.customerType ?? 'developer',
+      customerStatus: customer?.customerStatus ?? 'active',
+      branchId: customer?.branchId ?? reference.branches[0]?.id ?? '',
+      address: customer?.address ?? '',
+      province: customer?.province ?? '',
+      district: customer?.district ?? '',
+      subDistrict: customer?.subDistrict ?? '',
+      postalCode: customer?.postalCode ?? ''
+    } as CustomerFormValues,
+    validators: {
+      onSubmit: customerSchema
+    },
+    onSubmit: async ({ value }) => {
+      if (isEdit && customer) {
+        await updateMutation.mutateAsync({ id: customer.id, values: value });
+        return;
+      }
+      await createMutation.mutateAsync(value);
+    }
+  });
+
+  useEffect(() => {
+    if (!open) return;
+
+    form.reset({
+      code: customer?.code ?? '',
+      name: customer?.name ?? '',
+      taxId: customer?.taxId ?? '',
+      email: customer?.email ?? '',
+      phone: customer?.phone ?? '',
+      customerType: customer?.customerType ?? 'developer',
+      customerStatus: customer?.customerStatus ?? 'active',
+      branchId: customer?.branchId ?? reference.branches[0]?.id ?? '',
+      address: customer?.address ?? '',
+      province: customer?.province ?? '',
+      district: customer?.district ?? '',
+      subDistrict: customer?.subDistrict ?? '',
+      postalCode: customer?.postalCode ?? ''
+    });
+  }, [customer, form, open, reference.branches]);
+
+  const isPending = createMutation.isPending || updateMutation.isPending;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className='sm:max-w-2xl'>
+        <SheetHeader>
+          <SheetTitle>{isEdit ? 'แก้ไข Customer' : 'สร้าง Customer'}</SheetTitle>
+          <SheetDescription>
+            ใช้ mock form ตาม pattern เดิมของ repo และพร้อมสลับไป service จริงภายหลัง
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className='max-h-[calc(100vh-10rem)] overflow-auto pr-2'>
+          <form.AppForm>
+            <form.Form id='customer-form' className='grid gap-2 md:grid-cols-2'>
+              <FormTextField name='code' label='Customer Code' required placeholder='CUS-BKK-006' />
+              <FormTextField
+                name='name'
+                label='Customer Name'
+                required
+                placeholder='ALLA Distribution'
+              />
+              <FormTextField name='taxId' label='Tax ID' required placeholder='0105556...' />
+              <FormTextField
+                name='email'
+                label='Email'
+                required
+                type='email'
+                placeholder='contact@example.com'
+              />
+              <FormTextField name='phone' label='Phone' required placeholder='02-000-0000' />
+              <FormSelectField
+                name='customerType'
+                label='Customer Type'
+                required
+                options={customerTypeOptions}
+              />
+              <FormSelectField
+                name='customerStatus'
+                label='Status'
+                required
+                options={customerStatusOptions.map((item) => ({
+                  value: item.value,
+                  label: item.label
+                }))}
+              />
+              <FormSelectField
+                name='branchId'
+                label='Branch'
+                required
+                options={reference.branches.map((branch) => ({
+                  value: branch.id,
+                  label: branch.name
+                }))}
+              />
+              <div className='md:col-span-2'>
+                <FormTextField
+                  name='address'
+                  label='Address'
+                  required
+                  placeholder='123 Main Road'
+                />
+              </div>
+              <FormTextField name='province' label='Province' required placeholder='Bangkok' />
+              <FormTextField
+                name='district'
+                label='District'
+                required
+                placeholder='Chatuchak'
+              />
+              <FormTextField
+                name='subDistrict'
+                label='Sub District'
+                required
+                placeholder='Chom Phon'
+              />
+              <FormTextField
+                name='postalCode'
+                label='Postal Code'
+                required
+                placeholder='10900'
+              />
+            </form.Form>
+          </form.AppForm>
+        </div>
+
+        <SheetFooter>
+          <Button type='button' variant='outline' onClick={() => onOpenChange(false)}>
+            ยกเลิก
+          </Button>
+          <Button type='submit' form='customer-form' isLoading={isPending}>
+            {isEdit ? 'บันทึกการแก้ไข' : 'สร้าง Customer'}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/features/crm/components/customers-table.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { type ColumnDef } from "@tanstack/react-table";
+import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { getSortingStateParser } from "@/lib/parsers";
+import { useDataTable } from "@/hooks/use-data-table";
+import { DataTable } from "@/components/ui/table/data-table";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Icons } from "@/components/icons";
+import {
+  customersQueryOptions,
+  crmReferenceQueryOptions,
+} from "../api/queries";
+import type { Customer } from "../api/types";
+import { CustomerFormSheet } from "./customer-form-sheet";
+import { BranchBadge, CustomerStatusBadge } from "./shared";
+
+export function CustomersTablePage() {
+  const [editingCustomer, setEditingCustomer] = useState<
+    Customer | undefined
+  >();
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  const columns = useMemo<ColumnDef<Customer>[]>(
+    () => [
+      {
+        accessorKey: "code",
+        header: "Code",
+        cell: ({ row }) => (
+          <span className="font-medium">{row.original.code}</span>
+        ),
+      },
+      {
+        accessorKey: "name",
+        header: "Customer",
+        cell: ({ row }) => (
+          <div>
+            <p className="font-medium">{row.original.name}</p>
+            <p className="text-muted-foreground text-sm">
+              {row.original.email}
+            </p>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "customerStatus",
+        header: "Status",
+        cell: ({ row }) => (
+          <CustomerStatusBadge status={row.original.customerStatus} />
+        ),
+      },
+      {
+        accessorKey: "branchId",
+        header: "Branch",
+        cell: ({ row, table }) => {
+          const branches = (
+            table.options.meta as {
+              branches: Array<{
+                id: string;
+                code: string;
+                name: string;
+                region: string;
+              }>;
+            }
+          ).branches;
+          const branch = branches.find(
+            (item) => item.id === row.original.branchId,
+          );
+          return branch ? <BranchBadge branch={branch} /> : null;
+        },
+      },
+      {
+        accessorKey: "contactIds",
+        header: "Contacts",
+        cell: ({ row }) => row.original.contactIds.length,
+      },
+      {
+        id: "actions",
+        header: "",
+        cell: ({ row }) => (
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setEditingCustomer(row.original);
+                setSheetOpen(true);
+              }}
+            >
+              Edit
+            </Button>
+            <Button variant="outline" size="sm" asChild>
+              <Link href={`/dashboard/crm/customers/${row.original.id}`}>
+                View
+              </Link>
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [],
+  );
+
+  const columnIds = columns
+    .map((column) => column.id ?? String(column.accessorKey))
+    .filter(Boolean);
+
+  const [params, setParams] = useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    perPage: parseAsInteger.withDefault(10),
+    name: parseAsString,
+    customerStatus: parseAsString,
+    branch: parseAsString,
+    sort: getSortingStateParser(columnIds).withDefault([]),
+  });
+  const { data: reference } = useSuspenseQuery(crmReferenceQueryOptions());
+
+  const filters = {
+    page: params.page,
+    limit: params.perPage,
+    ...(params.name && { search: params.name }),
+    ...(params.customerStatus && { status: params.customerStatus }),
+    ...(params.branch && { branch: params.branch }),
+    ...(params.sort.length ? { sort: JSON.stringify(params.sort) } : {}),
+  };
+
+  const { data } = useSuspenseQuery(customersQueryOptions(filters));
+  const pageCount = Math.ceil(data.totalItems / params.perPage);
+
+  const { table } = useDataTable({
+    data: data.items,
+    columns,
+    pageCount,
+    meta: { branches: reference.branches },
+    initialState: {
+      columnPinning: { right: ["actions"] },
+    },
+  });
+
+  return (
+    <div className="flex flex-1 flex-col space-y-4">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="grid gap-3 md:grid-cols-3 lg:w-full">
+          <Input
+            placeholder="ค้นหา customer หรือ code"
+            value={params.name ?? ""}
+            onChange={(event) =>
+              void setParams({ name: event.target.value || null, page: 1 })
+            }
+          />
+          <select
+            className="border-input bg-background rounded-md border px-3 text-sm"
+            value={params.customerStatus ?? ""}
+            onChange={(event) =>
+              void setParams({
+                customerStatus: event.target.value || null,
+                page: 1,
+              })
+            }
+          >
+            <option value="">ทุกสถานะ</option>
+            <option value="active">Active</option>
+            <option value="prospect">Prospect</option>
+            <option value="inactive">Inactive</option>
+          </select>
+          <select
+            className="border-input bg-background rounded-md border px-3 text-sm"
+            value={params.branch ?? ""}
+            onChange={(event) =>
+              void setParams({ branch: event.target.value || null, page: 1 })
+            }
+          >
+            <option value="">ทุกสาขา</option>
+            {reference.branches.map((branch) => (
+              <option key={branch.id} value={branch.id}>
+                {branch.name}
+              </option>
+            ))}
+          </select>
+        </div>
+        <Button
+          onClick={() => {
+            setEditingCustomer(undefined);
+            setSheetOpen(true);
+          }}
+        >
+          <Icons.add className="mr-2 h-4 w-4" />
+          Create Customer
+        </Button>
+      </div>
+
+      <DataTable table={table} />
+      <CustomerFormSheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          setSheetOpen(open);
+          if (!open) setEditingCustomer(undefined);
+        }}
+        customer={editingCustomer}
+      />
+    </div>
+  );
+}

src/features/crm/components/enquiries-table.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import Link from "next/link";
+import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
+import { type ColumnDef } from "@tanstack/react-table";
+import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { getSortingStateParser } from "@/lib/parsers";
+import { useDataTable } from "@/hooks/use-data-table";
+import { DataTable } from "@/components/ui/table/data-table";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import {
+  crmReferenceQueryOptions,
+  enquiriesQueryOptions,
+} from "../api/queries";
+import { convertEnquiryMutation } from "../api/mutations";
+import type { Enquiry } from "../api/types";
+import { ChancePill, EnquiryStatusBadge } from "./shared";
+
+const columns: ColumnDef<Enquiry>[] = [
+  { accessorKey: "code", header: "Code" },
+  { accessorKey: "title", header: "Enquiry" },
+  { accessorKey: "productType", header: "Product" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <EnquiryStatusBadge status={row.original.status} />,
+  },
+  {
+    accessorKey: "chancePercent",
+    header: "Chance",
+    cell: ({ row }) => <ChancePill value={row.original.chancePercent} />,
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => <RowActions enquiry={row.original} />,
+  },
+];
+
+const columnIds = columns
+  .map((column) => column.id ?? String(column.accessorKey))
+  .filter(Boolean);
+
+function RowActions({ enquiry }: { enquiry: Enquiry }) {
+  const mutation = useMutation({
+    ...convertEnquiryMutation,
+    onSuccess: () => toast.success("สร้าง quotation mock จาก enquiry แล้ว"),
+  });
+
+  return (
+    <div className="flex justify-end gap-2">
+      <Button variant="outline" size="sm" asChild>
+        <Link href={`/dashboard/crm/enquiries/${enquiry.id}`}>View</Link>
+      </Button>
+      <Button
+        size="sm"
+        isLoading={mutation.isPending}
+        onClick={() => mutation.mutate(enquiry.id)}
+      >
+        Convert
+      </Button>
+    </div>
+  );
+}
+
+export function EnquiriesTablePage() {
+  const [params, setParams] = useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    perPage: parseAsInteger.withDefault(10),
+    name: parseAsString,
+    status: parseAsString,
+    productType: parseAsString,
+    salesman: parseAsString,
+    dateFrom: parseAsString,
+    dateTo: parseAsString,
+    sort: getSortingStateParser(columnIds).withDefault([]),
+  });
+  const { data: reference } = useSuspenseQuery(crmReferenceQueryOptions());
+
+  const filters = {
+    page: params.page,
+    limit: params.perPage,
+    ...(params.name && { search: params.name }),
+    ...(params.status && { status: params.status }),
+    ...(params.productType && { productType: params.productType }),
+    ...(params.salesman && { salesman: params.salesman }),
+    ...(params.dateFrom && { dateFrom: params.dateFrom }),
+    ...(params.dateTo && { dateTo: params.dateTo }),
+    ...(params.sort.length ? { sort: JSON.stringify(params.sort) } : {}),
+  };
+
+  const { data } = useSuspenseQuery(enquiriesQueryOptions(filters));
+  const pageCount = Math.ceil(data.totalItems / params.perPage);
+  const { table } = useDataTable({
+    data: data.items,
+    columns,
+    pageCount,
+    initialState: {
+      columnPinning: { right: ["actions"] },
+    },
+  });
+
+  return (
+    <div className="flex flex-1 flex-col space-y-4">
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
+        <Input
+          placeholder="ค้นหา enquiry หรือ code"
+          value={params.name ?? ""}
+          onChange={(event) =>
+            void setParams({ name: event.target.value || null, page: 1 })
+          }
+        />
+        <select
+          className="border-input bg-background rounded-md border px-3 text-sm"
+          value={params.status ?? ""}
+          onChange={(event) =>
+            void setParams({ status: event.target.value || null, page: 1 })
+          }
+        >
+          <option value="">ทุกสถานะ</option>
+          <option value="new">New</option>
+          <option value="qualifying">Qualifying</option>
+          <option value="requirement">Requirement</option>
+          <option value="follow_up">Follow Up</option>
+          <option value="converted">Converted</option>
+        </select>
+        <select
+          className="border-input bg-background rounded-md border px-3 text-sm"
+          value={params.productType ?? ""}
+          onChange={(event) =>
+            void setParams({ productType: event.target.value || null, page: 1 })
+          }
+        >
+          <option value="">ทุกสินค้า</option>
+          <option value="crane">Crane</option>
+          <option value="dockdoor">Dock Door</option>
+          <option value="solarcell">Solar Cell</option>
+        </select>
+        <select
+          className="border-input bg-background rounded-md border px-3 text-sm"
+          value={params.salesman ?? ""}
+          onChange={(event) =>
+            void setParams({ salesman: event.target.value || null, page: 1 })
+          }
+        >
+          <option value="">ทุก salesperson</option>
+          {reference.salespersons.map((sales) => (
+            <option key={sales.id} value={sales.id}>
+              {sales.name}
+            </option>
+          ))}
+        </select>
+        <Input
+          type="date"
+          value={params.dateFrom ?? ""}
+          onChange={(event) =>
+            void setParams({ dateFrom: event.target.value || null, page: 1 })
+          }
+        />
+        <Input
+          type="date"
+          value={params.dateTo ?? ""}
+          onChange={(event) =>
+            void setParams({ dateTo: event.target.value || null, page: 1 })
+          }
+        />
+      </div>
+      <div className="flex justify-end">
+        <Button variant="outline" asChild>
+          <Link href="/dashboard/crm/customers">Create Enquiry</Link>
+        </Button>
+      </div>
+      <DataTable table={table} />
+    </div>
+  );
+}

src/features/crm/components/enquiry-detail.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { enquiryByIdOptions } from '../api/queries';
+import { convertEnquiryMutation } from '../api/mutations';
+import { InfoGrid, RelatedQuotationList, SectionCard, TimelineList } from './shared';
+import { formatCurrency } from '../utils/format';
+
+export function EnquiryDetailPage({ id }: { id: string }) {
+  const { data } = useSuspenseQuery(enquiryByIdOptions(id));
+  const baseMutation = convertEnquiryMutation;
+  const mutation = useMutation({
+    ...baseMutation,
+    onSuccess: async (...args) => {
+      await baseMutation.onSuccess?.(...args);
+      toast.success('สร้าง quotation mock เรียบร้อย');
+    }
+  });
+
+  return (
+    <div className='space-y-4'>
+      <SectionCard
+        title={data.enquiry.title}
+        description={`${data.enquiry.code} / ${data.branch.name}`}
+        action={
+          <Button isLoading={mutation.isPending} onClick={() => mutation.mutate(data.enquiry.id)}>
+            Convert to Quotation
+          </Button>
+        }
+      >
+        <InfoGrid
+          cols={4}
+          items={[
+            { label: 'Customer', value: data.customer.name },
+            { label: 'Contact', value: data.contact.name },
+            { label: 'Chance', value: `${data.enquiry.chancePercent}%` },
+            { label: 'Potential', value: formatCurrency(data.enquiry.expectedValue) },
+            { label: 'Project Location', value: data.enquiry.projectLocation },
+            { label: 'Competitor', value: data.enquiry.competitor },
+            { label: 'Salesman', value: data.salesman.name },
+            { label: 'Requirement', value: data.enquiry.requirementSummary }
+          ]}
+        />
+      </SectionCard>
+
+      <SectionCard title='Timeline / Activity'>
+        <TimelineList
+          items={data.enquiry.activities.map((activity) => ({
+            id: activity.id,
+            title: activity.title,
+            detail: activity.detail,
+            actorName: activity.actorName,
+            timestamp: activity.createdAt
+          }))}
+        />
+      </SectionCard>
+
+      <SectionCard title='Related Quotations'>
+        <RelatedQuotationList quotations={data.quotations} />
+      </SectionCard>
+    </div>
+  );
+}

src/features/crm/components/quotation-detail.tsx

@@ -0,0 +1,347 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { quotationByIdOptions } from '../api/queries';
+import {
+  approveQuotationMutation,
+  createQuotationRevisionMutation,
+  markQuotationStatusMutation,
+  rejectQuotationMutation,
+  submitApprovalMutation
+} from '../api/mutations';
+import {
+  AuditTimeline,
+  CustomerRoleCards,
+  InfoGrid,
+  QuotationPreviewPanel,
+  QuotationStatusBadge,
+  SectionCard,
+  TimelineList
+} from './shared';
+import { formatCurrency } from '../utils/format';
+
+function ApprovalDialog({
+  title,
+  description,
+  actionLabel,
+  onConfirm,
+  isPending
+}: {
+  title: string;
+  description: string;
+  actionLabel: string;
+  onConfirm: (comment: string) => void;
+  isPending: boolean;
+}) {
+  const [comment, setComment] = useState('');
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant='outline'>{actionLabel}</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <Textarea
+          value={comment}
+          onChange={(event) => setComment(event.target.value)}
+          placeholder='ใส่หมายเหตุ (optional)'
+        />
+        <DialogFooter>
+          <Button isLoading={isPending} onClick={() => onConfirm(comment)}>
+            ยืนยัน
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function QuotationDetailPage({ id }: { id: string }) {
+  const { data } = useSuspenseQuery(quotationByIdOptions(id));
+  const baseSubmitApproval = submitApprovalMutation;
+  const baseApproveMutation = approveQuotationMutation;
+  const baseRejectMutation = rejectQuotationMutation;
+  const baseReviseMutation = createQuotationRevisionMutation;
+  const baseMarkStatusMutation = markQuotationStatusMutation;
+
+  const submitApproval = useMutation({
+    ...baseSubmitApproval,
+    onSuccess: async (...args) => {
+      await baseSubmitApproval.onSuccess?.(...args);
+      toast.success('ส่งเข้าสายอนุมัติแล้ว');
+    }
+  });
+  const approveMutation = useMutation({
+    ...baseApproveMutation,
+    onSuccess: async (...args) => {
+      await baseApproveMutation.onSuccess?.(...args);
+      toast.success('อนุมัติ mock สำเร็จ');
+    }
+  });
+  const rejectMutation = useMutation({
+    ...baseRejectMutation,
+    onSuccess: async (...args) => {
+      await baseRejectMutation.onSuccess?.(...args);
+      toast.success('Reject mock สำเร็จ');
+    }
+  });
+  const reviseMutation = useMutation({
+    ...baseReviseMutation,
+    onSuccess: async (...args) => {
+      await baseReviseMutation.onSuccess?.(...args);
+      toast.success('สร้าง revision mock สำเร็จ');
+    }
+  });
+  const markStatusMutation = useMutation({
+    ...baseMarkStatusMutation,
+    onSuccess: async (...args) => {
+      await baseMarkStatusMutation.onSuccess?.(...args);
+      toast.success('อัปเดตสถานะ mock สำเร็จ');
+    }
+  });
+
+  const ownerCustomer = data.customers.find((customer) =>
+    data.quotation.customerRoles.some(
+      (role) => role.role === 'owner' && role.customerId === customer.id
+    )
+  );
+  const ownerContact = data.contacts.find((contact) =>
+    data.quotation.customerRoles.some(
+      (role) => role.role === 'owner' && role.contactId === contact.id
+    )
+  );
+
+  return (
+    <div className='space-y-4'>
+      <SectionCard
+        title={data.quotation.project}
+        description={`${data.quotation.code} / ${data.branch.name}`}
+        action={
+          <div className='flex flex-wrap gap-2'>
+            <Button
+              variant='outline'
+              isLoading={submitApproval.isPending}
+              onClick={() => submitApproval.mutate(data.quotation.id)}
+            >
+              Submit approval
+            </Button>
+            <ApprovalDialog
+              title='Approve quotation'
+              description='Mock sequential approval for demo.'
+              actionLabel='Approve'
+              isPending={approveMutation.isPending}
+              onConfirm={(comment) =>
+                approveMutation.mutate({ quotationId: data.quotation.id, comment })
+              }
+            />
+            <ApprovalDialog
+              title='Reject quotation'
+              description='Mock reject flow for demo.'
+              actionLabel='Reject'
+              isPending={rejectMutation.isPending}
+              onConfirm={(comment) =>
+                rejectMutation.mutate({ quotationId: data.quotation.id, comment })
+              }
+            />
+            <Button
+              variant='outline'
+              isLoading={reviseMutation.isPending}
+              onClick={() => reviseMutation.mutate(data.quotation.id)}
+            >
+              Create revision
+            </Button>
+            <Button
+              variant='outline'
+              isLoading={markStatusMutation.isPending}
+              onClick={() =>
+                markStatusMutation.mutate({
+                  quotationId: data.quotation.id,
+                  status: 'sent'
+                })
+              }
+            >
+              Send to customer
+            </Button>
+            <Button
+              variant='outline'
+              isLoading={markStatusMutation.isPending}
+              onClick={() =>
+                markStatusMutation.mutate({
+                  quotationId: data.quotation.id,
+                  status: 'accepted'
+                })
+              }
+            >
+              Mark accepted
+            </Button>
+            <Button
+              variant='outline'
+              isLoading={markStatusMutation.isPending}
+              onClick={() =>
+                markStatusMutation.mutate({
+                  quotationId: data.quotation.id,
+                  status: 'lost'
+                })
+              }
+            >
+              Mark lost
+            </Button>
+          </div>
+        }
+      >
+        <div className='flex flex-wrap items-center gap-3'>
+          <QuotationStatusBadge status={data.quotation.status} />
+          <span className='text-muted-foreground text-sm'>
+            Revision R{String(data.quotation.revision).padStart(2, '0')}
+          </span>
+          <span className='text-sm font-medium'>
+            {formatCurrency(data.quotation.totalAmount)}
+          </span>
+        </div>
+        <div className='mt-4'>
+          <InfoGrid
+            cols={4}
+            items={[
+              { label: 'Quotation Date', value: data.quotation.quotationDate },
+              { label: 'Valid Until', value: data.quotation.validUntil },
+              { label: 'Type', value: data.quotation.quotationType },
+              { label: 'Chance', value: `${data.quotation.chancePercent}%` },
+              { label: 'Salesman', value: data.salesman.name },
+              { label: 'Sales Admin', value: data.saleAdmin.name },
+              { label: 'Branch', value: data.branch.name },
+              { label: 'Site', value: data.quotation.siteLocation }
+            ]}
+          />
+        </div>
+      </SectionCard>
+
+      <SectionCard title='Customer Roles'>
+        <CustomerRoleCards
+          roles={data.quotation.customerRoles}
+          customers={data.customers}
+          contacts={data.contacts}
+        />
+      </SectionCard>
+
+      <div className='grid gap-4 xl:grid-cols-12'>
+        <SectionCard title='Item Table' className='xl:col-span-7'>
+          <div className='space-y-3'>
+            {data.quotation.items.map((item) => (
+              <div
+                key={item.id}
+                className='grid gap-2 rounded-lg border p-3 md:grid-cols-[1fr_auto_auto]'
+              >
+                <div>
+                  <p className='font-medium'>{item.description}</p>
+                  <p className='text-muted-foreground text-sm'>{item.topic}</p>
+                </div>
+                <p className='text-sm'>
+                  {item.quantity} {item.unit}
+                </p>
+                <p className='text-sm font-semibold'>{formatCurrency(item.amount)}</p>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+        <SectionCard title='Total Summary' className='xl:col-span-5'>
+          <InfoGrid
+            cols={2}
+            items={[
+              { label: 'Sub Total', value: formatCurrency(data.quotation.totalAmount) },
+              { label: 'VAT 7%', value: formatCurrency(data.quotation.totalAmount * 0.07) },
+              { label: 'Grand Total', value: formatCurrency(data.quotation.totalAmount * 1.07) },
+              { label: 'Hot Project', value: data.quotation.isHotProject ? 'Yes' : 'No' }
+            ]}
+          />
+        </SectionCard>
+      </div>
+
+      <div className='grid gap-4 xl:grid-cols-12'>
+        <SectionCard title='Topics' className='xl:col-span-5'>
+          <div className='space-y-4'>
+            {data.quotation.topics.map((topic) => (
+              <div key={topic.id}>
+                <p className='font-medium capitalize'>{topic.label}</p>
+                <ul className='text-muted-foreground mt-2 space-y-1 text-sm'>
+                  {topic.items.map((item) => (
+                    <li key={item}>- {item}</li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+
+        <SectionCard title='Attachments' className='xl:col-span-3'>
+          <div className='space-y-3'>
+            {data.quotation.attachments.map((attachment) => (
+              <div key={attachment.id} className='rounded-lg border p-3 text-sm'>
+                <p className='font-medium'>{attachment.fileName}</p>
+                <p className='text-muted-foreground'>{attachment.fileType.toUpperCase()}</p>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+
+        <SectionCard title='Follow-ups' className='xl:col-span-4'>
+          <TimelineList
+            items={data.quotation.followUps.map((followUp) => ({
+              id: followUp.id,
+              title: followUp.title,
+              detail: `Owner: ${followUp.ownerName}`,
+              timestamp: followUp.dueDate,
+              tone: followUp.status === 'done' ? 'success' : 'default'
+            }))}
+          />
+        </SectionCard>
+      </div>
+
+      <div className='grid gap-4 xl:grid-cols-12'>
+        <SectionCard title='Approval Timeline' className='xl:col-span-5'>
+          <TimelineList
+            items={data.quotation.approvalSteps.map((step) => ({
+              id: step.id,
+              title: `Level ${step.level} - ${step.approverName}`,
+              detail: `${step.approverPosition}${step.comment ? ` / ${step.comment}` : ''}`,
+              timestamp: step.actedAt ?? data.quotation.quotationDate,
+              tone:
+                step.status === 'approved'
+                  ? 'success'
+                  : step.status === 'rejected'
+                    ? 'danger'
+                    : 'default'
+            }))}
+          />
+        </SectionCard>
+
+        <SectionCard title='Audit Timeline' className='xl:col-span-7'>
+          <AuditTimeline events={data.auditEvents} />
+        </SectionCard>
+      </div>
+
+      <QuotationPreviewPanel
+        quotation={data.quotation}
+        ownerCustomer={ownerCustomer}
+        ownerContact={ownerContact}
+        approvalSteps={data.quotation.approvalSteps}
+      />
+    </div>
+  );
+}

src/features/crm/components/quotations-table.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import Link from "next/link";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { type ColumnDef } from "@tanstack/react-table";
+import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { getSortingStateParser } from "@/lib/parsers";
+import { useDataTable } from "@/hooks/use-data-table";
+import { DataTable } from "@/components/ui/table/data-table";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { HotProjectPill, QuotationStatusBadge } from "./shared";
+import {
+  crmReferenceQueryOptions,
+  quotationsQueryOptions,
+} from "../api/queries";
+import type { Quotation } from "../api/types";
+import { formatCurrency } from "../utils/format";
+
+const columns: ColumnDef<Quotation>[] = [
+  { accessorKey: "code", header: "Code" },
+  { accessorKey: "project", header: "Project" },
+  { accessorKey: "quotationType", header: "Type" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <QuotationStatusBadge status={row.original.status} />,
+  },
+  { accessorKey: "revision", header: "Rev" },
+  {
+    accessorKey: "totalAmount",
+    header: "Amount",
+    cell: ({ row }) => formatCurrency(row.original.totalAmount),
+  },
+  {
+    accessorKey: "isHotProject",
+    header: "Hot",
+    cell: ({ row }) => <HotProjectPill active={row.original.isHotProject} />,
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => (
+      <div className="flex justify-end gap-2">
+        <Button variant="outline" size="sm" asChild>
+          <Link href={`/dashboard/crm/quotations/${row.original.id}`}>
+            View
+          </Link>
+        </Button>
+      </div>
+    ),
+  },
+];
+
+const columnIds = columns
+  .map((column) => column.id ?? String(column.accessorKey))
+  .filter(Boolean);
+
+function KanbanView({ items }: { items: Quotation[] }) {
+  const statuses = [
+    "draft",
+    "pending_approval",
+    "approved",
+    "sent",
+    "accepted",
+    "lost",
+  ];
+
+  return (
+    <div className="grid gap-4 xl:grid-cols-6">
+      {statuses.map((status) => (
+        <Card key={status} className="space-y-3 p-3">
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold capitalize">
+              {status.replace("_", " ")}
+            </p>
+            <span className="text-muted-foreground text-xs">
+              {items.filter((item) => item.status === status).length}
+            </span>
+          </div>
+          {items
+            .filter((item) => item.status === status)
+            .map((item) => (
+              <Link
+                key={item.id}
+                href={`/dashboard/crm/quotations/${item.id}`}
+                className="block rounded-lg border p-3 text-sm transition-colors hover:bg-muted/40"
+              >
+                <p className="font-medium">{item.code}</p>
+                <p className="text-muted-foreground mt-1 line-clamp-2">
+                  {item.project}
+                </p>
+                <p className="mt-2 font-semibold">
+                  {formatCurrency(item.totalAmount)}
+                </p>
+              </Link>
+            ))}
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+export function QuotationsTablePage() {
+  const [params, setParams] = useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    perPage: parseAsInteger.withDefault(10),
+    name: parseAsString,
+    status: parseAsString,
+    quotationType: parseAsString,
+    salesman: parseAsString,
+    hot: parseAsString,
+    dateFrom: parseAsString,
+    dateTo: parseAsString,
+    view: parseAsString.withDefault("table"),
+    sort: getSortingStateParser(columnIds).withDefault([]),
+  });
+  const { data: reference } = useSuspenseQuery(crmReferenceQueryOptions());
+
+  const filters = {
+    page: params.page,
+    limit: params.perPage,
+    ...(params.name && { search: params.name }),
+    ...(params.status && { status: params.status }),
+    ...(params.quotationType && { quotationType: params.quotationType }),
+    ...(params.salesman && { salesman: params.salesman }),
+    ...(params.hot && { hot: params.hot }),
+    ...(params.dateFrom && { dateFrom: params.dateFrom }),
+    ...(params.dateTo && { dateTo: params.dateTo }),
+    ...(params.sort.length ? { sort: JSON.stringify(params.sort) } : {}),
+  };
+
+  const { data } = useSuspenseQuery(quotationsQueryOptions(filters));
+  const pageCount = Math.ceil(data.totalItems / params.perPage);
+  const { table } = useDataTable({
+    data: data.items,
+    columns,
+    pageCount,
+    initialState: {
+      columnPinning: { right: ["actions"] },
+    },
+  });
+
+  return (
+    <div className="flex flex-1 flex-col space-y-4">
+      <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-7 xl:w-full">
+          <Input
+            placeholder="ค้นหา code หรือ project"
+            value={params.name ?? ""}
+            onChange={(event) =>
+              void setParams({ name: event.target.value || null, page: 1 })
+            }
+          />
+          <select
+            className="border-input bg-background rounded-md border px-3 text-sm"
+            value={params.status ?? ""}
+            onChange={(event) =>
+              void setParams({ status: event.target.value || null, page: 1 })
+            }
+          >
+            <option value="">ทุกสถานะ</option>
+            <option value="draft">Draft</option>
+            <option value="pending_approval">Pending Approval</option>
+            <option value="approved">Approved</option>
+            <option value="sent">Sent</option>
+            <option value="accepted">Accepted</option>
+          </select>
+          <select
+            className="border-input bg-background rounded-md border px-3 text-sm"
+            value={params.quotationType ?? ""}
+            onChange={(event) =>
+              void setParams({
+                quotationType: event.target.value || null,
+                page: 1,
+              })
+            }
+          >
+            <option value="">ทุกประเภท</option>
+            <option value="official">Official</option>
+            <option value="budgetary">Budgetary</option>
+            <option value="service">Service</option>
+          </select>
+          <select
+            className="border-input bg-background rounded-md border px-3 text-sm"
+            value={params.salesman ?? ""}
+            onChange={(event) =>
+              void setParams({ salesman: event.target.value || null, page: 1 })
+            }
+          >
+            <option value="">ทุก salesperson</option>
+            {reference.salespersons.map((sales) => (
+              <option key={sales.id} value={sales.id}>
+                {sales.name}
+              </option>
+            ))}
+          </select>
+          <select
+            className="border-input bg-background rounded-md border px-3 text-sm"
+            value={params.hot ?? ""}
+            onChange={(event) =>
+              void setParams({ hot: event.target.value || null, page: 1 })
+            }
+          >
+            <option value="">ทุกดีล</option>
+            <option value="yes">Hot only</option>
+            <option value="no">Non-hot</option>
+          </select>
+          <Input
+            type="date"
+            value={params.dateFrom ?? ""}
+            onChange={(event) =>
+              void setParams({ dateFrom: event.target.value || null, page: 1 })
+            }
+          />
+          <Input
+            type="date"
+            value={params.dateTo ?? ""}
+            onChange={(event) =>
+              void setParams({ dateTo: event.target.value || null, page: 1 })
+            }
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button variant="outline" asChild>
+            <Link href="/dashboard/crm/enquiries">Create quotation</Link>
+          </Button>
+          <Button
+            variant={params.view === "table" ? "default" : "outline"}
+            onClick={() => void setParams({ view: "table" })}
+          >
+            Table
+          </Button>
+          <Button
+            variant={params.view === "kanban" ? "default" : "outline"}
+            onClick={() => void setParams({ view: "kanban" })}
+          >
+            Kanban
+          </Button>
+        </div>
+      </div>
+
+      {params.view === "kanban" ? (
+        <KanbanView items={data.items} />
+      ) : (
+        <DataTable table={table} />
+      )}
+    </div>
+  );
+}

src/features/crm/components/settings-page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { crmReferenceQueryOptions } from '../api/queries';
+import { EmptyState, SectionCard } from './shared';
+
+export function MasterOptionsPage() {
+  const { data } = useSuspenseQuery(crmReferenceQueryOptions());
+
+  return (
+    <SectionCard title='Master Options' description='Status, product type, payment term, currency, tax rate'>
+      <div className='grid gap-3 md:grid-cols-2 xl:grid-cols-3'>
+        {data.masterOptions.map((item) => (
+          <div key={item.id} className='rounded-lg border p-4'>
+            <p className='text-muted-foreground text-xs uppercase tracking-[0.2em]'>{item.group}</p>
+            <p className='mt-2 font-medium'>{item.label}</p>
+            <p className='text-muted-foreground text-sm'>{item.code}</p>
+          </div>
+        ))}
+      </div>
+    </SectionCard>
+  );
+}
+
+export function DocumentSequencesPage() {
+  const { data } = useSuspenseQuery(crmReferenceQueryOptions());
+
+  return (
+    <SectionCard title='Document Sequences' description='Mock document sequence by branch'>
+      <div className='space-y-3'>
+        {data.sequences.map((item) => (
+          <div key={item.id} className='rounded-lg border p-4'>
+            <div className='flex items-center justify-between gap-3'>
+              <p className='font-medium'>
+                {item.prefix}{item.period}-{String(item.currentNumber).padStart(item.paddingLength, '0')}
+              </p>
+              <p className='text-muted-foreground text-sm'>{item.documentType}</p>
+            </div>
+            <p className='text-muted-foreground mt-1 text-sm'>Branch: {item.branchId}</p>
+          </div>
+        ))}
+      </div>
+    </SectionCard>
+  );
+}
+
+export function TemplatesPage() {
+  const { data } = useSuspenseQuery(crmReferenceQueryOptions());
+
+  if (data.templates.length === 0) {
+    return <EmptyState title='No templates' description='ยังไม่มี quotation templates' />;
+  }
+
+  return (
+    <SectionCard title='Quotation Templates' description='Mock template and placeholder mappings'>
+      <div className='space-y-4'>
+        {data.templates.map((template) => (
+          <div key={template.id} className='rounded-xl border p-4'>
+            <div className='flex flex-wrap items-center justify-between gap-3'>
+              <div>
+                <p className='font-semibold'>{template.name}</p>
+                <p className='text-muted-foreground text-sm'>{template.description}</p>
+              </div>
+              <p className='text-muted-foreground text-sm'>{template.version}</p>
+            </div>
+            <div className='mt-3 grid gap-3 md:grid-cols-2'>
+              {template.mappings.map((mapping) => (
+                <div key={mapping.id} className='rounded-lg bg-muted/20 p-3 text-sm'>
+                  <p className='font-medium'>{mapping.placeholder}</p>
+                  <p className='text-muted-foreground'>{mapping.sourceField}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </SectionCard>
+  );
+}

src/features/crm/components/shared.tsx

@@ -0,0 +1,367 @@
+'use client';
+
+import Link from 'next/link';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Icons } from '@/components/icons';
+import { cn } from '@/lib/utils';
+import type {
+  ApprovalStep,
+  AuditEvent,
+  CrmBranch,
+  Customer,
+  CustomerContact,
+  Enquiry,
+  Quotation,
+  QuotationCustomerRole
+} from '../api/types';
+import { formatCurrency, formatDate, formatPercent } from '../utils/format';
+import {
+  getCustomerStatusLabel,
+  getEnquiryStatusLabel,
+  getQuotationStatusLabel
+} from '../utils/status';
+
+export function SectionCard({
+  title,
+  description,
+  action,
+  children,
+  className
+}: {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card className={className}>
+      <CardHeader className='flex flex-row items-start justify-between space-y-0'>
+        <div className='space-y-1'>
+          <CardTitle className='text-base'>{title}</CardTitle>
+          {description ? <CardDescription>{description}</CardDescription> : null}
+        </div>
+        {action}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
+
+export function KpiCard({
+  label,
+  value,
+  change,
+  trend
+}: {
+  label: string;
+  value: string;
+  change: string;
+  trend: 'up' | 'down' | 'flat';
+}) {
+  const TrendIcon =
+    trend === 'up' ? Icons.trendingUp : trend === 'down' ? Icons.trendingDown : Icons.clock;
+
+  return (
+    <Card className='bg-gradient-to-br from-card via-card to-muted/40'>
+      <CardHeader className='pb-3'>
+        <div className='flex items-start justify-between gap-3'>
+          <CardDescription>{label}</CardDescription>
+          <Badge variant='outline'>
+            <TrendIcon className='mr-1 h-3.5 w-3.5' />
+            {change}
+          </Badge>
+        </div>
+        <CardTitle className='text-2xl'>{value}</CardTitle>
+      </CardHeader>
+    </Card>
+  );
+}
+
+export function BranchBadge({ branch }: { branch: CrmBranch }) {
+  return <Badge variant='secondary'>{branch.code}</Badge>;
+}
+
+export function CustomerStatusBadge({ status }: { status: Customer['customerStatus'] }) {
+  return (
+    <Badge variant={status === 'inactive' ? 'destructive' : status === 'prospect' ? 'outline' : 'secondary'}>
+      {getCustomerStatusLabel(status)}
+    </Badge>
+  );
+}
+
+export function EnquiryStatusBadge({ status }: { status: Enquiry['status'] }) {
+  return (
+    <Badge
+      variant={
+        status === 'cancelled' || status === 'closed_lost'
+          ? 'destructive'
+          : status === 'converted'
+            ? 'secondary'
+            : 'outline'
+      }
+    >
+      {getEnquiryStatusLabel(status)}
+    </Badge>
+  );
+}
+
+export function QuotationStatusBadge({ status }: { status: Quotation['status'] }) {
+  return (
+    <Badge
+      variant={
+        status === 'accepted' || status === 'approved'
+          ? 'secondary'
+          : status === 'lost' || status === 'rejected' || status === 'cancelled'
+            ? 'destructive'
+            : 'outline'
+      }
+    >
+      {getQuotationStatusLabel(status)}
+    </Badge>
+  );
+}
+
+export function InfoGrid({
+  items,
+  cols = 2
+}: {
+  items: Array<{ label: string; value: React.ReactNode }>;
+  cols?: 2 | 3 | 4;
+}) {
+  return (
+    <div className={cn('grid gap-4', cols === 2 && 'md:grid-cols-2', cols === 3 && 'md:grid-cols-3', cols === 4 && 'md:grid-cols-2 xl:grid-cols-4')}>
+      {items.map((item) => (
+        <div key={item.label} className='rounded-lg border bg-muted/20 p-3'>
+          <p className='text-muted-foreground text-xs uppercase tracking-[0.18em]'>{item.label}</p>
+          <div className='mt-1 text-sm font-medium'>{item.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function TimelineList({
+  items
+}: {
+  items: Array<{
+    id: string;
+    title: string;
+    detail: string;
+    actorName?: string;
+    timestamp: string;
+    tone?: 'default' | 'success' | 'danger';
+  }>;
+}) {
+  return (
+    <div className='space-y-3'>
+      {items.map((item) => (
+        <div key={item.id} className='flex gap-3'>
+          <div className='mt-1 flex flex-col items-center'>
+            <span
+              className={cn(
+                'inline-flex h-2.5 w-2.5 rounded-full bg-primary',
+                item.tone === 'success' && 'bg-emerald-500',
+                item.tone === 'danger' && 'bg-destructive'
+              )}
+            />
+            <span className='bg-border mt-1 h-full w-px' />
+          </div>
+          <div className='pb-3'>
+            <div className='flex flex-wrap items-center gap-2'>
+              <p className='text-sm font-medium'>{item.title}</p>
+              <p className='text-muted-foreground text-xs'>{formatDate(item.timestamp)}</p>
+            </div>
+            <p className='text-muted-foreground text-sm'>{item.detail}</p>
+            {item.actorName ? <p className='mt-1 text-xs'>โดย {item.actorName}</p> : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CustomerRoleCards({
+  roles,
+  customers,
+  contacts
+}: {
+  roles: QuotationCustomerRole[];
+  customers: Customer[];
+  contacts: CustomerContact[];
+}) {
+  return (
+    <div className='grid gap-3 md:grid-cols-2 xl:grid-cols-4'>
+      {roles.map((role) => {
+        const customer = customers.find((item) => item.id === role.customerId);
+        const contact = contacts.find((item) => item.id === role.contactId);
+
+        return (
+          <div key={`${role.role}-${role.customerId}`} className='rounded-lg border bg-muted/20 p-4'>
+            <div className='flex items-center justify-between gap-3'>
+              <p className='text-sm font-semibold capitalize'>{role.role}</p>
+              <Badge variant='outline'>{customer?.code}</Badge>
+            </div>
+            <p className='mt-2 text-sm font-medium'>{customer?.name}</p>
+            <p className='text-muted-foreground text-sm'>{contact?.name ?? 'No contact'}</p>
+            <p className='text-muted-foreground text-xs'>{contact?.position}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function QuotationPreviewPanel({
+  quotation,
+  ownerCustomer,
+  ownerContact,
+  approvalSteps
+}: {
+  quotation: Quotation;
+  ownerCustomer?: Customer;
+  ownerContact?: CustomerContact;
+  approvalSteps: ApprovalStep[];
+}) {
+  return (
+    <SectionCard title='Quotation Preview' description='Mock preview พร้อมต่อยอดไป pdfme/template mapping'>
+      <div className='rounded-xl border bg-background p-5 shadow-sm'>
+        <div className='flex flex-wrap items-start justify-between gap-4 border-b pb-4'>
+          <div>
+            <p className='text-primary text-xs uppercase tracking-[0.3em]'>ALLA OS CRM vNext</p>
+            <h3 className='mt-2 text-xl font-semibold'>{quotation.code}</h3>
+            <p className='text-muted-foreground text-sm'>{quotation.project}</p>
+          </div>
+          <div className='space-y-1 text-sm'>
+            <p><span className='text-muted-foreground'>quotation_date:</span> {quotation.quotationDate}</p>
+            <p><span className='text-muted-foreground'>valid_until:</span> {quotation.validUntil}</p>
+            <p><span className='text-muted-foreground'>currency:</span> THB</p>
+          </div>
+        </div>
+
+        <div className='grid gap-4 py-4 md:grid-cols-2'>
+          <div className='space-y-1 text-sm'>
+            <p className='font-medium'>customer_name</p>
+            <p>{ownerCustomer?.name}</p>
+            <p className='text-muted-foreground'>{ownerCustomer?.address}</p>
+            <p className='text-muted-foreground'>{ownerCustomer?.phone}</p>
+            <p className='text-muted-foreground'>{ownerCustomer?.email}</p>
+          </div>
+          <div className='space-y-1 text-sm'>
+            <p className='font-medium'>customer_att</p>
+            <p>{ownerContact?.name ?? '-'}</p>
+            <p className='text-muted-foreground'>{ownerContact?.position ?? '-'}</p>
+            <p className='text-muted-foreground'>{quotation.siteLocation}</p>
+          </div>
+        </div>
+
+        <div className='space-y-3 border-t pt-4'>
+          <div>
+            <p className='text-sm font-medium'>item_topic</p>
+            <div className='mt-2 space-y-2'>
+              {quotation.items.map((item) => (
+                <div key={item.id} className='flex items-center justify-between gap-4 rounded-lg border p-3 text-sm'>
+                  <div>
+                    <p className='font-medium'>{item.description}</p>
+                    <p className='text-muted-foreground'>
+                      {item.quantity} {item.unit} x {formatCurrency(item.unitPrice)}
+                    </p>
+                  </div>
+                  <p className='font-semibold'>{formatCurrency(item.amount)}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className='rounded-lg bg-muted/30 p-3 text-sm'>
+            <p className='font-medium'>exclusion_data</p>
+            <ul className='text-muted-foreground mt-1 space-y-1'>
+              {quotation.topics
+                .find((topic) => topic.type === 'exclusion')
+                ?.items.map((item) => <li key={item}>- {item}</li>)}
+            </ul>
+          </div>
+          <div className='flex items-center justify-between rounded-lg border border-dashed p-3 text-sm'>
+            <p className='font-medium'>quotation_price</p>
+            <p className='text-lg font-semibold'>{formatCurrency(quotation.totalAmount)}</p>
+          </div>
+          <div className='rounded-lg bg-muted/30 p-3 text-sm'>
+            <p className='font-medium'>approver names and positions</p>
+            <ul className='text-muted-foreground mt-1 space-y-1'>
+              {approvalSteps.map((step) => (
+                <li key={step.id}>
+                  {step.approverName} / {step.approverPosition}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </SectionCard>
+  );
+}
+
+export function RelatedQuotationList({ quotations }: { quotations: Quotation[] }) {
+  return (
+    <div className='space-y-3'>
+      {quotations.map((quotation) => (
+        <div key={quotation.id} className='flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3'>
+          <div>
+            <div className='flex items-center gap-2'>
+              <p className='font-medium'>{quotation.code}</p>
+              <QuotationStatusBadge status={quotation.status} />
+            </div>
+            <p className='text-muted-foreground text-sm'>{quotation.project}</p>
+          </div>
+          <div className='flex items-center gap-3'>
+            <p className='text-sm font-medium'>{formatCurrency(quotation.totalAmount)}</p>
+            <Button variant='outline' asChild size='sm'>
+              <Link href={`/dashboard/crm/quotations/${quotation.id}`}>
+                <Icons.arrowRight className='mr-1 h-4 w-4' />
+                เปิด
+              </Link>
+            </Button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function HotProjectPill({ active }: { active: boolean }) {
+  return active ? <Badge>Hot</Badge> : <Badge variant='outline'>Normal</Badge>;
+}
+
+export function ChancePill({ value }: { value: number }) {
+  return <Badge variant='outline'>{formatPercent(value)}</Badge>;
+}
+
+export function AuditTimeline({ events }: { events: AuditEvent[] }) {
+  return (
+    <TimelineList
+      items={events.map((event) => ({
+        id: event.id,
+        title: event.action,
+        detail: event.detail,
+        actorName: event.actorName,
+        timestamp: event.createdAt,
+        tone:
+          event.action === 'APPROVE'
+            ? 'success'
+            : event.action === 'REJECT'
+              ? 'danger'
+              : 'default'
+      }))}
+    />
+  );
+}
+
+export function EmptyState({ title, description }: { title: string; description: string }) {
+  return (
+    <div className='rounded-lg border border-dashed p-8 text-center'>
+      <p className='font-medium'>{title}</p>
+      <p className='text-muted-foreground mt-1 text-sm'>{description}</p>
+    </div>
+  );
+}

src/features/crm/data/mock-crm.ts

@@ -0,0 +1,731 @@
+import type {
+  ApprovalItem,
+  AuditEvent,
+  ContactShare,
+  ContactShareLog,
+  CrmBranch,
+  CrmSalesperson,
+  Customer,
+  CustomerContact,
+  DocumentSequence,
+  Enquiry,
+  MasterOption,
+  Quotation,
+  QuotationTemplate
+} from '../api/types';
+
+export interface CrmMockState {
+  branches: CrmBranch[];
+  salespersons: CrmSalesperson[];
+  customers: Customer[];
+  contacts: CustomerContact[];
+  contactShares: ContactShare[];
+  contactShareLogs: ContactShareLog[];
+  enquiries: Enquiry[];
+  quotations: Quotation[];
+  approvals: ApprovalItem[];
+  auditEvents: AuditEvent[];
+  sequences: DocumentSequence[];
+  masterOptions: MasterOption[];
+  templates: QuotationTemplate[];
+}
+
+export const initialCrmState: CrmMockState = {
+  branches: [
+    { id: 'bkk', code: 'BKK', name: 'Bangkok HQ', region: 'Central' },
+    { id: 'chn', code: 'CHN', name: 'Chiang Mai Branch', region: 'North' }
+  ],
+  salespersons: [
+    { id: 'sp-1', name: 'Krit S.', nickname: 'Krit', branchId: 'bkk', role: 'sales' },
+    { id: 'sp-2', name: 'Nicha P.', nickname: 'Nicha', branchId: 'bkk', role: 'sale_admin' },
+    { id: 'sp-3', name: 'Ton A.', nickname: 'Ton', branchId: 'chn', role: 'sales' }
+  ],
+  customers: [
+    {
+      id: 'cus-1',
+      code: 'CUS-BKK-001',
+      name: 'Siam Metro Development',
+      taxId: '0105556100011',
+      address: '88 Rama 9 Road',
+      province: 'Bangkok',
+      district: 'Huai Khwang',
+      subDistrict: 'Bang Kapi',
+      postalCode: '10310',
+      phone: '02-555-1001',
+      fax: '02-555-1999',
+      email: 'procurement@siammetro.co.th',
+      customerType: 'developer',
+      customerStatus: 'active',
+      branchId: 'bkk',
+      contactIds: ['ct-1', 'ct-2']
+    },
+    {
+      id: 'cus-2',
+      code: 'CUS-BKK-002',
+      name: 'Prime Lift Engineering',
+      taxId: '0105556100012',
+      address: '19 Vibhavadi Rangsit',
+      province: 'Bangkok',
+      district: 'Chatuchak',
+      subDistrict: 'Chom Phon',
+      postalCode: '10900',
+      phone: '02-555-2002',
+      email: 'sales@primelift.co.th',
+      customerType: 'contractor',
+      customerStatus: 'active',
+      branchId: 'bkk',
+      contactIds: ['ct-3', 'ct-4']
+    },
+    {
+      id: 'cus-3',
+      code: 'CUS-CHN-003',
+      name: 'Northern Cold Chain',
+      taxId: '0505556100013',
+      address: '125 Super Highway',
+      province: 'Chiang Mai',
+      district: 'Mueang',
+      subDistrict: 'Wat Ket',
+      postalCode: '50000',
+      phone: '053-555-3003',
+      email: 'project@ncc.co.th',
+      customerType: 'owner',
+      customerStatus: 'prospect',
+      branchId: 'chn',
+      contactIds: ['ct-5', 'ct-6']
+    },
+    {
+      id: 'cus-4',
+      code: 'CUS-BKK-004',
+      name: 'Urban Dock Solution',
+      taxId: '0105556100014',
+      address: '77 Bangna-Trad KM.8',
+      province: 'Samut Prakan',
+      district: 'Bang Phli',
+      subDistrict: 'Bang Kaeo',
+      postalCode: '10540',
+      phone: '02-555-4004',
+      email: 'admin@urbandock.asia',
+      customerType: 'consultant',
+      customerStatus: 'active',
+      branchId: 'bkk',
+      contactIds: ['ct-7', 'ct-8']
+    },
+    {
+      id: 'cus-5',
+      code: 'CUS-CHN-005',
+      name: 'Lanna Solar Estate',
+      taxId: '0505556100015',
+      address: '199 Ring Road',
+      province: 'Chiang Mai',
+      district: 'San Sai',
+      subDistrict: 'Nong Chom',
+      postalCode: '50210',
+      phone: '053-555-5005',
+      email: 'energy@lannasolar.co.th',
+      customerType: 'developer',
+      customerStatus: 'inactive',
+      branchId: 'chn',
+      contactIds: ['ct-9', 'ct-10']
+    }
+  ],
+  contacts: [
+    { id: 'ct-1', customerId: 'cus-1', name: 'Ploy Tantip', position: 'Procurement Manager', email: 'ploy@siammetro.co.th', phone: '081-111-1111', isPrimary: true },
+    { id: 'ct-2', customerId: 'cus-1', name: 'Vee Chan', position: 'Project Engineer', email: 'vee@siammetro.co.th', phone: '081-111-1112' },
+    { id: 'ct-3', customerId: 'cus-2', name: 'Boss K.', position: 'Managing Director', email: 'boss@primelift.co.th', phone: '082-222-2221', isPrimary: true },
+    { id: 'ct-4', customerId: 'cus-2', name: 'Jane R.', position: 'Estimator', email: 'jane@primelift.co.th', phone: '082-222-2222' },
+    { id: 'ct-5', customerId: 'cus-3', name: 'Aon M.', position: 'Operations Head', email: 'aon@ncc.co.th', phone: '083-333-3331', isPrimary: true },
+    { id: 'ct-6', customerId: 'cus-3', name: 'Max P.', position: 'Warehouse Lead', email: 'max@ncc.co.th', phone: '083-333-3332' },
+    { id: 'ct-7', customerId: 'cus-4', name: 'Mint T.', position: 'Design Consultant', email: 'mint@urbandock.asia', phone: '084-444-4441', isPrimary: true },
+    { id: 'ct-8', customerId: 'cus-4', name: 'Ken D.', position: 'Project Coordinator', email: 'ken@urbandock.asia', phone: '084-444-4442' },
+    { id: 'ct-9', customerId: 'cus-5', name: 'Fah N.', position: 'Energy Planning Lead', email: 'fah@lannasolar.co.th', phone: '085-555-5551', isPrimary: true },
+    { id: 'ct-10', customerId: 'cus-5', name: 'Palm J.', position: 'Plant Director', email: 'palm@lannasolar.co.th', phone: '085-555-5552' }
+  ],
+  contactShares: [
+    { id: 'share-1', contactId: 'ct-1', sharedWithUserId: 'u-1', sharedWithUserName: 'Nicha P.', permission: 'view', createdAt: '2026-06-01T09:00:00.000Z' },
+    { id: 'share-2', contactId: 'ct-7', sharedWithUserId: 'u-2', sharedWithUserName: 'Ton A.', permission: 'edit', createdAt: '2026-06-03T10:30:00.000Z' }
+  ],
+  contactShareLogs: [
+    { id: 'share-log-1', contactId: 'ct-1', action: 'SHARE', targetUserName: 'Nicha P.', actorName: 'Krit S.', createdAt: '2026-06-01T09:00:00.000Z' },
+    { id: 'share-log-2', contactId: 'ct-7', action: 'SHARE', targetUserName: 'Ton A.', actorName: 'Krit S.', createdAt: '2026-06-03T10:30:00.000Z' },
+    { id: 'share-log-3', contactId: 'ct-7', action: 'REVOKE', targetUserName: 'Ton A.', actorName: 'Nicha P.', createdAt: '2026-06-07T14:45:00.000Z' }
+  ],
+  enquiries: [
+    {
+      id: 'enq-1',
+      code: 'ENQ2606-001',
+      title: 'Dock leveler replacement for Phase 3 warehouse',
+      customerId: 'cus-1',
+      contactId: 'ct-1',
+      branchId: 'bkk',
+      salesmanId: 'sp-1',
+      productType: 'dockdoor',
+      status: 'converted',
+      requirementSummary: 'Replace 8 dock levelers with high cycle hydraulic model.',
+      projectLocation: 'Bangkok Logistics Park',
+      chancePercent: 82,
+      competitor: 'Apex Dock',
+      expectedValue: 2750000,
+      dueDate: '2026-06-14',
+      createdAt: '2026-05-28T09:00:00.000Z',
+      updatedAt: '2026-06-09T15:20:00.000Z',
+      quotationIds: ['qt-1', 'qt-2'],
+      activities: [
+        { id: 'enq-1-act-1', type: 'CALL', title: 'รับ requirement เบื้องต้น', detail: 'ลูกค้าต้องการเปลี่ยนภายใน Q3', actorName: 'Krit S.', createdAt: '2026-05-28T09:00:00.000Z' },
+        { id: 'enq-1-act-2', type: 'VISIT', title: 'สำรวจหน้างาน', detail: 'หน้างานพร้อม shutdown 3 วัน', actorName: 'Krit S.', createdAt: '2026-05-30T13:30:00.000Z' },
+        { id: 'enq-1-act-3', type: 'CONVERT', title: 'Convert to quotation', detail: 'สร้าง QT2606-001', actorName: 'Nicha P.', createdAt: '2026-06-02T08:15:00.000Z' }
+      ]
+    },
+    {
+      id: 'enq-2',
+      code: 'ENQ2606-002',
+      title: 'Overhead crane upgrade for fabrication line',
+      customerId: 'cus-2',
+      contactId: 'ct-3',
+      branchId: 'bkk',
+      salesmanId: 'sp-1',
+      productType: 'crane',
+      status: 'requirement',
+      requirementSummary: '10 ton overhead crane with remote monitoring.',
+      projectLocation: 'Samut Sakhon Plant',
+      chancePercent: 68,
+      competitor: 'LiftPro',
+      expectedValue: 5200000,
+      dueDate: '2026-06-20',
+      createdAt: '2026-05-29T10:00:00.000Z',
+      updatedAt: '2026-06-10T11:00:00.000Z',
+      quotationIds: ['qt-3'],
+      activities: [
+        { id: 'enq-2-act-1', type: 'MEETING', title: 'Kickoff meeting', detail: 'หารือ requirement ทางเทคนิค', actorName: 'Krit S.', createdAt: '2026-05-29T10:00:00.000Z' }
+      ]
+    },
+    {
+      id: 'enq-3',
+      code: 'ENQ2606-003',
+      title: 'Solar rooftop for cold storage lot C',
+      customerId: 'cus-3',
+      contactId: 'ct-5',
+      branchId: 'chn',
+      salesmanId: 'sp-3',
+      productType: 'solarcell',
+      status: 'follow_up',
+      requirementSummary: '500 kWp rooftop with energy monitoring.',
+      projectLocation: 'Chiang Mai DC',
+      chancePercent: 49,
+      competitor: 'SunNorth',
+      expectedValue: 6100000,
+      dueDate: '2026-06-18',
+      createdAt: '2026-05-27T09:20:00.000Z',
+      updatedAt: '2026-06-08T16:10:00.000Z',
+      quotationIds: ['qt-4'],
+      activities: [
+        { id: 'enq-3-act-1', type: 'NOTE', title: 'ติดตาม BOQ', detail: 'รอฝั่งลูกค้าส่งโหลดไฟฟ้า', actorName: 'Ton A.', createdAt: '2026-06-08T16:10:00.000Z' }
+      ]
+    },
+    {
+      id: 'enq-4',
+      code: 'ENQ2606-004',
+      title: 'Dock shelter package for retrofit',
+      customerId: 'cus-4',
+      contactId: 'ct-7',
+      branchId: 'bkk',
+      salesmanId: 'sp-1',
+      productType: 'dockdoor',
+      status: 'new',
+      requirementSummary: 'Retrofit existing dock shelter 12 bays.',
+      projectLocation: 'Bangna Logistics Hub',
+      chancePercent: 35,
+      competitor: 'Apex Dock',
+      expectedValue: 1850000,
+      dueDate: '2026-06-21',
+      createdAt: '2026-06-05T14:00:00.000Z',
+      updatedAt: '2026-06-05T14:00:00.000Z',
+      quotationIds: [],
+      activities: [
+        { id: 'enq-4-act-1', type: 'CALL', title: 'Lead intake', detail: 'รับ lead จาก consultant', actorName: 'Krit S.', createdAt: '2026-06-05T14:00:00.000Z' }
+      ]
+    },
+    {
+      id: 'enq-5',
+      code: 'ENQ2606-005',
+      title: 'Crane preventive maintenance agreement',
+      customerId: 'cus-2',
+      contactId: 'ct-4',
+      branchId: 'bkk',
+      salesmanId: 'sp-1',
+      productType: 'crane',
+      status: 'qualifying',
+      requirementSummary: 'Annual PM contract for 6 cranes.',
+      projectLocation: 'Ayutthaya Plant',
+      chancePercent: 53,
+      competitor: 'LiftPro',
+      expectedValue: 980000,
+      dueDate: '2026-06-19',
+      createdAt: '2026-06-02T11:00:00.000Z',
+      updatedAt: '2026-06-06T12:00:00.000Z',
+      quotationIds: ['qt-5'],
+      activities: [
+        { id: 'enq-5-act-1', type: 'UPDATE', title: 'ผ่านขั้น qualifying', detail: 'ลูกค้ามี budget แล้ว', actorName: 'Krit S.', createdAt: '2026-06-06T12:00:00.000Z' }
+      ]
+    },
+    {
+      id: 'enq-6',
+      code: 'ENQ2606-006',
+      title: 'Solar canopy concept study',
+      customerId: 'cus-5',
+      contactId: 'ct-9',
+      branchId: 'chn',
+      salesmanId: 'sp-3',
+      productType: 'solarcell',
+      status: 'closed_lost',
+      requirementSummary: 'Concept study for parking canopy solar.',
+      projectLocation: 'Chiang Rai Service Center',
+      chancePercent: 0,
+      competitor: 'GreenBeam',
+      expectedValue: 2400000,
+      dueDate: '2026-06-08',
+      createdAt: '2026-05-20T09:00:00.000Z',
+      updatedAt: '2026-06-08T18:00:00.000Z',
+      quotationIds: ['qt-6'],
+      activities: [
+        { id: 'enq-6-act-1', type: 'UPDATE', title: 'Lost to competitor', detail: 'ราคา competitor ต่ำกว่า', actorName: 'Ton A.', createdAt: '2026-06-08T18:00:00.000Z' }
+      ]
+    },
+    {
+      id: 'enq-7',
+      code: 'ENQ2606-007',
+      title: 'High-speed door package',
+      customerId: 'cus-1',
+      contactId: 'ct-2',
+      branchId: 'bkk',
+      salesmanId: 'sp-1',
+      productType: 'dockdoor',
+      status: 'cancelled',
+      requirementSummary: 'High-speed doors for food-grade area.',
+      projectLocation: 'Pathum Thani',
+      chancePercent: 0,
+      competitor: 'FastDoor',
+      expectedValue: 1600000,
+      dueDate: '2026-06-11',
+      createdAt: '2026-05-25T10:10:00.000Z',
+      updatedAt: '2026-06-04T11:00:00.000Z',
+      quotationIds: [],
+      activities: [
+        { id: 'enq-7-act-1', type: 'UPDATE', title: 'Project cancelled', detail: 'Owner เลื่อน CAPEX', actorName: 'Nicha P.', createdAt: '2026-06-04T11:00:00.000Z' }
+      ]
+    },
+    {
+      id: 'enq-8',
+      code: 'ENQ2606-008',
+      title: 'Monorail crane for packaging line',
+      customerId: 'cus-3',
+      contactId: 'ct-6',
+      branchId: 'chn',
+      salesmanId: 'sp-3',
+      productType: 'crane',
+      status: 'new',
+      requirementSummary: '1 ton monorail crane with quick delivery.',
+      projectLocation: 'Lamphun Plant',
+      chancePercent: 28,
+      competitor: 'NorthHoist',
+      expectedValue: 740000,
+      dueDate: '2026-06-24',
+      createdAt: '2026-06-09T13:00:00.000Z',
+      updatedAt: '2026-06-09T13:00:00.000Z',
+      quotationIds: [],
+      activities: [
+        { id: 'enq-8-act-1', type: 'CALL', title: 'รับ enquiry ใหม่', detail: 'ต้องการเสนอราคาใน 7 วัน', actorName: 'Ton A.', createdAt: '2026-06-09T13:00:00.000Z' }
+      ]
+    }
+  ],
+  quotations: [
+    {
+      id: 'qt-1',
+      code: 'QT2606-001',
+      enquiryId: 'enq-1',
+      quotationDate: '2026-06-02',
+      validUntil: '2026-07-02',
+      quotationType: 'official',
+      project: 'Warehouse Dock Modernization',
+      siteLocation: 'Bangkok Logistics Park',
+      customerRoles: [
+        { role: 'owner', customerId: 'cus-1', contactId: 'ct-1' },
+        { role: 'consultant', customerId: 'cus-4', contactId: 'ct-7' },
+        { role: 'billing', customerId: 'cus-2', contactId: 'ct-4' }
+      ],
+      salesmanId: 'sp-1',
+      saleAdminId: 'sp-2',
+      branchId: 'bkk',
+      status: 'pending_approval',
+      revision: 0,
+      totalAmount: 2750000,
+      chancePercent: 82,
+      isHotProject: true,
+      approvalSnapshot: 'Awaiting Level 2 approval',
+      items: [
+        { id: 'qt-1-item-1', topic: 'Mechanical', description: 'Hydraulic dock leveler 8 sets', quantity: 8, unit: 'set', unitPrice: 280000, amount: 2240000 },
+        { id: 'qt-1-item-2', topic: 'Installation', description: 'Site install and commissioning', quantity: 1, unit: 'lot', unitPrice: 510000, amount: 510000 }
+      ],
+      topics: [
+        { id: 'qt-1-topic-1', type: 'scope', label: 'Scope', items: ['Supply equipment', 'Install and test', 'Operator training'] },
+        { id: 'qt-1-topic-2', type: 'exclusion', label: 'Exclusion', items: ['Civil work by customer', 'Night shift overtime'] },
+        { id: 'qt-1-topic-3', type: 'payment', label: 'Payment', items: ['40% down payment', '50% upon delivery', '10% after handover'] }
+      ],
+      followUps: [
+        { id: 'qt-1-fu-1', title: 'Prepare approval summary', dueDate: '2026-06-12', ownerName: 'Nicha P.', status: 'open' },
+        { id: 'qt-1-fu-2', title: 'Confirm shutdown window', dueDate: '2026-06-13', ownerName: 'Krit S.', status: 'open' }
+      ],
+      attachments: [
+        { id: 'qt-1-att-1', fileName: 'technical-spec.pdf', fileType: 'pdf', uploadedAt: '2026-06-02T10:00:00.000Z' }
+      ],
+      approvalSteps: [
+        { id: 'qt-1-ap-1', level: 1, approverName: 'Head of Sales', approverPosition: 'Sales Director', status: 'approved', actedAt: '2026-06-03T09:30:00.000Z' },
+        { id: 'qt-1-ap-2', level: 2, approverName: 'CEO Office', approverPosition: 'Managing Director', status: 'pending' }
+      ],
+      auditEventIds: ['audit-1', 'audit-2']
+    },
+    {
+      id: 'qt-2',
+      code: 'QT2606-001-R01',
+      enquiryId: 'enq-1',
+      quotationDate: '2026-06-07',
+      validUntil: '2026-07-07',
+      quotationType: 'official',
+      project: 'Warehouse Dock Modernization',
+      siteLocation: 'Bangkok Logistics Park',
+      customerRoles: [
+        { role: 'owner', customerId: 'cus-1', contactId: 'ct-1' },
+        { role: 'consultant', customerId: 'cus-4', contactId: 'ct-7' }
+      ],
+      salesmanId: 'sp-1',
+      saleAdminId: 'sp-2',
+      branchId: 'bkk',
+      status: 'revised',
+      revision: 1,
+      totalAmount: 2875000,
+      chancePercent: 78,
+      isHotProject: true,
+      approvedPdfUrl: '/mock/qt2606-001-r01.pdf',
+      items: [
+        { id: 'qt-2-item-1', topic: 'Mechanical', description: 'Hydraulic dock leveler 8 sets', quantity: 8, unit: 'set', unitPrice: 280000, amount: 2240000 },
+        { id: 'qt-2-item-2', topic: 'Safety', description: 'Additional dock light and safety package', quantity: 1, unit: 'lot', unitPrice: 635000, amount: 635000 }
+      ],
+      topics: [
+        { id: 'qt-2-topic-1', type: 'scope', label: 'Scope', items: ['Updated safety package', 'Delivery within 30 days'] },
+        { id: 'qt-2-topic-2', type: 'exclusion', label: 'Exclusion', items: ['Permit by customer'] },
+        { id: 'qt-2-topic-3', type: 'payment', label: 'Payment', items: ['40/50/10 milestone'] }
+      ],
+      followUps: [
+        { id: 'qt-2-fu-1', title: 'Send revised file to customer', dueDate: '2026-06-12', ownerName: 'Krit S.', status: 'open' }
+      ],
+      attachments: [
+        { id: 'qt-2-att-1', fileName: 'rev1-comparison.pdf', fileType: 'pdf', uploadedAt: '2026-06-07T16:00:00.000Z' }
+      ],
+      approvalSteps: [
+        { id: 'qt-2-ap-1', level: 1, approverName: 'Head of Sales', approverPosition: 'Sales Director', status: 'approved', actedAt: '2026-06-07T15:30:00.000Z' },
+        { id: 'qt-2-ap-2', level: 2, approverName: 'CEO Office', approverPosition: 'Managing Director', status: 'approved', actedAt: '2026-06-08T09:00:00.000Z' }
+      ],
+      auditEventIds: ['audit-3']
+    },
+    {
+      id: 'qt-3',
+      code: 'QT2606-002',
+      enquiryId: 'enq-2',
+      quotationDate: '2026-06-05',
+      validUntil: '2026-07-05',
+      quotationType: 'budgetary',
+      project: 'Fabrication Crane Upgrade',
+      siteLocation: 'Samut Sakhon Plant',
+      customerRoles: [
+        { role: 'owner', customerId: 'cus-2', contactId: 'ct-3' },
+        { role: 'contractor', customerId: 'cus-4', contactId: 'ct-8' }
+      ],
+      salesmanId: 'sp-1',
+      saleAdminId: 'sp-2',
+      branchId: 'bkk',
+      status: 'draft',
+      revision: 0,
+      totalAmount: 5200000,
+      chancePercent: 68,
+      isHotProject: false,
+      items: [
+        { id: 'qt-3-item-1', topic: 'Crane', description: '10 ton overhead crane', quantity: 1, unit: 'set', unitPrice: 4500000, amount: 4500000 },
+        { id: 'qt-3-item-2', topic: 'IoT', description: 'Remote monitoring package', quantity: 1, unit: 'set', unitPrice: 700000, amount: 700000 }
+      ],
+      topics: [
+        { id: 'qt-3-topic-1', type: 'scope', label: 'Scope', items: ['Supply', 'Install', 'Commission'] },
+        { id: 'qt-3-topic-2', type: 'payment', label: 'Payment', items: ['50% deposit', '40% delivery', '10% handover'] },
+        { id: 'qt-3-topic-3', type: 'exclusion', label: 'Exclusion', items: ['Building strengthening'] }
+      ],
+      followUps: [{ id: 'qt-3-fu-1', title: 'Finalize civil scope', dueDate: '2026-06-15', ownerName: 'Krit S.', status: 'open' }],
+      attachments: [],
+      approvalSteps: [],
+      auditEventIds: []
+    },
+    {
+      id: 'qt-4',
+      code: 'QT2606-003',
+      enquiryId: 'enq-3',
+      quotationDate: '2026-06-03',
+      validUntil: '2026-07-03',
+      quotationType: 'official',
+      project: 'Cold Chain Rooftop Solar',
+      siteLocation: 'Chiang Mai DC',
+      customerRoles: [
+        { role: 'owner', customerId: 'cus-3', contactId: 'ct-5' },
+        { role: 'consultant', customerId: 'cus-5', contactId: 'ct-9' }
+      ],
+      salesmanId: 'sp-3',
+      saleAdminId: 'sp-2',
+      branchId: 'chn',
+      status: 'sent',
+      revision: 0,
+      totalAmount: 6100000,
+      chancePercent: 49,
+      isHotProject: true,
+      approvedPdfUrl: '/mock/qt2606-003.pdf',
+      items: [
+        { id: 'qt-4-item-1', topic: 'Solar', description: '500 kWp rooftop system', quantity: 1, unit: 'lot', unitPrice: 5900000, amount: 5900000 },
+        { id: 'qt-4-item-2', topic: 'Monitoring', description: 'EMS dashboard', quantity: 1, unit: 'lot', unitPrice: 200000, amount: 200000 }
+      ],
+      topics: [
+        { id: 'qt-4-topic-1', type: 'scope', label: 'Scope', items: ['EPC turnkey'] },
+        { id: 'qt-4-topic-2', type: 'payment', label: 'Payment', items: ['30/60/10'] },
+        { id: 'qt-4-topic-3', type: 'exclusion', label: 'Exclusion', items: ['Transformer upgrade'] }
+      ],
+      followUps: [{ id: 'qt-4-fu-1', title: 'Follow up board decision', dueDate: '2026-06-11', ownerName: 'Ton A.', status: 'open' }],
+      attachments: [{ id: 'qt-4-att-1', fileName: 'financial-model.xls', fileType: 'xls', uploadedAt: '2026-06-03T12:00:00.000Z' }],
+      approvalSteps: [
+        { id: 'qt-4-ap-1', level: 1, approverName: 'Regional Sales Manager', approverPosition: 'Regional Manager', status: 'approved', actedAt: '2026-06-03T11:00:00.000Z' }
+      ],
+      auditEventIds: ['audit-4']
+    },
+    {
+      id: 'qt-5',
+      code: 'QT2606-004',
+      enquiryId: 'enq-5',
+      quotationDate: '2026-06-06',
+      validUntil: '2026-07-06',
+      quotationType: 'service',
+      project: 'Annual Crane PM',
+      siteLocation: 'Ayutthaya Plant',
+      customerRoles: [{ role: 'owner', customerId: 'cus-2', contactId: 'ct-4' }],
+      salesmanId: 'sp-1',
+      saleAdminId: 'sp-2',
+      branchId: 'bkk',
+      status: 'approved',
+      revision: 0,
+      totalAmount: 980000,
+      chancePercent: 53,
+      isHotProject: false,
+      approvedPdfUrl: '/mock/qt2606-004.pdf',
+      items: [{ id: 'qt-5-item-1', topic: 'Service', description: 'PM contract 12 months', quantity: 1, unit: 'lot', unitPrice: 980000, amount: 980000 }],
+      topics: [
+        { id: 'qt-5-topic-1', type: 'scope', label: 'Scope', items: ['Quarterly PM', 'Emergency call support'] },
+        { id: 'qt-5-topic-2', type: 'payment', label: 'Payment', items: ['100% after PO'] },
+        { id: 'qt-5-topic-3', type: 'exclusion', label: 'Exclusion', items: ['Spare parts'] }
+      ],
+      followUps: [{ id: 'qt-5-fu-1', title: 'Await PO', dueDate: '2026-06-17', ownerName: 'Nicha P.', status: 'open' }],
+      attachments: [],
+      approvalSteps: [{ id: 'qt-5-ap-1', level: 1, approverName: 'Service GM', approverPosition: 'GM Service', status: 'approved', actedAt: '2026-06-07T10:00:00.000Z' }],
+      auditEventIds: []
+    },
+    {
+      id: 'qt-6',
+      code: 'QT2606-005',
+      enquiryId: 'enq-6',
+      quotationDate: '2026-05-26',
+      validUntil: '2026-06-25',
+      quotationType: 'budgetary',
+      project: 'Solar Canopy Feasibility',
+      siteLocation: 'Chiang Rai Service Center',
+      customerRoles: [{ role: 'owner', customerId: 'cus-5', contactId: 'ct-9' }],
+      salesmanId: 'sp-3',
+      saleAdminId: 'sp-2',
+      branchId: 'chn',
+      status: 'lost',
+      revision: 0,
+      totalAmount: 2400000,
+      chancePercent: 0,
+      isHotProject: false,
+      items: [{ id: 'qt-6-item-1', topic: 'Solar', description: 'Canopy concept and EPC budget', quantity: 1, unit: 'lot', unitPrice: 2400000, amount: 2400000 }],
+      topics: [
+        { id: 'qt-6-topic-1', type: 'scope', label: 'Scope', items: ['Concept study'] },
+        { id: 'qt-6-topic-2', type: 'payment', label: 'Payment', items: ['50/50'] },
+        { id: 'qt-6-topic-3', type: 'exclusion', label: 'Exclusion', items: ['Authority permit'] }
+      ],
+      followUps: [],
+      attachments: [],
+      approvalSteps: [],
+      auditEventIds: ['audit-5']
+    },
+    {
+      id: 'qt-7',
+      code: 'QT2606-006',
+      enquiryId: 'enq-4',
+      quotationDate: '2026-06-09',
+      validUntil: '2026-07-09',
+      quotationType: 'official',
+      project: 'Dock Shelter Retrofit',
+      siteLocation: 'Bangna Logistics Hub',
+      customerRoles: [{ role: 'consultant', customerId: 'cus-4', contactId: 'ct-7' }],
+      salesmanId: 'sp-1',
+      saleAdminId: 'sp-2',
+      branchId: 'bkk',
+      status: 'pending_approval',
+      revision: 0,
+      totalAmount: 1850000,
+      chancePercent: 35,
+      isHotProject: false,
+      items: [{ id: 'qt-7-item-1', topic: 'Retrofit', description: 'Dock shelter 12 bays', quantity: 12, unit: 'bay', unitPrice: 154166.67, amount: 1850000 }],
+      topics: [
+        { id: 'qt-7-topic-1', type: 'scope', label: 'Scope', items: ['Supply and install 12 shelters'] },
+        { id: 'qt-7-topic-2', type: 'payment', label: 'Payment', items: ['50/50'] },
+        { id: 'qt-7-topic-3', type: 'exclusion', label: 'Exclusion', items: ['Scaffold by others'] }
+      ],
+      followUps: [{ id: 'qt-7-fu-1', title: 'Submit approval', dueDate: '2026-06-12', ownerName: 'Nicha P.', status: 'open' }],
+      attachments: [],
+      approvalSteps: [{ id: 'qt-7-ap-1', level: 1, approverName: 'Sales Director', approverPosition: 'Director', status: 'pending' }],
+      auditEventIds: []
+    },
+    {
+      id: 'qt-8',
+      code: 'QT2606-007',
+      enquiryId: 'enq-8',
+      quotationDate: '2026-06-10',
+      validUntil: '2026-07-10',
+      quotationType: 'official',
+      project: 'Monorail Crane Fast Track',
+      siteLocation: 'Lamphun Plant',
+      customerRoles: [{ role: 'owner', customerId: 'cus-3', contactId: 'ct-6' }],
+      salesmanId: 'sp-3',
+      saleAdminId: 'sp-2',
+      branchId: 'chn',
+      status: 'draft',
+      revision: 0,
+      totalAmount: 740000,
+      chancePercent: 28,
+      isHotProject: false,
+      items: [{ id: 'qt-8-item-1', topic: 'Crane', description: '1 ton monorail crane', quantity: 1, unit: 'set', unitPrice: 740000, amount: 740000 }],
+      topics: [
+        { id: 'qt-8-topic-1', type: 'scope', label: 'Scope', items: ['Supply only'] },
+        { id: 'qt-8-topic-2', type: 'payment', label: 'Payment', items: ['100% before delivery'] },
+        { id: 'qt-8-topic-3', type: 'exclusion', label: 'Exclusion', items: ['Install by customer'] }
+      ],
+      followUps: [],
+      attachments: [],
+      approvalSteps: [],
+      auditEventIds: []
+    },
+    {
+      id: 'qt-9',
+      code: 'QT2606-008',
+      enquiryId: 'enq-2',
+      quotationDate: '2026-06-08',
+      validUntil: '2026-07-08',
+      quotationType: 'official',
+      project: 'Crane Upgrade Option B',
+      siteLocation: 'Samut Sakhon Plant',
+      customerRoles: [{ role: 'owner', customerId: 'cus-2', contactId: 'ct-3' }],
+      salesmanId: 'sp-1',
+      saleAdminId: 'sp-2',
+      branchId: 'bkk',
+      status: 'rejected',
+      revision: 0,
+      totalAmount: 5450000,
+      chancePercent: 22,
+      isHotProject: false,
+      items: [{ id: 'qt-9-item-1', topic: 'Crane', description: 'Higher spec option', quantity: 1, unit: 'set', unitPrice: 5450000, amount: 5450000 }],
+      topics: [
+        { id: 'qt-9-topic-1', type: 'scope', label: 'Scope', items: ['Higher duty cycle spec'] },
+        { id: 'qt-9-topic-2', type: 'payment', label: 'Payment', items: ['40/50/10'] },
+        { id: 'qt-9-topic-3', type: 'exclusion', label: 'Exclusion', items: ['Building modification'] }
+      ],
+      followUps: [],
+      attachments: [],
+      approvalSteps: [{ id: 'qt-9-ap-1', level: 1, approverName: 'Sales Director', approverPosition: 'Director', status: 'rejected', actedAt: '2026-06-09T13:00:00.000Z', comment: 'Margin below target' }],
+      auditEventIds: []
+    },
+    {
+      id: 'qt-10',
+      code: 'QT2606-009',
+      enquiryId: 'enq-5',
+      quotationDate: '2026-06-10',
+      validUntil: '2026-07-10',
+      quotationType: 'service',
+      project: 'Spare Parts Bundle',
+      siteLocation: 'Ayutthaya Plant',
+      customerRoles: [{ role: 'billing', customerId: 'cus-2', contactId: 'ct-4' }],
+      salesmanId: 'sp-1',
+      saleAdminId: 'sp-2',
+      branchId: 'bkk',
+      status: 'accepted',
+      revision: 0,
+      totalAmount: 420000,
+      chancePercent: 100,
+      isHotProject: false,
+      approvedPdfUrl: '/mock/qt2606-009.pdf',
+      items: [{ id: 'qt-10-item-1', topic: 'Spare Parts', description: 'Critical spare bundle', quantity: 1, unit: 'lot', unitPrice: 420000, amount: 420000 }],
+      topics: [
+        { id: 'qt-10-topic-1', type: 'scope', label: 'Scope', items: ['Spare bundle supply'] },
+        { id: 'qt-10-topic-2', type: 'payment', label: 'Payment', items: ['100% with PO'] },
+        { id: 'qt-10-topic-3', type: 'exclusion', label: 'Exclusion', items: ['On-site labor'] }
+      ],
+      followUps: [{ id: 'qt-10-fu-1', title: 'Coordinate delivery slot', dueDate: '2026-06-16', ownerName: 'Nicha P.', status: 'done' }],
+      attachments: [{ id: 'qt-10-att-1', fileName: 'spare-list.doc', fileType: 'doc', uploadedAt: '2026-06-10T09:00:00.000Z' }],
+      approvalSteps: [{ id: 'qt-10-ap-1', level: 1, approverName: 'Service GM', approverPosition: 'GM Service', status: 'approved', actedAt: '2026-06-10T08:00:00.000Z' }],
+      auditEventIds: []
+    }
+  ],
+  approvals: [
+    { id: 'approval-1', quotationId: 'qt-1', quotationCode: 'QT2606-001', amount: 2750000, productType: 'dockdoor', branchId: 'bkk', submitterName: 'Nicha P.', approverLevel: 2, status: 'pending' },
+    { id: 'approval-2', quotationId: 'qt-7', quotationCode: 'QT2606-006', amount: 1850000, productType: 'dockdoor', branchId: 'bkk', submitterName: 'Nicha P.', approverLevel: 1, status: 'pending' },
+    { id: 'approval-3', quotationId: 'qt-3', quotationCode: 'QT2606-002', amount: 5200000, productType: 'crane', branchId: 'bkk', submitterName: 'Krit S.', approverLevel: 1, status: 'pending' }
+  ],
+  auditEvents: [
+    { id: 'audit-1', entityType: 'quotation', entityId: 'qt-1', action: 'CREATE', actorName: 'Nicha P.', detail: 'สร้างใบเสนอราคา QT2606-001', createdAt: '2026-06-02T08:15:00.000Z' },
+    { id: 'audit-2', entityType: 'approval', entityId: 'qt-1', action: 'APPROVE', actorName: 'Head of Sales', detail: 'อนุมัติ level 1', createdAt: '2026-06-03T09:30:00.000Z' },
+    { id: 'audit-3', entityType: 'quotation', entityId: 'qt-2', action: 'REVISE', actorName: 'Krit S.', detail: 'สร้าง revision R01 เพิ่ม safety package', createdAt: '2026-06-07T16:00:00.000Z' },
+    { id: 'audit-4', entityType: 'quotation', entityId: 'qt-4', action: 'SEND', actorName: 'Ton A.', detail: 'ส่งใบเสนอราคาให้ลูกค้าทางอีเมล', createdAt: '2026-06-04T10:10:00.000Z' },
+    { id: 'audit-5', entityType: 'quotation', entityId: 'qt-6', action: 'REJECT', actorName: 'Customer Board', detail: 'ลูกค้าเลือกคู่แข่งเนื่องจากราคา', createdAt: '2026-06-08T18:00:00.000Z' }
+  ],
+  sequences: [
+    { id: 'seq-1', documentType: 'enquiry', prefix: 'ENQ', period: '2606', branchId: 'bkk', currentNumber: 8, paddingLength: 3 },
+    { id: 'seq-2', documentType: 'quotation', prefix: 'QT', period: '2606', branchId: 'bkk', currentNumber: 9, paddingLength: 3 },
+    { id: 'seq-3', documentType: 'quotation_revision', prefix: 'QT', period: '2606', branchId: 'bkk', currentNumber: 1, paddingLength: 2 }
+  ],
+  masterOptions: [
+    { id: 'mo-1', group: 'status', code: 'new', label: 'New', active: true },
+    { id: 'mo-2', group: 'status', code: 'pending_approval', label: 'Pending Approval', active: true },
+    { id: 'mo-3', group: 'product_type', code: 'crane', label: 'Crane', active: true },
+    { id: 'mo-4', group: 'product_type', code: 'dockdoor', label: 'Dock Door', active: true },
+    { id: 'mo-5', group: 'product_type', code: 'solarcell', label: 'Solar Cell', active: true },
+    { id: 'mo-6', group: 'payment_term', code: '40_50_10', label: '40/50/10', active: true },
+    { id: 'mo-7', group: 'currency', code: 'THB', label: 'Thai Baht', active: true },
+    { id: 'mo-8', group: 'tax_rate', code: 'VAT7', label: 'VAT 7%', active: true }
+  ],
+  templates: [
+    {
+      id: 'tpl-1',
+      name: 'Standard Commercial Proposal',
+      version: 'v1.2',
+      branchId: 'bkk',
+      description: 'Template for standard equipment quotation.',
+      mappings: [
+        { id: 'tpl-1-map-1', key: 'customer_name', placeholder: '{{customer_name}}', sourceField: 'customer.name' },
+        { id: 'tpl-1-map-2', key: 'project_name', placeholder: '{{project_name}}', sourceField: 'quotation.project' },
+        { id: 'tpl-1-map-3', key: 'quotation_price', placeholder: '{{quotation_price}}', sourceField: 'quotation.totalAmount' }
+      ]
+    },
+    {
+      id: 'tpl-2',
+      name: 'Solar EPC Proposal',
+      version: 'v0.9',
+      branchId: 'chn',
+      description: 'Template for solar EPC quotation preview.',
+      mappings: [
+        { id: 'tpl-2-map-1', key: 'site_location', placeholder: '{{site_location}}', sourceField: 'quotation.siteLocation' },
+        { id: 'tpl-2-map-2', key: 'approver_names', placeholder: '{{approver_names}}', sourceField: 'quotation.approvalSteps[].approverName' }
+      ]
+    }
+  ]
+};

src/features/crm/data/options.ts

@@ -0,0 +1,39 @@
+export const enquiryStatusOptions = [
+  { value: 'new', label: 'New' },
+  { value: 'qualifying', label: 'Qualifying' },
+  { value: 'requirement', label: 'Requirement' },
+  { value: 'follow_up', label: 'Follow Up' },
+  { value: 'converted', label: 'Converted' },
+  { value: 'closed_lost', label: 'Closed Lost' },
+  { value: 'cancelled', label: 'Cancelled' }
+] as const;
+
+export const quotationStatusOptions = [
+  { value: 'draft', label: 'Draft' },
+  { value: 'pending_approval', label: 'Pending Approval' },
+  { value: 'approved', label: 'Approved' },
+  { value: 'rejected', label: 'Rejected' },
+  { value: 'sent', label: 'Sent' },
+  { value: 'accepted', label: 'Accepted' },
+  { value: 'lost', label: 'Lost' },
+  { value: 'cancelled', label: 'Cancelled' },
+  { value: 'revised', label: 'Revised' }
+] as const;
+
+export const customerStatusOptions = [
+  { value: 'active', label: 'Active' },
+  { value: 'prospect', label: 'Prospect' },
+  { value: 'inactive', label: 'Inactive' }
+] as const;
+
+export const productTypeOptions = [
+  { value: 'crane', label: 'Crane' },
+  { value: 'dockdoor', label: 'Dock Door' },
+  { value: 'solarcell', label: 'Solar Cell' }
+] as const;
+
+export const quotationTypeOptions = [
+  { value: 'official', label: 'Official' },
+  { value: 'budgetary', label: 'Budgetary' },
+  { value: 'service', label: 'Service' }
+] as const;

src/features/crm/schemas/customer.ts

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+
+export const customerSchema = z.object({
+  code: z.string().min(3),
+  name: z.string().min(3),
+  taxId: z.string().min(8),
+  email: z.string().email(),
+  phone: z.string().min(8),
+  customerType: z.enum(['developer', 'contractor', 'owner', 'consultant']),
+  customerStatus: z.enum(['active', 'prospect', 'inactive']),
+  branchId: z.string().min(1),
+  address: z.string().min(3),
+  province: z.string().min(2),
+  district: z.string().min(2),
+  subDistrict: z.string().min(2),
+  postalCode: z.string().min(4)
+});
+
+export type CustomerFormValues = z.infer<typeof customerSchema>;

src/features/crm/utils/format.ts

@@ -0,0 +1,19 @@
+export function formatCurrency(value: number) {
+  return new Intl.NumberFormat('th-TH', {
+    style: 'currency',
+    currency: 'THB',
+    maximumFractionDigits: 0
+  }).format(value);
+}
+
+export function formatDate(value: string) {
+  return new Intl.DateTimeFormat('th-TH', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  }).format(new Date(value));
+}
+
+export function formatPercent(value: number) {
+  return `${value}%`;
+}

src/features/crm/utils/status.ts

@@ -0,0 +1,41 @@
+import type { Customer, EnquiryStatus, QuotationStatus } from '../api/types';
+
+export function getCustomerStatusLabel(status: Customer['customerStatus']) {
+  return (
+    {
+      active: 'Active',
+      prospect: 'Prospect',
+      inactive: 'Inactive'
+    }[status] ?? status
+  );
+}
+
+export function getEnquiryStatusLabel(status: EnquiryStatus) {
+  return (
+    {
+      new: 'New',
+      qualifying: 'Qualifying',
+      requirement: 'Requirement',
+      follow_up: 'Follow Up',
+      converted: 'Converted',
+      closed_lost: 'Closed Lost',
+      cancelled: 'Cancelled'
+    }[status] ?? status
+  );
+}
+
+export function getQuotationStatusLabel(status: QuotationStatus) {
+  return (
+    {
+      draft: 'Draft',
+      pending_approval: 'Pending Approval',
+      approved: 'Approved',
+      rejected: 'Rejected',
+      sent: 'Sent',
+      accepted: 'Accepted',
+      lost: 'Lost',
+      cancelled: 'Cancelled',
+      revised: 'Revised'
+    }[status] ?? status
+  );
+}