Team Chat

Team Chat adalah sistem komunikasi internal terpusat untuk tim kamu. Dibangun di atas TeamChat.jsx (568 baris) dengan arsitektur Pusher WebSocket untuk messaging real-time, mendukung channel group, direct message, reply threads, pin message, dan file sharing via Cloudinary. Semua percakapan tersimpan di base44 backend dan di-scope per company, memastikan data tidak bocor antar perusahaan. Fitur ini mengurangi ketergantungan pada aplikasi chat eksternal dan menjaga semua komunikasi kerja tetap terdokumentasi dalam satu platform.

Fitur Utama

Fitur	Deskripsi
Channel Messaging	Komunikasi berbasis channel (public, private, direct) dengan dukungan real-time via Pusher WebSocket
Direct Message (DM)	Percakapan 1-to-1 antar anggota tim dengan polling fallback setiap 4 detik
Reply Threads	Balas pesan tertentu untuk menjaga konteks percakapan tetap terstruktur
Pin Message	Tandai pesan penting agar muncul di atas channel sebagai referensi cepat
File Sharing	Kirim gambar dan dokumen melalui Cloudinary CDN dengan kompresi otomatis
Mentions	Tag anggota tim spesifik dalam pesan menggunakan array `mentions`
Read Receipts	Lacak siapa saja yang sudah membaca pesan melalui field `read_by`
Message Editing	Edit pesan yang sudah terkirim dengan timestamp edit tersimpan
Soft Delete	Hapus pesan tanpa menghilangkan data — ditandai dengan flag `is_deleted`
Company Scope	Semua data chat di-isolasi per perusahaan untuk keamanan data
Search	Cari pesan lama dalam channel berdasarkan kata kunci
Unread Badge	Indikator jumlah pesan belum dibaca per channel

Arsitektur Komponen

Diagram Konteks Sistem

Entity Relationship Diagram

Entity Schema

TeamChat (Chat Message)

Entitas utama untuk menyimpan setiap pesan dalam channel chat. Setiap pesan terasosiasi dengan channel tertentu dan di-scope oleh company_id.

Field	Tipe	Required	Deskripsi
`company_id`	`string` (FK → Company)	Ya	ID perusahaan untuk scope isolasi data
`channel_id`	`string` (FK → ChatChannel)	Ya	ID channel/room tujuan pesan
`channel_name`	`string`	Tidak	Nama channel (denormalized untuk performa query)
`message`	`string`	Ya	Isi pesan yang dikirim
`description`	`string`	Tidak	Konteks atau keterangan tambahan mengenai channel atau pesan, maksimal 1000 karakter
`sender_id`	`string` (FK → User)	Ya	ID/email pengirim pesan
`sender_name`	`string`	Tidak	Nama lengkap pengirim (denormalized)
`sender_avatar`	`string`	Tidak	URL avatar pengirim
`message_type`	`enum`	Tidak	Tipe pesan: `text`, `image`, `file`, `system`. Default: `text`
`attachments`	`array<object>`	Tidak	Daftar file lampiran, setiap item memiliki `url`, `filename`, `filesize`, `filetype`
`mentions`	`array<string>`	Tidak	Array email user yang di-mention dalam pesan
`reply_to`	`string` (FK → TeamChat)	Tidak	ID pesan yang dibalas (reply thread)
`is_edited`	`boolean`	Tidak	Flag apakah pesan sudah diedit. Default: `false`
`edited_at`	`datetime`	Tidak	Timestamp terakhir pesan diedit
`is_deleted`	`boolean`	Tidak	Flag soft delete — pesan ditandai dihapus tanpa benar-benar dihapus. Default: `false`
`read_by`	`array<object>`	Tidak	Daftar user yang sudah membaca, setiap item memiliki `user_id` dan `read_at`

Struktur Sub-field: `attachments`

