// app/(dashboard)/booking/create/[busId]/page.tsx
import { createBooking } from './actions';

export default function CreateBookingPage() {
  return (
    <form action={createBooking}>
      <input name="book_cus_name" placeholder="ชื่อลูกค้า" required />
      <input name="book_pax" type="number" min={1} placeholder="จำนวนคน" />
      <button type="submit">สร้าง Booking</button>
    </form>
  );
}

// app/(dashboard)/dashboard/page.tsx
import { Suspense } from 'react';
import { SalesChart } from './sales-chart';
import { BookingSummary } from './booking-summary';
import { Skeleton } from '@heroui/react';

// Static shell renders immediately, dynamic parts stream in
export default function DashboardPage() {
  return (
    <div className="grid grid-cols-2 gap-4">
      {/* Static: renders at build time */}
      <h1>Dashboard</h1>

      {/* Dynamic: streams in when ready */}
      <Suspense fallback={<Skeleton className="h-64 w-full rounded-lg" />}>
        <SalesChart />
      </Suspense>

      <Suspense fallback={<Skeleton className="h-48 w-full rounded-lg" />}>
        <BookingSummary />
      </Suspense>
    </div>
  );
}

// app/(dashboard)/payment/page.tsx
import { auth } from '@/auth';
import { forbidden, unauthorized } from 'next/navigation';

export default async function PaymentPage() {
  const session = await auth();

  if (!session) unauthorized();   // → renders unauthorized.tsx (401)
  if (!['payment', 'admin'].includes(session.user.scope)) {
    forbidden();                  // → renders forbidden.tsx (403)
  }

  return <PaymentList />;
}

// app/forbidden.tsx — custom 403 page
export default function Forbidden() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="text-center">
        <h1 className="text-4xl font-bold">403</h1>
        <p className="mt-2 text-gray-500">คุณไม่มีสิทธิ์เข้าถึงหน้านี้</p>
      </div>
    </div>
  );
}

pbc_incentive.invoice_reports.book_id      → pbc_center.bookings.book_id
pbc_incentive.costing_reports.per_id       → pbc_center.periods.per_id
pbc_report.invoice_full_payments.book_id   → pbc_center.bookings.book_id
pbc_report.sales_booking_dailies.ser_id    → pbc_center.series.ser_id
pbc_costing.costing_series_reports.ser_id  → pbc_center.series.ser_id

