GitHub GitHub GitHub

Detail Customer

Quick Preview
Tips & Best Practices

Halaman Detail Customer adalah tampilan lengkap dari data sebuah customer. Halaman ini dapat diakses dengan mengklik nama customer di tabel, atau melalui tombol lihat detail pada Quick Preview Panel.

5.1 Header Halaman Detail

Bagian atas halaman Detail Customer menampilkan banner dengan informasi identitas utama customer, termasuk foto/avatar, nama, jabatan/deskripsi, nama perusahaan, industri, jumlah karyawan, dan alamat.

Terdapat dua tab navigasi di bawah banner:

  • Overview — Menampilkan informasi detail lengkap customer.

  • List Contacts — Menampilkan daftar kontak individu yang terhubung dengan customer ini.

Tombol Edit Customer tersedia di pojok kanan atas untuk memperbarui data customer.

5.2 Tab Overview

Tab Overview menampilkan semua informasi terstruktur tentang customer dalam beberapa kartu (card) terpisah.

Cognivo UI Screenshot

Gambar 4 — Tab Overview pada halaman Detail Customer

5.2.1 Kartu Info

Kartu Info menampilkan data kontak dan informasi teknis customer:

Field Keterangan
Phone Nomor telepon/WhatsApp utama customer.
Email Alamat email utama customer.
Website URL website resmi perusahaan (tampil sebagai hyperlink).
Rating Nilai rating customer pada skala 1–5.
Joined Date Tanggal customer pertama kali terdaftar di sistem.

5.2.2 Kartu Social Media

Kartu Social Media menampilkan ikon platform media sosial yang terhubung dengan akun customer. Platform yang didukung meliputi: LinkedIn, TikTok, YouTube, Instagram, X (Twitter), dan Facebook.

5.2.3 Kartu Source

Kartu Source menampilkan tag-tag sumber akuisisi customer dalam format badge/chip. Satu customer dapat memiliki lebih dari satu source (contoh: youtube, wa, instagram).

5.2.4 Kartu About

Kartu About menampilkan deskripsi naratif atau catatan tentang customer. Konten ini diisi secara manual oleh tim saat membuat atau mengedit data customer.

5.3 Tab List Contacts

Tab List Contacts menampilkan semua kontak individu yang terhubung (related) dengan customer ini. Ini memungkinkan tim untuk melihat seluruh kontak yang menjadi representasi dari perusahaan tersebut.

Cognivo UI Screenshot

Gambar 5 — Tab List Contacts pada halaman Detail Customer

5.3.1 Elemen Tab List Contacts

Tab List Contacts terdiri dari:

  • Tombol + Add Contact — Menambahkan kontak baru yang langsung terhubung dengan customer ini.

  • Tabel Kontak — Menampilkan daftar semua kontak yang berelasi dengan customer.

  • Pagination — Navigasi halaman untuk daftar kontak (default 20 baris per halaman).

5.3.2 Kolom Tabel List Contacts

Tabel pada tab List Contacts menampilkan kolom-kolom berikut:

Kolom Keterangan
Name Nama kontak individu beserta avatar/inisial.
Email Alamat email kontak.
WhatsApp No. Nomor WhatsApp kontak (tanpa tanda + dan spasi).
Lead Score Nilai skor prospek kontak (skala numerik, default: 0).
Tags Label/tag yang diberikan pada kontak (contoh: qa).
Last Contacted Waktu terakhir kontak dihubungi, ditampilkan dengan format tanggal dan jam.
Action Ikon aksi: telepon, chat, lihat detail, dan delete kontak dari customer.

5.3.3 Menambahkan Kontak ke Customer

  1. Buka halaman Detail Customer yang dituju.

  2. Klik tab List Contacts.

  3. Klik tombol + Add Contact.

  4. Pilih kontak yang sudah ada dari sistem atau buat kontak baru.

  5. Kontak akan langsung terhubung dengan customer yang sedang dibuka.