Field	Tipe	Deskripsi
`url`	`string`	URL file di Cloudinary CDN
`filename`	`string`	Nama file asli
`filesize`	`number`	Ukuran file dalam byte
`filetype`	`string`	MIME type file (mis. `image/png`, `application/pdf`)

Struktur Sub-field: `read_by`

Field	Tipe	Deskripsi
`user_id`	`string`	ID/email user yang sudah membaca
`read_at`	`datetime`	Timestamp kapan pesan dibaca

ChatChannel

Entitas yang merepresentasikan channel atau room untuk komunikasi grup. Mendukung tiga tipe channel: public, private, dan direct.

Field	Tipe	Required	Deskripsi
`company_id`	`string` (FK → Company)	Ya	ID perusahaan untuk scope isolasi data
`channel_name`	`string`	Ya	Nama channel yang unik dalam scope perusahaan
`channel_type`	`enum`	Ya	Tipe channel: `public`, `private`, `direct`. Default: `public`
`description`	`string`	Tidak	Deskripsi channel untuk menjelaskan tujuan channel
`members`	`array<string>`	Tidak	Array email anggota channel
`admins`	`array<string>`	Tidak	Array email admin channel yang memiliki hak kelola
`created_by`	`string` (FK → User)	Tidak	ID/email user yang membuat channel
`is_archived`	`boolean`	Tidak	Flag channel diarsipkan (tidak aktif). Default: `false`
`last_message`	`string`	Tidak	Cuplikan pesan terakhir untuk preview di sidebar
`last_message_at`	`datetime`	Tidak	Timestamp pesan terakhir dikirim
`unread_count`	`number`	Tidak	Jumlah pesan belum dibaca oleh user saat ini. Default: `0`

InternalMessage (Direct Message)

Entitas untuk pesan langsung 1-to-1, announcement, dan notifikasi workflow. Digunakan oleh DirectMessageInbox untuk percakapan privat antar anggota tim.

Field	Tipe	Required	Deskripsi
`company_id`	`string` (FK → Company)	Tidak	ID perusahaan (null = personal/direct)
`sender_id`	`string` (FK → User)	Ya	Email pengirim
`sender_name`	`string`	Tidak	Nama lengkap pengirim
`sender_avatar`	`string`	Tidak	URL avatar pengirim
`recipient_id`	`string` (FK → User)	Ya	Email penerima (untuk DM)
`message_type`	`enum`	Tidak	Tipe pesan: `direct`, `announcement`, `workflow_alert`, `system`. Default: `direct`
`subject`	`string`	Tidak	Subjek pesan (khusus untuk announcement)
`content`	`string`	Ya	Isi pesan
`is_read`	`boolean`	Tidak	Status apakah pesan sudah dibaca. Default: `false`
`attachment_url`	`string`	Tidak	URL file lampiran di Cloudinary
`attachment_name`	`string`	Tidak	Nama file asli lampiran
`related_entity_type`	`string`	Tidak	Entitas terkait (mis. `task`, `invoice`, `production_batch`)
`related_entity_id`	`string`	Tidak	ID record entitas terkait

Conversation (AI Chat)

Entitas untuk percakapan AI assistant dalam platform. Berbeda dengan TeamChat — ini menyimpan riwayat percakapan user dengan AI.

Field	Tipe	Required	Deskripsi
`user_id`	`string` (FK → User)	Ya	ID pengguna yang memulai percakapan
`title`	`string`	Ya	Judul percakapan, dibuat otomatis dari pesan pertama
`description`	`string`	Tidak	Ringkasan atau konteks singkat percakapan, maksimal 1000 karakter
`messages`	`array<object>`	Ya	Seluruh riwayat pesan dalam percakapan
`pinned`	`boolean`	Tidak	Flag percakapan di-pin agar mudah diakses. Default: `false`

Struktur Sub-field: `messages`

Field	Tipe	Deskripsi
`role`	`enum`	Role pengirim pesan: `user` atau `assistant`
`content`	`string`	Isi pesan percakapan

