# Prompt.md — Permission Matrix UX Improvement & Permission Catalog Description

## Objective

ปรับปรุงหน้า **Permission Matrix** ให้ผู้ใช้งานสามารถเข้าใจ Permission แต่ละรายการได้ง่ายขึ้น โดยเพิ่มคำอธิบายภาษาไทย (Description) ให้กับทุก Permission

รอบนี้เป็นการปรับปรุงเฉพาะ **UI/UX และ Permission Catalog**

**ห้ามเปลี่ยน Business Logic**

**ห้ามเปลี่ยน Permission Code**

**ห้ามเปลี่ยน Authorization**

**ห้ามเปลี่ยน Database Schema**

---

# Required Reading

ก่อนเริ่ม Coding ให้อ่าน

- docs/PROJECT_ARCHITECTURE.md
- docs/AI_DEVELOPMENT_GUIDE.md
- AGENTS.md

และตรวจสอบ implementation ของ

```
src/features/permission-management
```

รวมถึง Permission Catalog ที่ใช้งานอยู่

ห้ามสร้าง Catalog ใหม่

ห้ามสร้างข้อมูลซ้ำ

---

# Objective Detail

Permission Matrix ต้องสามารถอธิบายว่า

Permission แต่ละรายการ

"ใช้ทำอะไร"

โดยใช้ข้อความภาษาไทยสั้น ๆ

เพื่อให้

- Super Admin
- HRD Manager
- System Administrator
- IT Administrator

สามารถเข้าใจได้ทันที

---

# Current UI

ปัจจุบัน

```
Manage

organization:manage
```

ซึ่งผู้ใช้งานทั่วไปไม่ทราบว่า

Manage

คืออะไร

---

# Expected UI

ปรับเป็น

```
Manage

จัดการข้อมูลองค์กร เช่น สร้าง แก้ไข ตั้งค่า เปิดหรือปิดการใช้งานองค์กร

organization:manage

[Action]
```

---

# UI Layout

ภายในการ์ดแต่ละ Permission

ให้เรียงลำดับดังนี้

1.

Permission Name

เช่น

```
Manage
```

2.

Description

เช่น

```
จัดการข้อมูลองค์กร เช่น สร้าง แก้ไข ตั้งค่า เปิดหรือปิดการใช้งานองค์กร
```

3.

Permission Code

```
organization:manage
```

4.

Action Badge

```
Action
```

---

# Typography

## Permission Name

- font-semibold
- text-base หรือ text-lg

---

## Description

- text-sm
- text-muted-foreground
- รองรับหลายบรรทัด
- line-clamp ได้หากจำเป็น

---

## Permission Code

- font-mono
- text-xs
- text-muted-foreground

---

## Badge

ใช้ Component เดิมของระบบ

---

# Permission Catalog Enhancement

ปรับปรุง Permission Catalog

ทุก Permission ต้องมีข้อมูลดังนี้

```ts
export interface PermissionDefinition {
  module: string;
  action: string;

  code: string;

  name: string;

  description: string;

  descriptionEn?: string;
}
```

โดย

description

เป็นคำอธิบายภาษาไทย

descriptionEn

สงวนไว้สำหรับอนาคต

---

# Data Structure

ตัวอย่าง

```ts
{
  module: "Organizations",

  action: "Manage",

  code: "organization:manage",

  name: "Manage",

  description:
    "จัดการข้อมูลองค์กร เช่น สร้าง แก้ไข ตั้งค่า เปิดหรือปิดการใช้งานองค์กร"
}
```

อีกตัวอย่าง

```ts
{
  module: "Announcements",

  action: "Publish",

  code: "announcement:publish",

  name: "Publish",

  description:
    "เผยแพร่ประกาศให้ผู้ใช้งานสามารถมองเห็นได้"
}
```

---

# Component Rules

Component

ห้าม Hardcode

ข้อความภาษาไทย

ต้องอ่านจาก

```
permission.description
```

เท่านั้น

เช่น

```tsx
<h3>{permission.name}</h3>

<p>{permission.description}</p>

<code>{permission.code}</code>
```

เพื่อรองรับ

- Multi-language
- Tooltip
- API Documentation
- Permission Detail
- Future UI

---

# Description Guidelines

คำอธิบายต้อง

- เป็นภาษาไทย
- อ่านเข้าใจง่าย
- ไม่ยาวเกินไป
- อธิบายการใช้งานจริง
- ไม่อธิบายชื่อ Permission ซ้ำ

ตัวอย่างที่ดี

```
สามารถสร้างประกาศใหม่ได้
```

ไม่ใช่

```
Permission สำหรับ Create Announcement
```

---

# Permission Description

## Organizations

### Manage

จัดการข้อมูลองค์กร เช่น สร้าง แก้ไข ตั้งค่า เปิดหรือปิดการใช้งานองค์กร

---

### Switch