pbc-monorepo/
├── apps/
│   ├── web/                          # Next.js Frontend
│   │   ├── app/
│   │   │   ├── (auth)/
│   │   │   ├── (dashboard)/
│   │   │   └── api/auth/            # Auth.js v5 only
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── stores/
│   │   └── package.json
│   │
│   └── api/                          # Node.js TypeScript Backend
│       ├── src/
│       │   ├── index.ts              # Entry point
│       │   ├── app.ts                # Fastify/Express setup
│       │   ├── config/
│       │   │   ├── database.ts       # Prisma client instances
│       │   │   ├── redis.ts          # Redis connection
│       │   │   ├── auth.ts           # JWT config
│       │   │   └── env.ts            # Zod-validated env vars
│       │   │
│       │   ├── modules/              # Feature modules
│       │   │   ├── auth/
│       │   │   │   ├── auth.controller.ts
│       │   │   │   ├── auth.service.ts
│       │   │   │   ├── auth.schema.ts    # Zod schemas
│       │   │   │   └── auth.routes.ts
│       │   │   │
│       │   │   ├── booking/
│       │   │   │   ├── booking.controller.ts
│       │   │   │   ├── booking.service.ts
│       │   │   │   ├── booking.schema.ts
│       │   │   │   ├── booking.routes.ts
│       │   │   │   └── booking.constants.ts  # Status codes
│       │   │   │
│       │   │   ├── payment/
│       │   │   │   ├── payment.controller.ts
│       │   │   │   ├── payment.service.ts
│       │   │   │   ├── payment.schema.ts
│       │   │   │   └── payment.routes.ts
│       │   │   │
│       │   │   ├── series/
│       │   │   ├── period/
│       │   │   ├── agency/
│       │   │   ├── ticket/
│       │   │   ├── incentive/
│       │   │   ├── invoice/
│       │   │   ├── report/
│       │   │   └── setting/
│       │   │
│       │   ├── jobs/                 # Background jobs (BullMQ)
│       │   │   ├── export-booking.job.ts
│       │   │   ├── export-invoice.job.ts
│       │   │   ├── export-costing.job.ts
│       │   │   ├── send-email.job.ts
│       │   │   └── queue.ts          # Queue setup
│       │   │
│       │   ├── services/             # Shared services
│       │   │   ├── pdf.service.ts    # Puppeteer PDF
│       │   │   ├── excel.service.ts  # ExcelJS
│       │   │   ├── email.service.ts  # Nodemailer
│       │   │   ├── storage.service.ts # S3 file upload
│       │   │   └── prefix-number.service.ts
│       │   │
│       │   ├── middleware/
│       │   │   ├── auth.middleware.ts
│       │   │   ├── rbac.middleware.ts
│       │   │   └── error-handler.ts
│       │   │
│       │   └── utils/
│       │       ├── thai-date.ts
│       │       ├── currency.ts
│       │       └── pagination.ts
│       │
│       ├── prisma/
│       │   ├── schema-center.prisma
│       │   ├── schema-incentive.prisma
│       │   ├── schema-ticket.prisma
│       │   ├── schema-report.prisma
│       │   └── schema-costing.prisma
│       │
│       ├── tests/
│       │   ├── booking.test.ts
│       │   ├── payment.test.ts
│       │   └── setup.ts
│       │
│       ├── tsconfig.json
│       ├── Dockerfile
│       └── package.json
│
├── packages/
│   ├── shared-types/                 # Shared TypeScript types
│   │   ├── src/
│   │   │   ├── booking.ts           # Booking types + status enums
│   │   │   ├── payment.ts
│   │   │   ├── series.ts
│   │   │   ├── agency.ts
│   │   │   ├── ticket.ts
│   │   │   └── index.ts
│   │   └── package.json
│   │
│   ├── shared-utils/                 # Shared utilities
│   │   ├── src/
│   │   │   ├── format-currency.ts
│   │   │   ├── format-date.ts
│   │   │   ├── thai-months.ts
│   │   │   └── status-labels.ts
│   │   └── package.json
│   │
│   └── api-client/                   # Type-safe API client
│       ├── src/
│       │   ├── client.ts             # Axios/fetch wrapper
│       │   └── endpoints.ts          # All API endpoints
│       └── package.json
│
├── turbo.json
├── package.json
└── docker-compose.yml

// Prisma: prisma/schema-center.prisma
datasource db {
  provider = "mysql"
  url      = env("DATABASE_CENTER_URL")
}

model Booking {
  book_id                 BigInt             @id @default(autoincrement())
  book_code               String             @unique
  invoice_code            String?
  agen_id                 BigInt?
  user_id                 BigInt?
  per_id                  BigInt?
  bus_id                  BigInt?
  book_total              Decimal?           @db.Decimal(10, 2)
  book_amountgrandtotal   Decimal?           @db.Decimal(18, 2)
  book_pax                Int?               @db.SmallInt
  status                  Int?               @db.SmallInt
  status_cancel           Int?               @db.SmallInt @default(0)
  book_date               DateTime?
  book_cus_name           String?
  book_cus_tel            String?
  is_vat                  Int?               @db.SmallInt
  create_date             DateTime?
  update_date             DateTime?
  remark                  String?            @db.Text
  created_at              DateTime?
  updated_at              DateTime?

  // Relations (same database)
  period                  Period?            @relation(fields: [per_id], references: [per_id])
  bus                     BusList?           @relation(fields: [bus_id], references: [bus_id])
  agency                  Agency?            @relation(fields: [agen_id], references: [agen_id])
  user                    User?              @relation(fields: [user_id], references: [id])
  details                 BookingDetails[]
  additionals             BookingAdditional[]
  payments                Payment[]
  passports               Passport[]
  history                 BookingHistory[]

  @@map("booking")
}

import { Icon } from '@iconify/react';

// Material Design Icons (เหมือนระบบเดิม)
<Icon icon="mdi:home" width={24} />
<Icon icon="mdi:account-circle" width={24} />
<Icon icon="mdi:calendar-month" width={24} />
<Icon icon="mdi:credit-card" width={24} />