Notification

Entitas notifikasi yang terintegrasi dengan sistem chat. Dipicu otomatis saat mengirim DM atau terjadi event penting lainnya.

Field	Tipe	Required	Deskripsi
`user_id`	`string` (FK → User)	Ya	Email pengguna yang menerima notifikasi
`title`	`string`	Ya	Judul notifikasi
`message`	`string`	Ya	Pesan notifikasi
`description`	`string`	Tidak	Detail tambahan atau konteks notifikasi, maksimal 1000 karakter
`url`	`string`	Tidak	URL tujuan saat notifikasi diklik
`type`	`enum`	Tidak	Tipe notifikasi untuk menentukan render aksi. Default: `SYSTEM`
`metadata`	`object`	Tidak	Payload tambahan (mis. `invitationId`, `companyId`, `companyName`)
`priority`	`enum`	Tidak	Prioritas notifikasi: `low`, `normal`, `high`. Default: `normal`
`is_read`	`boolean`	Tidak	Status apakah notifikasi sudah dibaca. Default: `false`
`event_id`	`string`	Tidak	Idempotency key — notifikasi duplikat dengan `event_id` sama diabaikan
`company_id`	`string` (FK → Company)	Tidak	ID perusahaan untuk scope filter
`location_id`	`string`	Tidak	ID lokasi untuk scope filter (opsional)
`source_entity`	`string`	Tidak	Nama entity sumber (mis. `POSTransaction`, `Invoice`)
`source_id`	`string`	Tidak	ID record sumber
`correlation_id`	`string`	Tidak	Correlation ID dari request kritis untuk observability

Enum Reference Tables

`TeamChat.message_type`

Nilai	Deskripsi	Handling di UI
`text`	Pesan teks biasa	Render sebagai teks standar
`image`	Gambar	Upload ke Cloudinary, tampilkan inline dengan preview
`file`	File dokumen/lainnya	Upload ke Cloudinary, tampilkan sebagai link download
`system`	Pesan sistem otomatis	Render dengan styling berbeda (abu-abu, italic)

`ChatChannel.channel_type`

Nilai	Deskripsi	Akses
`public`	Channel terbuka — semua anggota perusahaan bisa bergabung	Bebas bergabung
`private`	Channel tertutup — hanya anggota yang diundang bisa akses	Perlu di-invite oleh admin
`direct`	Channel direct message 1-to-1	Otomatis untuk kedua peserta

`InternalMessage.message_type`

Nilai	Deskripsi	Kasus Penggunaan
`direct`	Pesan langsung antar user	Komunikasi privat 1-to-1
`announcement`	Pengumuman resmi	Broadcast informasi penting dengan `subject`
`workflow_alert`	Alert dari workflow otomatis	Notifikasi otomatis dari automasi bisnis
`system`	Pesan sistem	Notifikasi dari sistem (maintenance, update, dll)

`Conversation.messages[].role`

Nilai	Deskripsi
`user`	Pesan dari pengguna
`assistant`	Pesan dari AI assistant

`Notification.type`

Nilai	Deskripsi
`SYSTEM`	Notifikasi sistem umum
`INVITATION`	Undangan bergabung perusahaan — menampilkan tombol Terima/Tolak
`TASK`	Notifikasi terkait task
`STOCK`	Notifikasi stok barang
`INVOICE`	Notifikasi invoice
`WORKFLOW`	Notifikasi dari workflow automation
`ANNOUNCEMENT`	Pengumuman resmi
`ORDER`	Notifikasi pesanan
`PAYMENT`	Notifikasi pembayaran
`LOW_STOCK`	Peringatan stok rendah
`DISCREPANCY`	Notifikasi ketidaksesuaian data
`EXPIRY`	Peringatan masa kedaluwarsa
`BACKUP`	Notifikasi backup data
`BTT_PENDING`	Notifikasi BTT menunggu persetujuan
`PAYMENT_DUE`	Peringatan jatuh tempo pembayaran
`RECALL`	Notifikasi recall produk