สลับองค์กรที่กำลังใช้งาน สำหรับผู้ใช้ที่มีสิทธิ์หลายองค์กร

---

## Permission Templates

### Read

ดูรายการ Permission Template ทั้งหมด

---

### Create

สร้าง Permission Template ใหม่

---

### Update

แก้ไข Permission Template

---

### Clone

คัดลอก Permission Template เพื่อสร้างชุดสิทธิ์ใหม่

---

### Delete

ปิดการใช้งานหรือ Soft Delete Permission Template

---

### Assign

กำหนด Permission Template ให้ผู้ใช้งาน

---

## User Permissions

### Read

ดูสิทธิ์ของผู้ใช้งาน

---

### Update

แก้ไขชุดสิทธิ์ของผู้ใช้งาน

---

### Override

เพิ่มหรือลดสิทธิ์เฉพาะบุคคล โดยไม่กระทบ Template หลัก

---

## Dashboard

### View

ดู Dashboard และข้อมูลสรุปของระบบ

---

## Announcements

### View

ดูประกาศ

### Create

สร้างประกาศใหม่

### Update

แก้ไขประกาศ

### Delete

ยกเลิกเผยแพร่

### Approve

อนุมัติประกาศก่อนเผยแพร่

### Publish

เผยแพร่ประกาศให้ผู้ใช้งานเห็น

### Export

ส่งออกข้อมูลประกาศ

---

## Online Lessons

### View

ดูบทเรียนออนไลน์

### Create

สร้างบทเรียนออนไลน์

### Update

แก้ไขบทเรียนออนไลน์

### Delete

ลบบทเรียนออนไลน์

### Approve

อนุมัติบทเรียนออนไลน์

### Publish

เผยแพร่บทเรียนออนไลน์

---

## Training Records

### View

ดูประวัติการอบรม

### Create

สร้างประวัติการอบรม

### Update

แก้ไขประวัติการอบรม

### Delete

ลบประวัติการอบรม

### Approve

อนุมัติประวัติการอบรม

### Export

ส่งออกข้อมูลประวัติการอบรม

---

## Reports

### View

ดูรายงาน

### Export

ส่งออกรายงานเป็น Excel หรือ PDF

---

## Audit Logs

### View

ดูประวัติการใช้งานระบบ

### Export

ส่งออกประวัติการใช้งานระบบ

---

## Settings

### View

ดูหน้าการตั้งค่าระบบ

### Update

แก้ไขการตั้งค่าระบบ

---

## Permission Management

### View

ดูหน้าจัดการ Permission

### Create

สร้าง Permission Template

### Update

แก้ไข Permission Template

### Delete

ลบหรือปิดการใช้งาน Permission Template

### Assign

กำหนด Permission ให้ผู้ใช้งาน

### Override

เพิ่มหรือลดสิทธิ์เฉพาะบุคคล

### Manage

จัดการระบบ Permission ทั้งหมด

---

# Reuse

ห้ามสร้าง

Permission Catalog

ขึ้นใหม่

ให้เพิ่มเฉพาะ

```
description
```

และ

```
descriptionEn
```

เข้าไปใน Catalog เดิม

---

# Future Ready

Component

ต้องรองรับ

```
permission.description

permission.descriptionEn
```

โดยไม่ต้องแก้ไขอีกในอนาคต

---

# Do Not

ห้าม

- เปลี่ยน Permission Code
- เปลี่ยน Module
- เปลี่ยน Action
- เปลี่ยน Permission Group
- เปลี่ยน Authorization
- เปลี่ยน API
- เปลี่ยน Database
- เปลี่ยน Business Logic

รอบนี้เป็น

UX Improvement

เท่านั้น

---

# Deliverables

เมื่อดำเนินการเสร็จ

ให้สร้างรายงาน

```
docs/permission-matrix-ui-improvement-report.md
```

ประกอบด้วย

## 1. Summary

สิ่งที่ปรับปรุง

---

## 2. Files Modified

ไฟล์ที่แก้ไขทั้งหมด

---

## 3. UI Changes

รายละเอียดการเปลี่ยนแปลงของ Permission Matrix

---

## 4. Permission Catalog Changes

สรุปการเพิ่ม

- description
- descriptionEn

---

## 5. Permission Coverage

รายงานจำนวน Permission ทั้งหมด

พร้อมยืนยันว่า

ทุก Permission มี

- module
- action
- code
- name
- description

ครบถ้วน

---

## 6. Compatibility

ยืนยันว่า

- Permission Code ไม่เปลี่ยน
- Business Logic ไม่เปลี่ยน
- Authorization ไม่เปลี่ยน
- API ไม่เปลี่ยน
- Database ไม่เปลี่ยน

---

## 7. Verification

ตรวจสอบ

- TypeScript ผ่าน
- Lint ผ่าน
- Permission Matrix แสดง Description ถูกต้อง
- Permission Code ยังคงเดิม
- ทุก Permission มี Description ครบถ้วน
