Cookbook ทำ Design Pattern ให้โปรเจค Next.js

/app
  /api
    /users
      route.ts          # รวม GET/POST/PUT/DELETE + logic + utility
    /orders
      route.ts          # รวม API + processing logic + helper functions
    /payments
      route.ts
    /reports
      route.ts
    /everything-else
      route.ts
  /login
    page.tsx            # หน้า login + API call + validation + helper functions
  /dashboard
    page.tsx            # หน้า dashboard + business logic + API call + utility
  /users
    page.tsx            # หน้า users + API call + processing logic + components
  /orders
    page.tsx            # หน้า orders + API call + calculations + inline components
  /random-component
    page.tsx            # component เล็กๆ + utility functions
/lib
  utils.ts               # รวมทุก helper function เล็กใหญ่
  api-calls.ts           # ฟังก์ชันเรียก API ทุกตัว (แต่บางหน้าเรียก API แบบ inline ด้วย)
  business-logic.ts      # logic ทุกตัว แต่หลายครั้งถูก override ใน page.tsx

โปรเจกต์-ของ-เรา/
├── src/
│   ├── app/                          # 🏠 หน้าบ้าน (UI + Routing)
│   │   ├── students/
│   │   │   ├── page.tsx             # หน้าแสดงรายชื่อนักเรียน
│   │   │   ├── [id]/
│   │   │   │   └── page.tsx         # หน้าดูรายละเอียดนักเรียน
│   │   │   └── components/
│   │   │       ├── student-table.tsx
│   │   │       └── student-form.tsx
│   │   └── layout.tsx
│   │
│   ├── features/                     # 🧠 สมอง (Business Logic)
│   │   └── student/
│   │       ├── student.actions.ts   # รับคำสั่งจากหน้าเว็บ
│   │       ├── student.service.ts   # ความคิด/กฎเกณฑ์
│   │       ├── student.dal.ts       # คุยกับฐานข้อมูล
│   │       ├── student.types.ts     # กำหนดรูปแบบข้อมูล
│   │       └── student.test.ts      # ทดสอบการทำงาน
│   │
│   ├── components/                  # 🧩 ของเล่น (Global Reusable UI)
│   │   ├── ui/
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   └── modal.tsx
│   │   ├── editors/
│   │   │   ├── markdown-editor.tsx
│   │   │   └── rich-text-editor.tsx
│   │   └── data-display/
│   │       ├── data-table.tsx
│   │       └── chart.tsx
│   │
│   └── lib/                         # 🔧 เครื่องมือ (Utilities)
│       ├── db.ts                    # ติดต่อฐานข้อมูล
│       ├── errors.ts                # จัดการข้อผิดพลาด
│       └── utils.ts                 # เครื่องมือทั่วไป
│
├── package.json
└── next.config.js

Component ใหม่ → ใช้แค่หน้าเดียว? 
├── YES → app/[route]/components/ (เช่น StudentTable)
└── NO → มี business logic เฉพาะ domain?
    ├── YES → features/[domain]/components/ (เช่น StudentCard)
    └── NO → components/ (เช่น Button, MarkdownEditor)

// app/students/components/student-table.tsx
// ใช้เฉพาะในหน้า students เท่านั้น
export function StudentTable() {
  // logic เฉพาะหน้า students แบบ แค่หน้านี้จริงๆ ไม่ได้ไปหน้าอื่นๆเลย
}

components/
├── ui/                    # primitive components
│   ├── button.tsx
│   ├── input.tsx
│   ├── dialog.tsx
│   └── card.tsx
├── editors/               # complex components  
│   ├── markdown-editor.tsx
│   └── rich-text-editor.tsx
├── data-display/
│   ├── data-table.tsx
│   └── chart.tsx
└── forms/
    ├── form-builder.tsx
    └── file-uploader.tsx

// components/ui/button.tsx - primitive
export function Button() { /* basic button */ }

// components/editors/markdown-editor.tsx - complex but reusable  
export function MarkdownEditor() { /* full-featured editor */ }