`Notification.priority`

Nilai	Deskripsi	Visual
`low`	Prioritas rendah — tidak mendesak	Warna netral
`normal`	Prioritas standar	Warna default
`high`	Prioritas tinggi — perlu perhatian segera	Warna menonjol / badge merah

State Diagrams

Siklus Hidup Pesan (TeamChat)

Siklus Hidup Channel (ChatChannel)

Siklus Hidup Direct Message (InternalMessage)

Sequence Diagrams

Flow 1: Mengirim Pesan Channel

Flow 2: Membuat Channel Baru

Flow 4: Direct Message (DM)

Flow 5: Reply Thread

Real-Time Architecture

Pusher Configuration

Setting	Value
Cluster	`ap1` (Asia Pacific)
Channel pattern	`chat-{channelId}`
Events	`new-message`, `message-updated`
Client	Singleton di `pusherClient.js` (22 baris)

Direct Message Fallback

DM menggunakan polling setiap 4 detik sebagai fallback karena Pusher tidak selalu tersedia untuk 1-to-1 messaging:

setInterval → load InternalMessage → filter by sender/recipient → update UI

Message Type Handling

Type	Deskripsi	Handling
`text`	Pesan teks biasa	Render sebagai text
`image`	Gambar	Upload ke Cloudinary, tampilkan inline
`file`	File lainnya	Upload ke Cloudinary, tampilkan sebagai link download
`system`	Pesan sistem otomatis	Render dengan styling berbeda (gray, italic)

Image Upload Pipeline

Attachment Structure

Setiap attachment dalam field attachments memiliki struktur sebagai berikut:

Field	Tipe	Deskripsi
`url`	`string`	URL file di Cloudinary CDN
`filename`	`string`	Nama file asli saat di-upload
`filesize`	`number`	Ukuran file dalam satuan byte
`filetype`	`string`	MIME type file (contoh: `image/png`, `application/pdf`, `image/jpeg`)

Date Grouping

Pesan dikelompokkan berdasarkan tanggal dengan label otomatis:

Kondisi	Label
Tanggal = hari ini	”Hari Ini”
Tanggal = kemarin	”Kemarin”
Lainnya	Format tanggal Indonesia (dd MMMM yyyy)

Implementasi menggunakan library date-fns dengan locale Indonesia untuk formatting yang konsisten.

Direct Message (DM)

DirectMessageInbox (345 baris) menyediakan messaging 1-to-1 dalam full-screen dialog:

Fitur DM

Grouping percakapan per kontak
Tracking read/unread status
Auto-create Notification entity saat mengirim pesan
Polling 4 detik untuk pesan baru
Dukungan attachment via attachment_url dan attachment_name
Link ke entitas terkait melalui related_entity_type dan related_entity_id

Tipe Pesan InternalMessage

Tipe	Deskripsi	Kapan Digunakan
`direct`	Pesan langsung privat	Komunikasi 1-to-1 antar anggota tim
`announcement`	Pengumuman resmi	Broadcast info penting dengan subjek
`workflow_alert`	Alert dari workflow	Notifikasi otomatis dari automasi
`system`	Pesan sistem	Maintenance, update, info sistem

Channel Management

Aksi	Deskripsi
Create	Buat channel baru dengan nama unik
Search	Filter channel berdasarkan nama
Archive	Arsipkan channel yang tidak aktif
Unread Badge	Jumlah pesan belum dibaca per channel

Tipe Channel

Tipe	Deskripsi	Visibilitas
`public`	Channel terbuka, semua anggota perusahaan bisa bergabung	Semua user bisa lihat dan join
`private`	Channel tertutup, hanya anggota yang di-invite	Hanya members dan admins
`direct`	Channel DM 1-to-1	Hanya dua peserta