// เปลี่ยนสี
<Icon icon="mdi:check-circle" className="text-green-500" width={20} />
<Icon icon="mdi:close-circle" className="text-red-500" width={20} />

// ใช้ร่วมกับ HeroUI Button
import { Button } from '@heroui/react';

<Button startContent={<Icon icon="mdi:plus" width={20} />}>
  สร้าง Booking
</Button>

<Button color="danger" startContent={<Icon icon="mdi:delete" width={20} />}>
  ยกเลิก
</Button>

// components/ui/app-icon.tsx
import { Icon, IconProps } from '@iconify/react';

// กำหนด icon names ที่ใช้บ่อยในระบบ
const iconMap = {
  // Navigation
  home: 'mdi:home',
  dashboard: 'mdi:view-dashboard',
  back: 'mdi:arrow-left',

  // Actions
  add: 'mdi:plus',
  edit: 'mdi:pencil',
  delete: 'mdi:delete',
  save: 'mdi:content-save',
  search: 'mdi:magnify',
  filter: 'mdi:filter',
  sort: 'mdi:sort',
  download: 'mdi:download',
  upload: 'mdi:upload',
  print: 'mdi:printer',
  refresh: 'mdi:refresh',

  // Status
  approved: 'mdi:check-circle',
  pending: 'mdi:clock-outline',
  cancelled: 'mdi:close-circle',
  rejected: 'mdi:alert-circle',
  warning: 'mdi:alert',

  // Business
  booking: 'mdi:book-open-variant',
  payment: 'mdi:cash-multiple',
  invoice: 'mdi:receipt',
  ticket: 'mdi:ticket-outline',
  tour: 'mdi:bag-suitcase',
  flight: 'mdi:airplane',
  hotel: 'mdi:bed',
  passport: 'mdi:passport',
  visa: 'mdi:card-account-details',
  calendar: 'mdi:calendar',
  bus: 'mdi:bus',

  // Users & Agency
  user: 'mdi:account',
  users: 'mdi:account-group',
  agency: 'mdi:domain',
  sales: 'mdi:account-tie',
  settings: 'mdi:cog',

  // Misc
  notification: 'mdi:bell',
  email: 'mdi:email',
  phone: 'mdi:phone',
  document: 'mdi:file-document',
  image: 'mdi:image',
  chart: 'mdi:chart-bar',
  money: 'mdi:currency-thb',
  eye: 'mdi:eye',
  eyeOff: 'mdi:eye-off',
  close: 'mdi:close',
  menu: 'mdi:menu',
  more: 'mdi:dots-vertical',
  link: 'mdi:link',
  copy: 'mdi:content-copy',
  info: 'mdi:information',
} as const;

type AppIconName = keyof typeof iconMap;

interface AppIconProps extends Omit<IconProps, 'icon'> {
  name: AppIconName;
}

export function AppIcon({ name, width = 24, ...props }: AppIconProps) {
  return <Icon icon={iconMap[name]} width={width} {...props} />;
}

import { AppIcon } from '@/components/ui/app-icon';

// ใช้ชื่อที่เข้าใจง่าย แทน icon string
<AppIcon name="booking" />
<AppIcon name="approved" className="text-green-500" />
<AppIcon name="cancelled" className="text-red-500" width={20} />
<AppIcon name="money" className="text-blue-500" />

// ใน Sidebar
<SidebarItem icon={<AppIcon name="dashboard" />} label="Dashboard" href="/dashboard" />
<SidebarItem icon={<AppIcon name="booking" />} label="Booking" href="/booking" />
<SidebarItem icon={<AppIcon name="payment" />} label="Payment" href="/payment" />
<SidebarItem icon={<AppIcon name="ticket" />} label="Ticket" href="/ticket" />

// ใน Status Chip
function StatusChip({ status }: { status: number }) {
  const config: Record<number, { icon: AppIconName; color: string; label: string }> = {
    0:  { icon: 'pending',   color: 'warning', label: 'รอดำเนินการ' },
    1:  { icon: 'approved',  color: 'success', label: 'อนุมัติ' },
    9:  { icon: 'rejected',  color: 'danger',  label: 'ปฏิเสธ' },
    40: { icon: 'cancelled', color: 'default', label: 'ยกเลิก' },
  };

  const { icon, color, label } = config[status] ?? config[0];

  return (
    <Chip color={color} startContent={<AppIcon name={icon} width={16} />}>
      {label}
    </Chip>
  );
}