// features/student/components/student-card.tsx  
// บัตรประจำตัวนักศึกษา ซึ่งจะใช้ใน domain student หลายหน้า
export function StudentCard({ student }) {
  // logic เฉพาะ student domain ซึ่งอาจจะแชร์ไปหน้าอื่นๆในโดเมน student บ้าง เช่น app/student-list app/student-admid อะไรประมาณนี้
}

StudentForm → app/students/components/ (ใช้เฉพาะหน้า students)
Button → components/ui/ (ใช้ทุกที่ในแอป)  
StudentCard → features/student/components/ (ใช้ใน student domain)

// src/features/student/student.types.ts
export interface Student {
  id: number;
  name: string;
  age: number;
  email: string;
  createdAt: Date;
}

export interface CreateStudentInput {
  name: string;
  age: number;  
  email: string;
}

// src/app/students/page.tsx  
import { getStudents } from "@/features/student/student.service";
import { StudentTable } from "./components/student-table";

// หน้าแสดงรายชื่อนักเรียน - ทำงานฝั่ง server
export default async function StudentsPage() {
  const students = await getStudents();
  
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">รายชื่อนักเรียน</h1>
      <StudentTable students={students} />
    </div>
  );
}

// ใน server component หรือ API route
const user = await prisma.user.findFirst({
  where: { email },
  include: { profile: true }
});

// ในที่อื่น
const users = await prisma.user.findMany({
  orderBy: { name: 'asc' }
});

// อีกที่หนึ่ง
const updateUser = await prisma.user.update({
  where: { id },
  data: { name, email }
});

// src/features/student/student.dal.ts
import { db } from "@/lib/prisma";
import type { CreateStudentInput, Student } from "./student.types";

export const studentDAL = {
  // ค้นหานักเรียนตาม id
  async findById(id: number): Promise<Student | null> {
    return db.student.findUnique({ 
      where: { id } 
    });
  },

  // ดูนักเรียนทั้งหมด
  async findAll(): Promise<Student[]> {
    return db.student.findMany({
      orderBy: { name: 'asc' }
    });
  },

  // สร้างนักเรียนใหม่
  async create(data: CreateStudentInput): Promise<Student> {
    return db.student.create({ 
      data 
    });
  },

  // อัปเดตข้อมูลนักเรียน
  async update(id: number, data: Partial<CreateStudentInput>): Promise<Student> {
    return db.student.update({
      where: { id },
      data
    });
  },

  // ลบนักเรียน
  async delete(id: number): Promise<void> {
    await db.student.delete({ 
      where: { id } 
    });
  },

  // ค้นหาตามอีเมล (สำหรับการตรวจสอบ)
  async findByEmail(email: string): Promise<Student | null> {
    return db.student.findUnique({
      where: { email }
    });
  }
};

// src/features/student/student.dal.ts (ต่อจากด้านบน)
export const studentDAL = {
  // ... methods อื่นๆ

  // ค้นหานักเรียนที่มีอายุในช่วงที่กำหนด
  async findByAgeRange(minAge: number, maxAge: number): Promise<Student[]> {
    return db.student.findMany({
      where: {
        age: {
          gte: minAge,
          lte: maxAge
        }
      }
    });
  },

  // นับจำนวนนักเรียนทั้งหมด
  async countAll(): Promise<number> {
    return db.student.count();
  },

  // เช็คว่ามีอีเมลนี้ในระบบแล้วมั้ย
  async emailExists(email: string, excludeId?: number): Promise<boolean> {
    const count = await db.student.count({
      where: {
        email,
        ...(excludeId && { id: { not: excludeId } })
      }
    });
    return count > 0;
  }
};

// เปลี่ยนจาก Prisma เป็น Drizzle
import { db } from "@/lib/drizzle"; // ตอนนี้เป็น Drizzle แล้ว
import { studentsTable } from "@/lib/schema";
import { eq } from "drizzle-orm";

