Skip to content

O
omnichannel_flowchart
Commit df0e78ce authored by M. Hafidz 's avatar M. Hafidz
Browse files
Options

changes

parent f5c3ffb4
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 78 deletions
00-EXECUTIVE-SUMMARY.md deleted 100644 → 0
View file @ f5c3ffb4
# 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).
README.md 0 → 100644
View file @ df0e78ce
# Ortax Omnichannel — Flowchart & Architecture Report
<p align="center">
<strong>Laporan Analisis Arsitektur & Flowchart Aplikasi</strong><br/>
Backend v0.5.7 · Frontend v0.4.6 · 21 April 2026
</p>
---
## 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** | Login/register via Better-Auth, session management, RBAC (owner/admin/member), forgot/reset password |
| 2 | **Chat** | Real-time omnichannel messaging (WhatsApp/Instagram/Telegram), conversation management (assign/resolve), message templates, file attachments, internal notes, office hours auto-response |
| 3 | **Campaign** | WhatsApp marketing campaigns, template messages (Meta Resumable API), recipient list dengan variable personalization, delivery tracking |
| 4 | **Ticket** | Issue tracking terhubung conversation/contact, full lifecycle (TODO → IN_PROGRESS → RESOLVED → DONE/REJECTED), batch operations |
| 5 | **Settings** | User management, channel configuration, workspace management, office hours, quick reply templates, API keys, tags, resolve categories, role & permissions |
## Technology Stack
| Layer | Frontend | Backend |
|-------|----------|---------|
| **Runtime** | Browser + Vite Dev Server | Bun |
| **Framework** | React 19.2 | Hono 4.10 |
| **Language** | TypeScript 5.9 | TypeScript |
| **UI** | MUI v7.3 | — |
| **Data/State** | SWR 2.3, React Context | — |
| **HTTP** | Axios 1.11 | Hono built-in |
| **Validation** | Zod 4.0 | Zod 4.1 |
| **ORM** | — | Drizzle ORM 0.44 |
| **Database** | — | PostgreSQL (30+ tables) |
| **Auth** | better-auth client 1.3 | better-auth server 1.3 |
| **Real-time** | Pusher-js, Socket.io-client | Pusher, Socket.IO |
| **Message Queue** | — | RabbitMQ |
## Arsitektur Utama
- **Frontend**: React SPA + route guards (AuthGuard, WorkspaceGuard, GuestGuard, RouteRoleGuard)
- **Backend**: Hono HTTP server + Repository-Service-Route pattern (47 service modules)
- **Real-time**: Hybrid Pusher + Socket.IO
- **Multi-tenancy**: Workspace-based + RBAC permission system
- **Webhook Queue**: RabbitMQ untuk distributed webhook processing
- **Soft Delete**: Semua entity menggunakan soft delete pattern
## Statistik
| Metrik | FE | BE |
|--------|-----|-----|
| Service Modules | — | 47 |
| Chat Section Files | 82 | ~8 services |
| Campaign Section Files | 33 | ~5 services |
| Ticket Section Files | 25 | ~3 services |
| API Endpoints | ~80+ actions | ~60+ routes |
| Database Tables | — | 30+ |
| User Roles | — | 3 (owner, admin, member) |
---
## Daftar Dokumen
### [01 — Arsitektur Umum Aplikasi](./01-OVERALL-ARCHITECTURE.md)
Arsitektur sistem keseluruhan, user journey, navigasi, dan alur data.
| Diagram | Deskripsi |
|---------|-----------|
| [1.1 System Architecture Overview](./images/1.1.png) | Arsitektur high-level dari pengguna hingga database |
| [1.2 User Journey Flowchart](./images/1.2.png) | Alur perjalanan pengguna dari login hingga menggunakan fitur |
| [1.3 Navigation Structure](./images/1.3.png) | Struktur navigasi sidebar dashboard lengkap |
| [1.4 High-Level Data Flow](./images/1.4.png) | Aliran data dari input hingga output |
| [1.5 Multi-Channel Message Flow](./images/1.5.png) | Alur pesan masuk dari WhatsApp/Instagram/Telegram hingga ke UI agent |
---
### [02 — Integrasi Frontend-Backend](./02-INTEGRATION-FLOW.md)
API mapping, real-time flow, dan integrasi antara FE dan BE.
| Diagram | Deskripsi |
|---------|-----------|
| [2.1 API Integration Map](./images/2.1.png) | Mapping FE modules → API endpoints → BE services untuk 5 fitur utama |
| [2.2 Real-Time Integration Flow](./images/2.2.png) | Alur komunikasi real-time dari webhook hingga update UI |
| [2.3 Real-Time Event Types](./images/2.3.png) | Tipe event Pusher dan channel yang digunakan |
| [2.4 Authentication Integration Flow](./images/2.4.png) | Alur integrasi autentikasi FE ↔ BE |
| [2.5 File Upload Integration Flow](./images/2.5.png) | Alur upload file untuk berbagai tipe (chat, ticket, template, channel) |
| [2.6 Middleware Stack](./images/2.6.png) | Urutan middleware yang dilalui setiap HTTP request |
---
### [03 — Flowchart Frontend (FE)](./03-FE-FLOWCHARTS.md)
Detail routing, auth, dan setiap fitur dari sisi Frontend.
| Diagram | Deskripsi |
|---------|-----------|
| [3.1 General Routing Architecture](./images/3.1.png) | Struktur routing lengkap dari root hingga setiap halaman + guard |
| [3.2 Auth Flow](./images/3.2.png) | Alur login, register, invitation, dan route guards |
| [3.3 Chat Module Flow](./images/3.3.png) | Detail modul Chat (82 files) — conversations, messages, real-time |
| [3.4 Campaign Module Flow](./images/3.4.png) | Alur campaign: template, recipient list, eksekusi, tracking |
| [3.5 Ticket Module Flow](./images/3.5.png) | Alur ticket: create, lifecycle, batch operations |
| [3.6 Settings Module Flow](./images/3.6.png) | Alur settings: user, channel, workspace, office hours, API keys |
| [3.7 SWR Data Fetching Pattern](./images/3.7.png) | Pola data fetching menggunakan SWR + real-time revalidation |
---
### [04 — Flowchart Backend (BE)](./04-BE-FLOWCHARTS.md)
Detail service architecture, auth RBAC, dan setiap fitur dari sisi Backend.
| Diagram | Deskripsi |
|---------|-----------|
| [4.1 General Service Architecture](./images/4.1.png) | Pattern Repository → Service → Route + middleware stack |
| [4.2 Auth & RBAC Flow](./images/4.2.png) | Alur autentikasi better-auth + authorization RBAC |
| [4.3 Conversation & Message Flow](./images/4.3.png) | Mesin chat: inbound webhook, outbound message, delivery status |
| [4.4a Conversation Status — State Diagram](./images/4.4a.png) | State diagram: UNASSIGNED → ASSIGNED → RESOLVED (one-way pipeline) |
| [4.4b Conversation Status — Detail Transisi](./images/4.4b.png) | Detail setiap transisi status: assign, resolve, blocked operations |
| [4.4c Chain Mechanism](./images/4.4c.png) | Customer reply setelah RESOLVED → conversation baru ter-chain |
| [4.5 Campaign Execution Flow](./images/4.5.png) | Eksekusi campaign: render template, kirim WA, delivery tracking |
| [4.6 Ticket Lifecycle Flow](./images/4.6.png) | Lifecycle ticket: TODO → IN_PROGRESS → RESOLVED → DONE/REJECTED |
| [4.7 Webhook Processing Architecture](./images/4.7.png) | Arsitektur webhook: WhatsApp (RabbitMQ), Instagram, Telegram |
| [4.8 Service Module Pattern](./images/4.8.png) | Pattern per module: route + service + repository + validation |
| [4.9 Error Handling Flow](./images/4.9.png) | Alur error handling: AppError, DB error, Zod validation |
---
### [05 — Ringkasan & Tabel Referensi](./05-SUMMARY-TABLES.md)
Ringkasan fitur, tech stack comparison, RBAC matrix, API endpoint catalog, database ERD, dan statistik final.
| Section | Deskripsi |
|---------|-----------|
| 5.1 Ringkasan 5 Fitur Utama | Deskripsi + kompleksitas tiap fitur |
| 5.2 Technology Stack Comparison | Perbandingan lengkap tech stack FE vs BE |
| 5.3 Role-Based Access Control Matrix | Matrix akses: owner vs admin vs member untuk semua menu |
| 5.4 Complete API Endpoint Catalog | Katalog lengkap ~60+ API endpoints (method, path, permission, deskripsi) |
| 5.5 Database Schema (ERD) | Entity Relationship Diagram 30+ tabel dengan kolom dan relasi |
| 5.6 Statistik Final | Metrik jumlah endpoints, services, tables, hooks, pages |
---
## Cara Membuka Flowchart
Semua diagram flowchart tersedia dalam dua format:
1. **Gambar PNG** — Langsung terlihat di GitLab, GitHub, atau browser (folder `images/`)
2. **Sintaks Mermaid** — Tersedia di file markdown untuk editing atau render ulang via [Mermaid Live Editor](https://mermaid.live)
---
<p align="center">
<sub>Generated from deep analysis of <code>be-dev</code> and <code>fe-dev</code> source code.</sub>
</p>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment