บทที่ 13: CRM/Dashboard Blueprint

“ห้องควบคุมที่ดีต้องดูสถานะทุกอย่างได้จากจอเดียว”

The Blueprint (พิมพ์เขียว)

CRM และ Dashboard คือระบบหลังบ้านที่:

• แสดงข้อมูลรวม (Overview)
• จัดการ CRUD
• วิเคราะห์ข้อมูลด้วย Charts
• ควบคุมสิทธิ์ผู้ใช้ (RBAC)

Dashboard = ห้องควบคุมอาคาร — ดูทุกอย่างจากที่เดียว

Material Selection (เลือกสเปกวัสดุ)

📦 Tech Stack สำหรับ Dashboard

Layer	Technology	เหตุผล
Framework	React + TypeScript	Type Safety
UI Library	Ant Design	ครบ Components
Data Fetching	React Query	Cache, Optimistic
Charts	ApexCharts	Responsive
Forms	React Hook Form + Zod	Validation
Auth	NextAuth / Supabase	Session

📊 Data Table with Pagination

import { Table } from 'antd';
import { useQuery } from '@tanstack/react-query';

function UsersTable() {
  const { data, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  const columns = [
    { title: 'ชื่อ', dataIndex: 'name', sorter: true },
    { title: 'อีเมล', dataIndex: 'email' },
    { title: 'สถานะ', dataIndex: 'status' },
  ];

  return <Table columns={columns} dataSource={data} loading={isLoading} />;
}

🔐 RBAC (Role-Based Access Control)

type Role = 'admin' | 'manager' | 'viewer';

const permissions: Record<Role, string[]> = {
  admin: ['read', 'write', 'delete', 'manage_users'],
  manager: ['read', 'write'],
  viewer: ['read'],
};

function hasPermission(user: User, action: string): boolean {
  return permissions[user.role].includes(action);
}

Architect’s Note (บันทึกสถาปนิก)

⚠️ ข้อควรระวัง

1. TypeScript เป็น Must — Dashboard มี Data หลายรูปแบบ
2. Don’t Over-fetch — ใช้ Pagination, Filter
3. Permission Check ทั้ง Frontend และ Backend

💡 Best Practices

1. Optimistic Updates — UI อัปเดตทันที
2. Skeleton Loading — แสดงโครงร่างขณะโหลด
3. Audit Log — บันทึกว่าใครทำอะไรเมื่อไหร่