export const studentDAL = {
  async findById(id: number): Promise<Student | null> {
    const results = await db
      .select()
      .from(studentsTable)
      .where(eq(studentsTable.id, id))
      .limit(1);
    
    return results[0] || null;
  },
  
  // methods อื่นๆ เปลี่ยนไปตาม Drizzle syntax
};

// src/features/student/student.service.ts
import { studentDAL } from "./student.dal";
import { AppError } from "@/lib/errors";
import { notificationService } from "@/features/notification/notification.service";
import type { CreateStudentInput, Student } from "./student.types";

export const studentService = {
  // ดูข้อมูลนักเรียน
  async getStudent(id: number, currentUserId: number): Promise<Student> {
    // 🔐 เช็คสิทธิ์ก่อน
    const canViewStudent = await checkViewPermission(currentUserId, id);
    if (!canViewStudent) {
      throw new AppError("ไม่มีสิทธิ์ดูข้อมูลนักเรียนคนนี้", "FORBIDDEN");
    }

    // 📊 ดึงข้อมูล
    const student = await studentDAL.findById(id);
    if (!student) {
      throw new AppError("ไม่พบนักเรียน", "NOT_FOUND");
    }

    return student;
  },

  // สร้างนักเรียนใหม่
  async createStudent(
    input: CreateStudentInput, 
    currentUserId: number
  ): Promise<Student> {
    // 🔐 เช็คสิทธิ์
    if (!await hasCreatePermission(currentUserId)) {
      throw new AppError("ไม่มีสิทธิ์สร้างนักเรียน", "FORBIDDEN");
    }

    // 📋 ตรวจสอบ Business Rules
    await validateStudentCreation(input);

    // 💾 บันทึกข้อมูル
    const newStudent = await studentDAL.create(input);

    // 📧 ส่งอีเมลต้อนรับ (Orchestration)
    await notificationService.sendWelcomeEmail(
      newStudent.email,
      newStudent.name
    );

    // 📝 Log การทำงาน
    console.log(`Student created: ${newStudent.id} by user: ${currentUserId}`);

    return newStudent;
  },

  // อัปเดตข้อมูลนักเรียน
  async updateStudent(
    id: number, 
    input: Partial<CreateStudentInput>,
    currentUserId: number
  ): Promise<Student> {
    // เช็คว่ามีนักเรียนคนนี้มั้ย
    const existingStudent = await studentDAL.findById(id);
    if (!existingStudent) {
      throw new AppError("ไม่พบนักเรียน", "NOT_FOUND");
    }

    // เช็คสิทธิ์
    if (!await canEditStudent(currentUserId, id)) {
      throw new AppError("ไม่มีสิทธิ์แก้ไขข้อมูล", "FORBIDDEN");
    }

    // ถ้ามีการเปลี่ยนอีเมล ต้องเช็คว่าซ้ำมั้ย
    if (input.email && input.email !== existingStudent.email) {
      const emailExists = await studentDAL.emailExists(input.email, id);
      if (emailExists) {
        throw new AppError("อีเมลนี้ถูกใช้แล้ว", "DUPLICATE_EMAIL");
      }
    }

    // อัปเดต
    const updatedStudent = await studentDAL.update(id, input);

    return updatedStudent;
  }
};

// 🔧 Helper functions
async function validateStudentCreation(input: CreateStudentInput) {
  // ตรวจสอบอายุ
  if (input.age < 15) {
    throw new AppError("อายุต้องมากกว่า 15 ปี", "INVALID_AGE");
  }

  if (input.age > 100) {
    throw new AppError("อายุไม่ควรเกิน 100 ปี", "INVALID_AGE");
  }

  // เช็คว่าอีเมลซ้ำมั้ย
  const emailExists = await studentDAL.emailExists(input.email);
  if (emailExists) {
    throw new AppError("อีเมลนี้ถูกใช้แล้ว", "DUPLICATE_EMAIL");
  }

  // เช็คชื่อไม่ให้เป็นคำไม่สุภาพ
  const badWords = ['admin', 'test', 'null'];
  if (badWords.some(word => input.name.toLowerCase().includes(word))) {
    throw new AppError("ชื่อไม่เหมาะสม", "INAPPROPRIATE_NAME");
  }
}