Manajemen Anggota Channel

Role	Hak Akses
Admin (`admins` array)	Kelola channel, invite/remove member, archive channel, pin message
Member (`members` array)	Kirim pesan, baca pesan, reply, pin message
Non-member	Hanya bisa lihat channel public, tidak bisa kirim pesan

Message Actions

Aksi	Deskripsi
Reply	Balas pesan tertentu — menampilkan reply thread
Pin	Pin pesan penting — muncul di atas channel
Delete	Soft delete — pesan ditandai `is_deleted = true`
Edit	Edit pesan — ditandai `is_edited = true` dengan timestamp `edited_at`
Search	Cari pesan dalam conversation berdasarkan kata kunci
Mention	Tag user spesifik — array email disimpan di field `mentions`

Read Receipts

Sistem read receipt memungkinkan pengirim mengetahui siapa saja yang sudah membaca pesannya:

Field	Deskripsi
`read_by[].user_id`	ID user yang sudah membaca
`read_by[].read_at`	Timestamp kapan pesan dibaca

Read receipt di-update saat user membuka channel atau DM yang berisi pesan tersebut.

Scroll Behavior

Sistem mendeteksi posisi scroll dan menampilkan tombol “scroll down” jika user berada >100px dari bawah. Ini mencegah user kehilangan konteks saat pesan baru masuk.

Company Scope Security

DirectMessageInbox.companyScopePolicy.test.js (16 baris) memverifikasi bahwa semua query DM menyertakan filter company_id, memastikan data tidak bocor lintas perusahaan.

Isolasi Data per Entitas

Entitas	Scope Field	Mekanisme
`TeamChat`	`company_id`	Semua query wajib filter by company
`ChatChannel`	`company_id`	Channel hanya visible dalam scope perusahaan
`InternalMessage`	`company_id`	DM di-isolasi per company (null = personal)
`Notification`	`company_id`	Notifikasi di-filter per company + optional `location_id`

RBAC Permission Matrix

Berikut adalah matriks hak akses berdasarkan role dalam konteks Team Chat:

Aksi	Super Admin	Company Admin	Channel Admin	Member	Non-member
Buat channel	✅	✅	✅	✅ (public only)	❌
Hapus channel	✅	✅	✅ (own channels)	❌	❌
Archive channel	✅	✅	✅	❌	❌
Invite member (private)	✅	✅	✅	❌	❌
Kirim pesan	✅	✅	✅	✅	❌
Edit pesan sendiri	✅	✅	✅	✅	❌
Hapus pesan sendiri	✅	✅	✅	✅	❌
Pin pesan	✅	✅	✅	✅	❌
Baca pesan	✅	✅	✅	✅	✅ (public)
Lihat DM	✅	✅	❌	✅ (own)	❌
Kelola notifikasi	✅	✅	❌	❌	❌

Integrasi Eksternal

Layanan	Fungsi
Pusher	WebSocket real-time messaging
Cloudinary	Upload gambar dan file attachment
base44 functions	`pusherTrigger` untuk broadcast event
date-fns	Format tanggal dengan locale Indonesia
framer-motion	Stagger animations untuk pesan baru

Detail Integrasi Cloudinary

Setting	Value
Upload path	`snishop_erp/chat`
Image compression	Max 1200px, quality 80%
Supported formats	Image (PNG, JPG, GIF, WebP), dokumen (PDF, DOCX, XLSX)
Delivery	Via CDN global Cloudinary

Cara Akses

Dari sidebar, klik menu Communication > Team Chat.

Flow Penggunaan

