# BAGIAN 3: FLOWCHART FRONTEND (FE)
## Detailed Frontend Application Flowcharts

---

## 3.1 FE General Routing Architecture

Diagram lengkap struktur routing Frontend dari root hingga setiap halaman.

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

---

## 3.2 FE Auth Flow (Detailed)

Alur autentikasi lengkap dari halaman login hingga masuk dashboard.

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

---

## 3.3 FE Chat Module Flow (Detailed)

Modul Chat adalah modul terbesar (82 files). Diagram ini menunjukkan alur lengkap.

> **Catatan Penting (Kondisi Aktual):**
> - **Conversations**: Di-fetch **Full GET**. BE route menerima parameter `page`/`limit` dan memanggil `calculatePagination()`, namun repository **tidak menggunakan** `.limit()`/`.offset()` di query DB. Semua conversations di-return sekaligus.
> - **Messages**: Di-fetch **Full GET**. Parameter `page`/`limit` di route, service, dan repository BE **sudah di-comment out**. Response mengembalikan `page:0, limit:0, totalPages:0` (dummy). Semua messages dalam conversation chain di-return sekaligus.
> - **Infinite Scroll**: Hook `use-message-list-infinite-scroll.ts` dan `use-message-list-scroll-persistence.ts` masih di-import di `chat-message-list.tsx`, tapi **tidak pernah ter-trigger** karena `hasMore` selalu `false` (karena response pagination dummy). Hook `use-infinite-scroll.ts` dan `use-messages-scroll.ts` adalah **dead code** (tidak di-import di mana pun).
> - **Auto-Scroll**: Hook `use-message-list-initial-load.ts` tetap aktif untuk auto-scroll to bottom saat initial load.

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

---

## 3.4 FE Campaign Module Flow (Detailed)

Alur lengkap modul Campaign dari pembuatan template hingga eksekusi.

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

---

## 3.5 FE Ticket Module Flow (Detailed)

Alur lengkap modul Ticket dari pembuatan hingga lifecycle management.

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

---

## 3.6 FE Settings Module Flow (Detailed)

Alur lengkap halaman Settings beserta role guard pada setiap sub-menu.

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

---

## 3.7 FE Data Fetching Architecture (SWR Pattern)

Diagram yang menunjukkan pola data fetching menggunakan SWR di seluruh aplikasi.

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