async function checkViewPermission(userId: number, studentId: number): Promise<boolean> {
  // ในระบบจริง อาจเช็คจาก database
  // เช่น teacher สามารถดูได้เฉพาะนักเรียนในห้องของตัเอง
  return true; // simplified for example
}

async function hasCreatePermission(userId: number): Promise<boolean> {
  // เช็คว่า user นี้เป็น admin หรือ teacher
  return true; // simplified
}

async function canEditStudent(userId: number, studentId: number): Promise<boolean> {
  // เช็คสิทธิ์การแก้ไข
  return true; // simplified
}

// src/features/student/student.service.ts (ต่อ)
export const studentService = {
  // ... methods อื่นๆ

  // ลงทะเบียนเรียน (ซับซ้อนหน่อย)
  async enrollCourse(
    studentId: number, 
    courseId: number,
    currentUserId: number
  ): Promise<{ success: boolean; message: string }> {
    // 🔍 เช็คข้อมูลพื้นฐาน
    const student = await studentDAL.findById(studentId);
    if (!student) {
      throw new AppError("ไม่พบนักเรียน", "STUDENT_NOT_FOUND");
    }

    const course = await courseDAL.findById(courseId);
    if (!course) {
      throw new AppError("ไม่พบคอร์สเรียน", "COURSE_NOT_FOUND");
    }

    // 📅 เช็คว่าคอร์สยังเปิดรับสมัครอยู่มั้ย
    const now = new Date();
    if (course.registrationDeadline < now) {
      throw new AppError("หมดเวลาลงทะเบียน", "REGISTRATION_CLOSED");
    }

    // 👥 เช็คที่นั่ง
    const currentEnrollments = await enrollmentDAL.countByCourse(courseId);
    if (currentEnrollments >= course.maxStudents) {
      throw new AppError("คอร์สเต็มแล้ว", "COURSE_FULL");
    }

    // 📚 เช็คว่าลงทะเบียนซ้ำมั้ย
    const existingEnrollment = await enrollmentDAL.findByStudentAndCourse(
      studentId, 
      courseId
    );
    if (existingEnrollment) {
      throw new AppError("ลงทะเบียนคอร์สนี้แล้ว", "ALREADY_ENROLLED");
    }

    // 💰 เช็ค prerequisite (ถ้ามี)
    if (course.prerequisiteIds?.length > 0) {
      const completedCourses = await enrollmentDAL.getCompletedCourses(studentId);
      const hasPrerequisites = course.prerequisiteIds.every(reqId =>
        completedCourses.some(completed => completed.courseId === reqId)
      );
      
      if (!hasPrerequisites) {
        throw new AppError("ไม่ผ่านเงื่อนไขพื้นฐาน", "PREREQUISITE_NOT_MET");
      }
    }

    // 🎯 ลงทะเบียนจริง
    const enrollment = await enrollmentDAL.create({
      studentId,
      courseId,
      enrolledAt: new Date(),
      status: 'active'
    });

    // 📧 ส่งอีเมลยืนยัน
    await notificationService.sendEnrollmentConfirmation(
      student.email,
      course.name,
      course.startDate
    );

    // 📊 อัปเดตสถิติ
    await analyticsService.trackEnrollment({
      studentId,
      courseId,
      timestamp: new Date()
    });

    return {
      success: true,
      message: `ลงทะเบียน ${course.name} สำเร็จแล้ว!`
    };
  },

  // ดูรายงานสรุป (สำหรับ admin)
  async getStudentSummary(currentUserId: number) {
    // เช็คว่าเป็น admin
    if (!await isAdmin(currentUserId)) {
      throw new AppError("ไม่มีสิทธิ์ดูรายงาน", "FORBIDDEN");
    }

    const [
      totalStudents,
      activeStudents,
      newThisMonth,
      topCourses
    ] = await Promise.all([
      studentDAL.countAll(),
      studentDAL.countActive(),
      studentDAL.countNewThisMonth(),
      courseDAL.getTopEnrolledCourses(5)
    ]);

    return {
      totalStudents,
      activeStudents,
      newThisMonth,
      topCourses,
      generatedAt: new Date()
    };
  }
};