Buka Team Chat dari sidebar — pilih channel yang sudah ada atau buat baru
Ketik pesan di input box dan kirim — pesan langsung muncul di semua client via Pusher
Untuk kirim gambar, klik ikon attachment — gambar dikompresi otomatis sebelum upload
Balas pesan tertentu dengan klik Reply — reply thread ditampilkan inline
Pin pesan penting dengan klik Pin — muncul di atas channel untuk referensi cepat
Untuk direct message, klik avatar user — DirectMessageInbox terbuka
Gunakan search bar untuk mencari pesan lama dalam channel
Edit pesan yang sudah terkirim — ditandai dengan label “edited” dan timestamp edited_at
Mention anggota tim spesifik untuk menarik perhatian mereka

Tips

Buat channel per proyek atau divisi supaya diskusi tetap terfokus dan tidak tercampur
Gunakan reply thread untuk menjaga konteks percakapan — hindari pesan yang melenceng dari topik
Pin pesan yang berisi keputusan penting atau informasi yang sering dirujuk
Untuk diskusi yang perlu keputusan formal, gunakan meeting langsung — chat cocok untuk koordinasi cepat
Manfaatkan fitur mentions untuk menotifikasi anggota tim spesifik dalam pesan channel
Gunakan channel private untuk diskusi sensitif yang tidak boleh dilihat semua anggota
Kompresi gambar otomatis memastikan upload cepat bahkan dengan koneksi lambat
Untuk pesan yang berkaitan dengan entitas bisnis tertentu (task, invoice), gunakan InternalMessage dengan related_entity_type agar mudah ditelusuri

Troubleshooting

Masalah	Kemungkinan Penyebab	Solusi
Pesan tidak muncul real-time	Koneksi Pusher terputus	Periksa koneksi internet, cek console untuk error WebSocket
DM tidak update	Polling gagal	Periksa koneksi API, refresh halaman
Upload gambar gagal	Ukuran file terlalu besar	Gunakan format yang didukung, pastikan file < max size Cloudinary
Channel tidak muncul	Filter company_id salah	Logout dan login kembali untuk refresh session
Notifikasi tidak muncul	Notification entity tidak terbuat	Periksa apakah DM berhasil terkirim

​title: “Team Chat” description: “Real-time team chat dengan Pusher WebSocket, channel management, direct message, file sharing via Cloudinary, dan reply threads di SNISHOP ERP.”

​Team Chat

​Fitur Utama

​Arsitektur Komponen

​Diagram Konteks Sistem

​Entity Relationship Diagram

​Entity Schema

​TeamChat (Chat Message)

​Struktur Sub-field: attachments

​Struktur Sub-field: read_by

​ChatChannel

​InternalMessage (Direct Message)

​Conversation (AI Chat)

​Struktur Sub-field: messages

​Notification

​Enum Reference Tables

​TeamChat.message_type

​ChatChannel.channel_type

​InternalMessage.message_type

​Conversation.messages[].role

​Notification.type

​Notification.priority

​State Diagrams

​Siklus Hidup Pesan (TeamChat)

​Siklus Hidup Channel (ChatChannel)

​Siklus Hidup Direct Message (InternalMessage)

​Sequence Diagrams

​Flow 1: Mengirim Pesan Channel

​Flow 2: Membuat Channel Baru

​Flow 3: File Sharing (Upload Gambar)

​Flow 4: Direct Message (DM)

​Flow 5: Reply Thread

​Real-Time Architecture

​Pusher Configuration

​Direct Message Fallback

​Message Type Handling

​Image Upload Pipeline

​Attachment Structure

​Date Grouping

​Direct Message (DM)

​Fitur DM

​Tipe Pesan InternalMessage

​Channel Management

​Tipe Channel

​Manajemen Anggota Channel

​Message Actions

​Read Receipts

​Scroll Behavior

​Company Scope Security

​Isolasi Data per Entitas

​RBAC Permission Matrix

​Integrasi Eksternal

​Detail Integrasi Cloudinary

​Cara Akses

​Flow Penggunaan

​Tips

​Troubleshooting

title: “Team Chat” description: “Real-time team chat dengan Pusher WebSocket, channel management, direct message, file sharing via Cloudinary, dan reply threads di SNISHOP ERP.”