# 🚀 MONAI MLOps Console Frontend (DDO Console)

Frontend Console สำหรับการจัดการ **AI Model Registry**, **MLOps Pipeline**, และการเรียกใช้งาน **AI Inference Service**  
รองรับงาน **Medical Imaging** โดยเชื่อมต่อกับ Backend หลักที่เป็น **Django DRF** (Lightweight Gateway/Security)  
และระบบ AI inference บน **FastAPI/MONAI**

---

## 💡 สถาปัตยกรรมและเทคโนโลยีหลัก

| องค์ประกอบ | เทคโนโลยี                                      | บทบาท / เหตุผล |
| :--- |:-----------------------------------------------| :--- |
| **Framework** | 🧩 **React (Vite)**                            | ความเร็วสูง, Hot Reload, โครงสร้าง Component-Based |
| **Styling** | 🎨 **Tailwind CSS + DaisyUI**                  | Utility-first CSS พร้อมชุด Component ที่สวยงาม |
| **Server State / Data Fetching** | ⚙️ **TanStack Query (React Query)**            | จัดการ Cache, Loading, Error, และ Data Synchronization |
| **Form Handling** | 🧠 **React Hook Form + Yup**                   | Validation ที่มีประสิทธิภาพ, ลดการ re-render |
| **Security Flow** | 🔐 **JWT + Axios Interceptor + Refresh Token** | ใช้ `axiosClient` จัดการ Token, Refresh Token, และ Force Logout |

---

## 🧱 โครงสร้างโปรเจกต์ (Clean Architecture)

โปรเจกต์นี้ใช้แนวทาง **Clean Architecture + Modularization**  
เพื่อให้ดูแลและขยายระบบได้ง่ายในระยะยาว

| โฟลเดอร์ | หน้าที่ |
| :--- | :--- |
| `src/routes/` | กำหนด Routing เช่น `AuthRoutes`, `PrivateRoutes`, และ `ProtectedRoute` |
| `src/services/` | เก็บ Hooks สำหรับเรียก API (`useModelList`, `useRunInferenceMutation`) และ `axiosClient` |
| `src/schemas/` | เก็บ **Yup Schemas** สำหรับตรวจสอบข้อมูลจากฟอร์ม |
| `src/features/` | เก็บ Redux Slice เช่น `authSlice` สำหรับจัดการ state ระดับ global |
| `src/pages/` | เก็บ Component หลักของแต่ละหน้า เช่น Dashboard, Model Registry |
| `src/components/` | Component ที่ใช้ซ้ำได้ เช่น Modal, Table, Input (RHF Adapter) |

---

## 🧩 Role-Based Access Control (RBAC)

ระบบมีการควบคุมสิทธิ์ทั้งฝั่ง Backend และ Frontend:

- **Backend (Django DRF):**  
  ใช้ Custom Permission Class (`IsAdminOrManager`) เพื่อจำกัดการเข้าถึง API
- **Frontend (React):**  
  ใช้ Role จาก JWT เพื่อกรองเมนูใน `sidebarRoutes.jsx`  
  และควบคุมการเข้าถึงหน้าใน `MainLayout.jsx`

| Role | สิทธิ์ |
| :--- | :--- |
| `admin` | เข้าถึงทุกเมนู และสามารถจัดการผู้ใช้งานได้ |
| `manager` | เข้าถึงหน้า Model Registry และ Pipeline Management |
| `viewer` | อ่านข้อมูลเท่านั้น |

---

## ⚙️ การติดตั้งและเริ่มต้นใช้งาน

### 🔧 Prerequisites

- Node.js `v18+`
- npm หรือ yarn

---

### 🧰 1. ติดตั้ง Dependencies

```bash
npm install
```

### ⚙️ 2. ตั้งค่า Environment Variables

สร้างไฟล์ .env.local ใน Root Directory
และกำหนด Base URL ของ Django DRF API Gateway:

.env.local

VITE_API_BASE_URL=http://localhost:8000

หรือ URL จริงของ API Gateway

### 🧠 3. รัน Development Server
```bash
npm run dev
```

🌐 แอปจะรันที่ http://localhost:5173

และจะ Redirect ไปที่หน้า Login ทันที เพื่อบังคับยืนยันตัวตนก่อนเข้า Console

## 🧩 Best Practices & Design Principles

ใช้ Atomic Design Pattern สำหรับการออกแบบ Component

ใช้ TanStack Query DevTools เพื่อ Debug API Cache ได้ง่าย

รองรับการเพิ่ม Theme (ผ่าน DaisyUI Theme Config)

แยก Business Logic ออกจาก UI เพื่อให้ทดสอบได้ง่าย

## 📘 License

Distributed under the MIT License.
See LICENSE for more information.

## 👨‍💻 Authors

FlookSP — DDD Project

“Building Trustworthy AI Infrastructure for Medical Data Operations.”