// src/lib/errors.ts
export class AppError extends Error {
  constructor(
    message: string,
    public code: string = "UNKNOWN_ERROR",
    public statusCode: number = 400
  ) {
    super(message);
    this.name = "AppError";
  }
}

// Error codes ที่ใช้บ่อย
export const ERROR_CODES = {
  VALIDATION: "VALIDATION_ERROR",
  NOT_FOUND: "NOT_FOUND", 
  FORBIDDEN: "FORBIDDEN",
  DUPLICATE: "DUPLICATE_ENTRY",
  BUSINESS_RULE: "BUSINESS_RULE_VIOLATION"
} as const;

// src/features/student/student.service.test.ts
import { studentService } from "./student.service";
import { studentDAL } from "./student.dal";
import { AppError } from "@/lib/errors";

// Mock DAL
jest.mock("./student.dal");
const mockStudentDAL = studentDAL as jest.Mocked<typeof studentDAL>;

describe("Student Service", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe("createStudent", () => {
    it("should create student successfully", async () => {
      // Arrange
      const input = {
        name: "นาย ทดสอบ",
        age: 20,
        email: "test@example.com"
      };
      const expectedStudent = { id: 1, ...input };
      
      mockStudentDAL.emailExists.mockResolvedValue(false);
      mockStudentDAL.create.mockResolvedValue(expectedStudent);

      // Act
      const result = await studentService.createStudent(input, 1);

      // Assert
      expect(result).toEqual(expectedStudent);
      expect(mockStudentDAL.emailExists).toHaveBeenCalledWith(input.email);
      expect(mockStudentDAL.create).toHaveBeenCalledWith(input);
    });

    it("should reject underage student", async () => {
      // Arrange
      const input = {
        name: "เด็กเล็ก",
        age: 10,
        email: "kid@example.com"
      };

      // Act & Assert
      await expect(
        studentService.createStudent(input, 1)
      ).rejects.toThrow(new AppError("อายุต้องมากกว่า 15 ปี", "INVALID_AGE"));
    });

    it("should reject duplicate email", async () => {
      // Arrange
      const input = {
        name: "คนใหม่",
        age: 20,
        email: "duplicate@example.com"
      };

      mockStudentDAL.emailExists.mockResolvedValue(true);

      // Act & Assert
      await expect(
        studentService.createStudent(input, 1)
      ).rejects.toThrow(new AppError("อีเมลนี้ถูกใช้แล้ว", "DUPLICATE_EMAIL"));
    });
  });
});

// src/features/student/student.actions.ts
"use server";

import { z } from "zod";
import { studentService } from "./student.service";
import { revalidatePath } from "next/cache";
import { AppError } from "@/lib/errors";

// 📋 Schema สำหรับ validation
const createStudentSchema = z.object({
  name: z.string()
    .min(1, "กรุณากรอกชื่อ")
    .max(100, "ชื่อยาวเกินไป"),
  age: z.coerce.number()
    .min(15, "อายุต้องมากกว่า 15 ปี")
    .max(100, "อายุไม่ควรเกิน 100 ปี"),
  email: z.string()
    .email("รูปแบบอีเมลไม่ถูกต้อง")
    .toLowerCase()
});