// ใช้ addCollection เพื่อ bundle icons ใน build
import { addCollection } from '@iconify/react';
import mdiIcons from '@iconify-json/mdi/icons.json';

addCollection(mdiIcons);

// import เฉพาะ icon ที่ต้องการ (tree-shakeable)
import homeIcon from '@iconify-icons/mdi/home';
import accountIcon from '@iconify-icons/mdi/account';

import { Icon } from '@iconify/react/dist/offline';

<Icon icon={homeIcon} />
<Icon icon={accountIcon} />

สร้าง Next.js project:
├── app/
│   ├── (auth)/           # Login, 2FA
│   │   ├── login/
│   │   └── two-factor/
│   ├── (dashboard)/      # Main layout with sidebar
│   │   ├── layout.tsx    # Sidebar + Header
│   │   └── page.tsx      # Home redirect
│   └── api/
│       └── auth/         # Auth.js v5
├── components/
│   ├── ui/               # HeroUI wrappers
│   ├── layout/           # Header, Sidebar
│   └── shared/           # Reusable components
├── lib/
│   ├── api-client.ts     # Axios → Laravel /rest/*
│   ├── auth.ts           # Auth.js config
│   └── utils.ts          # Helpers
├── types/                # TypeScript types
└── middleware.ts          # Auth + RBAC middleware

