# Detail Kontak

Halaman Contact Details menampilkan informasi lengkap tentang seorang kontak, termasuk histori interaksi dan informasi pelanggan terkait. Halaman ini dapat diakses dengan mengklik ikon "mata" (View Detail) pada baris kontak di daftar, atau dengan mengklik nama kontak.

## 6.1 Header Kontak
Bagian atas halaman menampilkan informasi identitas utama kontak dalam tampilan header berwarna teal gelap, terdiri dari:

* Foto profil kontak (jika tersedia)

* Nama kontak

* Nama perusahaan/customer yang terhubung (dengan ikon briefcase)

* Alamat kontak (dengan ikon lokasi)

* Tab navigasi: Overview dan Customer Info

* Tombol "Edit Contact" di pojok kanan untuk mengedit data kontak

## 6.2 Tab Overview
![Screenshot Cognivo](/media/product-guideline/image-45.png)

*Gambar 6 – Halaman Contact Details: Tab Overview*

Tab Overview menampilkan dua panel utama:

## 6.2.1 Panel Info
Panel kiri menampilkan data kontak utama:

| Field | Keterangan |
| :---- | :---- |
| **WhatsApp No.** | Nomor WhatsApp kontak (format lokal atau internasional sesuai input). |
| **Email** | Alamat email kontak. |
| **Website** | URL website kontak (jika diisi, tampil sebagai tanda hubung "–" jika kosong). |
| **Joined Date** | Tanggal kontak pertama kali ditambahkan ke sistem Cognivo. |
| **Birthday** | Tanggal ulang tahun kontak (format: DD Mon YYYY). |
| **Hobbies** | Hobi atau minat kontak sebagai data profil tambahan. |

## 6.2.2 Panel About
Panel kanan menampilkan deskripsi/catatan bebas tentang kontak yang diisi oleh tim. Deskripsi ini dapat diedit melalui tombol "Edit Contact".

## 6.2.3 Panel Social Media
Di bagian bawah panel kiri, ditampilkan ikon-ikon platform media sosial kontak: LinkedIn, TikTok, YouTube, Instagram, X (Twitter), dan Facebook. Ikon yang memiliki tautan aktif dapat diklik untuk membuka profil media sosial kontak di browser.

## 6.2.4 Panel Tags
Di bawah panel Social Media, ditampilkan tag-tag yang dilekatkan pada kontak untuk keperluan segmentasi dan kategorisasi.

## 6.3 Tab Customer Info
![Screenshot Cognivo](/media/product-guideline/image-46.png)

*Gambar 7 – Halaman Contact Details: Tab Customer Info*

Tab Customer Info menampilkan informasi perusahaan/organisasi (customer) yang terhubung dengan kontak ini. Satu kontak dapat dikaitkan dengan satu entitas Customer dalam sistem.

| Field Customer | Keterangan |
| :---- | :---- |
| **Avatar Customer** | Inisial nama customer ditampilkan sebagai avatar berwarna (contoh: "PT" untuk PT Ana Comp). |
| **Nama Customer** | Nama perusahaan/organisasi pelanggan. |
| **Industri** | Bidang industri perusahaan (contoh: Healthcare, Retail, Technology). |
| **Tombol WA Call** | Ikon telepon WhatsApp untuk menghubungi customer secara langsung. |
| **Phone** | Nomor telepon perusahaan. |
| **Email** | Alamat email perusahaan. |
| **Address** | Alamat fisik perusahaan. |
| **Employees** | Rentang jumlah karyawan (contoh: 501–1000). |
| **Rating** | Rating/penilaian customer dalam skala numerik. |
| **Website** | URL website resmi perusahaan (tampil sebagai hyperlink yang dapat diklik). |

*ℹ️  Jika kontak belum dikaitkan dengan Customer, tab Customer Info akan kosong. Kaitkan melalui tombol "Edit Contact" → field Customer.*