// 📤 Action สำหรับสร้างนักเรียนใหม่
export async function createStudentAction(
  prevState: any,
  formData: FormData
) {
  try {
    // 🔍 Parse และ validate ข้อมูล
    const rawData = {
      name: formData.get("name"),
      age: formData.get("age"), 
      email: formData.get("email")
    };

    const validatedData = createStudentSchema.parse(rawData);

    // 🔐 ดึงข้อมูล user ปัจจุบัน (ในโปรเจกต์จริง)
    // const session = await getServerSession();
    // const currentUserId = session?.user?.id;
    const currentUserId = 1; // สำหรับตัวอย่าง

    // 🎯 เรียก service layer
    const newStudent = await studentService.createStudent(
      validatedData,
      currentUserId
    );

    // 🔄 อัปเดต cache
    revalidatePath("/students");

    // ✅ ส่งผลลัพธ์สำเร็จ
    return {
      success: true,
      message: `สร้างนักเรียน ${newStudent.name} สำเร็จแล้ว!`,
      data: newStudent,
      errors: null
    };

  } catch (error) {
    console.error("Create student error:", error);

    // 🔍 จัดการ validation errors
    if (error instanceof z.ZodError) {
      return {
        success: false,
        message: "ข้อมูลไม่ถูกต้อง",
        data: null,
        errors: error.flatten().fieldErrors
      };
    }

    // 🔍 จัดการ business logic errors
    if (error instanceof AppError) {
      return {
        success: false,
        message: error.message,
        data: null,
        errors: null
      };
    }

    // 🔍 จัดการ unknown errors
    return {
      success: false,
      message: "เกิดข้อผิดพลาดไม่ทราบสาเหตุ",
      data: null,
      errors: null
    };
  }
}

// 📝 Action สำหรับอัปเดต
export async function updateStudentAction(
  id: number,
  prevState: any,
  formData: FormData
) {
  try {
    const rawData = {
      name: formData.get("name"),
      age: formData.get("age"),
      email: formData.get("email")
    };

    // ใช้ partial schema สำหรับการอัปเดต
    const updateSchema = createStudentSchema.partial();
    const validatedData = updateSchema.parse(rawData);

    // อัปเดตข้อมูล
    const currentUserId = 1;
    const updatedStudent = await studentService.updateStudent(
      id,
      validatedData,
      currentUserId
    );

    revalidatePath("/students");
    revalidatePath(`/students/${id}`);

    return {
      success: true,
      message: "อัปเดตข้อมูลสำเร็จ",
      data: updatedStudent,
      errors: null
    };

  } catch (error) {
    // Error handling เหมือนเดิม...
    return handleActionError(error);
  }
}

// 🗑️ Action สำหรับลบ
export async function deleteStudentAction(id: number) {
  try {
    const currentUserId = 1;
    
    await studentService.deleteStudent(id, currentUserId);

    revalidatePath("/students");

    return {
      success: true,
      message: "ลบนักเรียนสำเร็จ"
    };

  } catch (error) {
    return handleActionError(error);
  }
}

// 🔧 Helper function สำหรับจัดการ error
function handleActionError(error: unknown) {
  console.error("Action error:", error);

  if (error instanceof z.ZodError) {
    return {
      success: false,
      message: "ข้อมูลไม่ถูกต้อง",
      errors: error.flatten().fieldErrors
    };
  }

  if (error instanceof AppError) {
    return {
      success: false,
      message: error.message,
      errors: null
    };
  }

  return {
    success: false,
    message: "เกิดข้อผิดพลาดไม่ทราบสาเหตุ",
    errors: null
  };
}

// src/app/students/components/student-form.tsx
"use client";

import { useFormState } from "react-dom";
import { createStudentAction } from "@/features/student/student.actions";

const initialState = {
  success: false,
  message: "",
  data: null,
  errors: null
};

