# BAGIAN 2: INTEGRASI FE-BE
## (Frontend-Backend Integration Flow)

---

## 2.1 API Integration Map — 5 Fitur Utama

Diagram ini menunjukkan mapping lengkap antara Frontend modules, API endpoints, dan Backend services untuk setiap fitur utama.

![](./images/2.1.png)

---

## 2.2 Real-Time Integration Flow

Alur komunikasi real-time dari webhook masuk hingga update UI di browser agent.

![](./images/2.2.png)

---

## 2.3 Real-Time Event Types

Tabel event real-time yang digunakan dalam sistem.

![](./images/2.3.png)

---

## 2.4 Authentication Integration Flow

Alur integrasi autentikasi antara FE dan BE.

![](./images/2.4.png)

---

## 2.5 File Upload Integration Flow

![](./images/2.5.png)

---

## 2.6 Middleware Stack (Request Lifecycle)

Diagram ini menunjukkan urutan middleware yang dilalui setiap request dari FE ke BE.

![](./images/2.6.png)
