# ORTAX OMNICHANNEL APPLICATION
# COMPREHENSIVE FLOWCHART & ARCHITECTURE REPORT

---

| **Dokumen** | Laporan Analisis Arsitektur & Flowchart |
|---|---|
| **Versi Aplikasi** | Backend v0.5.7 · Frontend v0.4.6 |
| **Tanggal Laporan** | 21 April 2026 |

---

## DAFTAR ISI

| # | Dokumen | File | Deskripsi |
|---|---------|------|-----------|
| 1 | Executive Summary | `00-EXECUTIVE-SUMMARY.md` | Ringkasan eksekutif (file ini) |
| 2 | Arsitektur Umum Aplikasi | `01-OVERALL-ARCHITECTURE.md` | System architecture, user journey, navigasi |
| 3 | Integrasi FE-BE | `02-INTEGRATION-FLOW.md` | API mapping, real-time flow, database ERD |
| 4 | Frontend Flowcharts | `03-FE-FLOWCHARTS.md` | Routing, Auth, Chat, Campaign, Ticket, Settings |
| 5 | Backend Flowcharts | `04-BE-FLOWCHARTS.md` | Service architecture, Auth RBAC, Chat engine, Campaign engine, Ticket lifecycle |
| 6 | Ringkasan & Tabel | `05-SUMMARY-TABLES.md` | Role matrix, endpoint catalog, tech stack |

---

## RINGKASAN EKSEKUTIF

### Tentang Aplikasi

**Ortax Omnichannel** adalah platform komunikasi pelanggan multi-channel yang memungkinkan bisnis mengelola percakapan dari WhatsApp, Instagram, Telegram, dan channel lainnya dalam satu dashboard terpusat.

### 5 Fitur Utama

| # | Fitur | Deskripsi |
|---|-------|-----------|
| 1 | **Authentication (Auth)** | Login/register via Better-Auth, session management, RBAC (owner/admin/member), forgot/reset password |
| 2 | **Chat** | Real-time conversation management, multi-channel messaging (WhatsApp/Instagram/Telegram), message templates, file attachments, internal notes, conversation assignment & resolution |
| 3 | **Campaign** | WhatsApp marketing campaigns dengan template messages, recipient list management, variable personalization, delivery tracking |
| 4 | **Ticket** | Issue tracking linked to conversations/contacts, full lifecycle (TODO → IN_PROGRESS → RESOLVED → DONE), assignment, batch operations |
| 5 | **Settings** | User management, channel configuration, workspace management, office hours & auto-response, quick reply templates, API keys, tags, resolve categories, role & permission management |

### Technology Stack

| Layer | Technology |
|-------|-----------|
| **Frontend** | React 19, TypeScript 5.9, Vite 7, MUI v7, SWR, Axios |
| **Backend** | Hono v4, Bun runtime, Drizzle ORM, TypeScript |
| **Database** | PostgreSQL (schema: omnichannel, 30+ tables) |
| **Auth** | better-auth v1.3 |
| **Real-time** | Pusher + Socket.IO (hybrid) |
| **Message Queue** | RabbitMQ (webhook processing) |
| **Validation** | Zod (FE + BE) |
| **External APIs** | Meta WhatsApp Business API, Instagram Graph API, Telegram Bot API |

### Arsitektur Utama

- **Frontend**: React SPA dengan route guards (AuthGuard, WorkspaceGuard, GuestGuard, RouteRoleGuard)
- **Backend**: Hono HTTP server dengan Repository-Service-Route pattern (47 service modules)
- **Real-time**: Hybrid Pusher + Socket.IO untuk notifikasi real-time
- **Multi-tenancy**: Workspace-based dengan RBAC permission system
- **Webhook Queue**: RabbitMQ untuk distributed webhook processing
- **Soft Delete**: Semua entity menggunakan soft delete pattern

### Statistik Kode

| Metrik | FE | BE |
|--------|-----|-----|
| Total Service Modules | - | 47 modules |
| Chat Section Files | 82 files | ~8 services |
| Campaign Section Files | 33 files | ~5 services |
| Ticket Section Files | 25 files | ~3 services |
| API Endpoints | ~80+ action functions | ~60+ route endpoints |
| Database Tables | - | 30+ tables |
| Real-time Channels | 3 (Pusher/Socket.IO/WS) | 3 (Pusher/Socket.IO/RabbitMQ) |

---

> **Catatan**: Semua diagram flowchart menggunakan sintaks **Mermaid** yang dapat dirender di GitHub, GitLab, Notion, VS Code (dengan extension), atau [Mermaid Live Editor](https://mermaid.live).