export function StudentForm() {
  const [state, formAction] = useFormState(createStudentAction, initialState);

  return (
    <form action={formAction} className="space-y-4">
      <div>
        <label htmlFor="name">ชื่อ-นามสกุล</label>
        <input
          type="text"
          name="name"
          id="name"
          required
          className="w-full p-2 border rounded"
        />
        {state.errors?.name && (
          <p className="text-red-500 text-sm">{state.errors.name[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="age">อายุ</label>
        <input
          type="number"
          name="age"
          id="age"
          required
          className="w-full p-2 border rounded"
        />
        {state.errors?.age && (
          <p className="text-red-500 text-sm">{state.errors.age[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="email">อีเมล</label>
        <input
          type="email"
          name="email"
          id="email"
          required
          className="w-full p-2 border rounded"
        />
        {state.errors?.email && (
          <p className="text-red-500 text-sm">{state.errors.email[0]}</p>
        )}
      </div>

      <button
        type="submit"
        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
      >
        บันทึก
      </button>

      {/* แสดงผลลัพธ์ */}
      {state.message && (
        <div className={`p-3 rounded ${
          state.success 
            ? "bg-green-100 text-green-700" 
            : "bg-red-100 text-red-700"
        }`}>
          {state.message}
        </div>
      )}
    </form>
  );
}

// src/features/student/student.actions.ts (ต่อ)
export async function uploadStudentPhotoAction(
  studentId: number,
  prevState: any,
  formData: FormData
) {
  try {
    const file = formData.get("photo") as File;
    
    if (!file || file.size === 0) {
      return {
        success: false,
        message: "กรุณาเลือกไฟล์รูปภาพ"
      };
    }

    // เช็คขนาดไฟล์ (5MB)
    if (file.size > 5 * 1024 * 1024) {
      return {
        success: false,
        message: "ไฟล์รูปภาพใหญ่เกินไป (สูงสุด 5MB)"
      };
    }

    // เช็คประเภทไฟล์
    if (!file.type.startsWith("image/")) {
      return {
        success: false,
        message: "กรุณาเลือกไฟล์รูปภาพเท่านั้น"
      };
    }

    // อัปโลดไฟล์ (สามารถใช้ Cloudinary, AWS S3, etc.)
    const photoUrl = await uploadFile(file);

    // อัปเดตข้อมูลในฐานข้อมูล
    await studentService.updatePhoto(studentId, photoUrl, 1);

    revalidatePath(`/students/${studentId}`);

    return {
      success: true,
      message: "อัปโลดรูปภาพสำเร็จ",
      data: { photoUrl }
    };

  } catch (error) {
    return handleActionError(error);
  }
}

export async function bulkUpdateStudentsAction(
  studentIds: number[],
  updates: Partial<CreateStudentInput>
) {
  try {
    if (studentIds.length === 0) {
      return {
        success: false,
        message: "กรุณาเลือกนักเรียนอย่างน้อย 1 คน"
      };
    }

    const results = await studentService.bulkUpdate(
      studentIds,
      updates,
      1 // currentUserId
    );

    revalidatePath("/students");

    return {
      success: true,
      message: `อัปเดตข้อมูลนักเรียน ${results.updated} คน สำเร็จ`,
      data: results
    };

  } catch (error) {
    return handleActionError(error);
  }
}

// src/app/students/components/student-form-with-loading.tsx
"use client";

import { useFormState, useFormStatus } from "react-dom";
import { createStudentAction } from "@/features/student/student.actions";

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50"
    >
      {pending ? "กำลังบันทึก..." : "บันทึก"}
    </button>
  );
}

export function StudentFormWithLoading() {
  const [state, formAction] = useFormState(createStudentAction, {
    success: false,
    message: "",
    errors: null
  });

  return (
    <form action={formAction} className="space-y-4">
      {/* form fields... */}
      <SubmitButton />
      {/* error/success messages... */}
    </form>
  );
}

// src/app/students/page.tsx (🏔️ Server Component)
import { Suspense } from "react";
import { studentService } from "@/features/student/student.service";
import { StudentTable } from "./components/student-table";
import { StudentForm } from "./components/student-form";
import { StudentCount } from "./components/student-count";

// นี่คือ "โต๊ะอาหาร" หลักของเรา
export default async function StudentsPage() {
  // การเรียกข้อมูลเกิดขึ้นที่ Server ทั้งหมด!
  const students = await studentService.getAllStudents();

  return (
    <div className="container p-6">
      <h1 className="text-3xl font-bold mb-4">ระบบจัดการนักเรียน</h1>
      
      <div className="grid md:grid-cols-3 gap-6">
        <div className="md:col-span-2">
          <h2 className="text-xl font-semibold mb-2">รายชื่อนักเรียน</h2>
          {/* ส่วนนี้เป็น "หมูกระทะ" ที่ต้องให้ลูกค้าปิ้งเอง */}
          <StudentTable students={students} />
        </div>
        
        <div>
          <h2 className="text-xl font-semibold mb-2">เพิ่มนักเรียนใหม่</h2>
          {/* ฟอร์มก็เป็น "หมูกระทะ" เช่นกัน */}
          <StudentForm />
          
          <div className="mt-6">
            <h2 className="text-xl font-semibold mb-2">ข้อมูลสรุป</h2>
            {/* ส่วนนี้ซับซ้อน อาจจะโหลดช้า เราเลยใช้ Suspense ห่อไว้ */}
            <Suspense fallback={<p>กำลังโหลดข้อมูลสรุป...</p>}>
              <StudentStats />
            </Suspense>
          </div>
        </div>
      </div>
    </div>
  );
}

// อีกหนึ่ง Server Component ที่ดึงข้อมูลของตัวเอง
async function StudentStats() {
  const total = await studentService.countAllStudents();
  // สมมติว่ารอ 2 วินาทีเพื่อให้เห็นผลของ Suspense
  await new Promise(resolve => setTimeout(resolve, 2000)); 
  return <p>มีนักเรียนในระบบทั้งหมด: {total} คน</p>;
}

// src/app/students/components/student-table.tsx (🍳 Client Component)
"use client";

import { useState, useMemo } from "react";
import type { Student } from "@/features/student/student.types";

export function StudentTable({ students: initialStudents }: { students: Student[] }) {
  const [searchTerm, setSearchTerm] = useState("");

  const filteredStudents = useMemo(() => {
    if (!searchTerm) return initialStudents;
    return initialStudents.filter(s =>
      s.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [searchTerm, initialStudents]);

  return (
    <div>
      <input
        type="text"
        placeholder="ค้นหาชื่อ..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        className="w-full p-2 border rounded mb-4"
      />
      {/* ... โค้ดแสดงตาราง ... */}
      <table>
        {/* ... */}
        <tbody>
          {filteredStudents.map(student => (
            <tr key={student.id}>
              <td>{student.name}</td>
              <td>{student.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// src/app/students/[id]/page.tsx (หน้าดูรายละเอียดนักเรียน)
import { notFound } from "next/navigation";
import { studentService } from "@/features/student/student.service";

export default async function StudentDetailPage({ params }: { params: { id: string } }) {
  try {
    const student = await studentService.getStudent(Number(params.id), 1); // สมมติ actorId=1
    // ... แสดงข้อมูลนักเรียน
  } catch (error) {
    if (error instanceof AppError && error.code === 'NOT_FOUND') {
      notFound(); // << บอก Next.js ให้ไปแสดงหน้า not-found.tsx
    }
    // ถ้าเป็น error อื่นที่ไม่คาดคิด ให้มันโยนออกไปเพื่อให้ error.tsx ทำงาน
    throw error; 
  }
}

// src/app/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <div className="text-center">
      <h2 className="text-2xl font-bold">ไม่พบข้อมูล</h2>
      <p>ขออภัย เราไม่พบหน้าที่คุณต้องการค้นหา</p>
      <Link href="/" className="text-blue-500">กลับสู่หน้าหลัก</Link>
    </div>
  );
}

// src/app/error.tsx
"use client"; // Error components ต้องเป็น Client Components

export default function Error({ error, reset }: { error: Error; reset: () => void; }) {
  useEffect(() => {
    // อาจจะส่ง error ไปที่ระบบ monitoring เช่น Sentry
    console.error(error);
  }, [error]);

  return (
    <div className="text-center">
      <h2 className="text-2xl font-bold">โอ๊ะ! เกิดข้อผิดพลาดบางอย่าง</h2>
      <button onClick={() => reset()} className="bg-blue-500 text-white p-2 rounded mt-4">
        ลองอีกครั้ง
      </button>
    </div>
  );
}