nextjs-pbc/
├── app/
│   ├── (auth)/
│   │   ├── login/page.tsx
│   │   └── two-factor/page.tsx
│   ├── (dashboard)/
│   │   ├── layout.tsx                    # Sidebar + Header + Auth guard
│   │   ├── page.tsx                      # Home / redirect to dashboard
│   │   ├── dashboard/page.tsx
│   │   ├── sales-dashboard/page.tsx
│   │   ├── admin-dashboard/page.tsx
│   │   ├── booking/
│   │   │   ├── page.tsx                  # Booking list
│   │   │   ├── all/page.tsx              # All bookings
│   │   │   ├── create/[busId]/page.tsx   # Create booking
│   │   │   └── [id]/
│   │   │       ├── page.tsx              # Booking detail
│   │   │       ├── overview/page.tsx
│   │   │       ├── payment/page.tsx
│   │   │       ├── passport/page.tsx
│   │   │       └── traveler/page.tsx
│   │   ├── my-booking/page.tsx
│   │   ├── order/[id]/page.tsx
│   │   ├── series-tour/page.tsx
│   │   ├── tours/
│   │   │   ├── create/page.tsx
│   │   │   └── [id]/
│   │   │       ├── edit/page.tsx
│   │   │       └── period/
│   │   │           ├── create/page.tsx
│   │   │           └── [periodId]/edit/page.tsx
│   │   ├── period/
│   │   │   ├── page.tsx
│   │   │   ├── rush-to-sell/page.tsx
│   │   │   └── [periodId]/bus/[busId]/page.tsx
│   │   ├── payment/
│   │   │   ├── page.tsx
│   │   │   ├── create/page.tsx
│   │   │   └── [id]/edit/page.tsx
│   │   ├── payment-due/page.tsx
│   │   ├── invoice/
│   │   │   ├── page.tsx
│   │   │   ├── list/page.tsx
│   │   │   ├── [id]/page.tsx
│   │   │   └── request/page.tsx
│   │   ├── invoice-tax/page.tsx
│   │   ├── invoices/
│   │   │   ├── page.tsx
│   │   │   └── request/page.tsx
│   │   ├── receipt/page.tsx
│   │   ├── ticket/
│   │   │   ├── series/page.tsx
│   │   │   ├── pre-sale/page.tsx
│   │   │   ├── manage/page.tsx
│   │   │   └── series/[id]/period/[periodId]/edit/page.tsx
│   │   ├── incentive/
│   │   │   ├── page.tsx
│   │   │   ├── create/page.tsx
│   │   │   └── [id]/
│   │   │       ├── edit/page.tsx
│   │   │       ├── program/page.tsx
│   │   │       ├── payment/page.tsx
│   │   │       └── traveler/page.tsx
│   │   ├── reports/
│   │   │   ├── invoice/page.tsx
│   │   │   ├── payment/page.tsx
│   │   │   ├── period/page.tsx
│   │   │   ├── costing/page.tsx
│   │   │   ├── income/page.tsx
│   │   │   ├── estimates/page.tsx
│   │   │   ├── commission/page.tsx
│   │   │   ├── agency/page.tsx
│   │   │   └── invoice-full-payment/page.tsx
│   │   ├── agency/
│   │   │   ├── sales/
│   │   │   │   ├── page.tsx
│   │   │   │   ├── create/page.tsx
│   │   │   │   └── [id]/edit/page.tsx
│   │   │   └── company/
│   │   │       ├── page.tsx
│   │   │       ├── create/page.tsx
│   │   │       └── [id]/edit/page.tsx
│   │   ├── settings/
│   │   │   ├── airline/page.tsx
│   │   │   ├── route/page.tsx
│   │   │   ├── country/page.tsx
│   │   │   ├── city/page.tsx
│   │   │   ├── bank/page.tsx
│   │   │   ├── banner/page.tsx
│   │   │   ├── flashsale-banner/page.tsx
│   │   │   ├── land-operation/page.tsx
│   │   │   └── promotion/page.tsx
│   │   ├── event/
│   │   │   ├── page.tsx
│   │   │   └── email/page.tsx
│   │   └── account/page.tsx
│   ├── api/
│   │   ├── auth/[...nextauth]/route.ts   # Auth.js v5 route handler
│   │   └── ... (Phase 8: migrate from Laravel)
│   ├── forbidden.tsx                      # 403 page (Next.js 16)
│   ├── unauthorized.tsx                   # 401 page (Next.js 16)
│   └── layout.tsx
├── auth.ts                        # Auth.js v5 config (root level)
├── components/
│   ├── ui/                        # HeroUI v2 wrapper components
│   │   └── app-icon.tsx           # Iconify wrapper
│   ├── layout/
│   │   ├── header.tsx
│   │   ├── sidebar.tsx
│   │   └── breadcrumb.tsx
│   ├── booking/                   # Booking-specific components
│   ├── payment/                   # Payment-specific components
│   ├── tour/                      # Tour-specific components
│   └── shared/
│       ├── data-table.tsx         # Reusable table with pagination
│       ├── status-chip.tsx        # Status badge with Iconify
│       ├── date-range-picker.tsx
│       ├── confirm-modal.tsx
│       └── file-upload.tsx
├── hooks/
│   ├── use-bookings.ts            # TanStack Query v5 hooks
│   ├── use-payments.ts
│   ├── use-series.ts
│   └── use-auth.ts
├── lib/
│   ├── api-client.ts              # fetch wrapper → Laravel /rest/*
│   ├── data.ts                    # 'use cache' data fetching functions
│   ├── utils.ts                   # Helpers
│   └── constants.ts               # Status codes, Thai months
├── stores/
│   ├── ui-store.ts                # Zustand: sidebar, modals
│   └── checkout-store.ts          # Zustand: booking form
├── types/
│   ├── booking.ts
│   ├── payment.ts
│   ├── series.ts
│   ├── period.ts
│   ├── agency.ts
│   ├── ticket.ts
│   ├── incentive.ts
│   ├── user.ts
│   └── next-auth.d.ts            # Auth.js v5 type extensions
├── messages/
│   ├── th.json                    # Thai translations (next-intl v4)
│   └── en.json                    # English translations
├── prisma/                        # Phase 8
│   ├── schema-center.prisma
│   ├── schema-incentive.prisma
│   ├── schema-ticket.prisma
│   ├── schema-report.prisma
│   └── schema-costing.prisma
├── middleware.ts                   # Auth.js v5 edge middleware + RBAC
├── next.config.ts                 # Turbopack is default in Next.js 16
├── tsconfig.json
└── package.json

Next.js 16 + React 19 + TypeScript 5.x
├── UI:       HeroUI v2 + Tailwind CSS v4 + Iconify
├── Auth:     Auth.js v5 (next-auth v5) + JWT
├── State:    Zustand + TanStack Query v5
├── i18n:     next-intl v4
├── Build:    Turbopack (built-in)
├── ORM:      Prisma 6 (multi-schema)
├── Cache:    use cache + cacheTag + cacheLife
└── Backend:  Node.js TypeScript (Fastify) หรือ Laravel API (transition)