title: “Sales Pipeline Management — Manajemen Pipeline Lanjutan” description: “SalesPipelineManagement.jsx (963 baris) — dual view (Kanban + List), 5 KPI metrics bar, 6-stage pipeline, lead CRUD via React Query, lead-to-customer conversion, dan overdue detection.”

Sales Pipeline Management — Manajemen Pipeline Lanjutan

Sales Pipeline Management (SalesPipelineManagement.jsx — 963 baris) adalah halaman standalone untuk mengelola pipeline penjualan dengan fitur lengkap. Menggunakan React Query (useQuery, useMutation, useQueryClient) untuk data fetching dan cache management, halaman ini menyediakan dual view (Kanban + List), 5 KPI metrics bar real-time, lead CRUD lengkap, dan lead-to-customer conversion dengan duplicate detection. Halaman ini berbagi logic yang sama dengan embedded pipeline (SalesFunnelBoard.jsx — 715 baris) di tab “Pipeline” pada halaman CRM, namun menawarkan UI yang lebih kaya dengan toggle view dan metrics bar.

Arsitektur Komponen

Perbedaan dengan Embedded Pipeline

Aspek	Embedded (`SalesFunnelBoard`)	Standalone (`SalesPipelineManagement`)
Lokasi	Tab “Pipeline” di `/crm`	Halaman `/sales-pipeline`
Komponen	715 baris	963 baris
View	Kanban only	Kanban + List toggle
Metrics Bar	Tidak ada	5 KPI real-time
UI	Sederhana, theme tokens	Full-featured, action buttons
Integration Banner	Ada (CRM count, invoice count)	Tidak ada
Data Fetching	base44 API direct	React Query (cached)
Logic	Sama — 6 stages	Sama — 6 stages

Akses Halaman

Metode	Detail
URL	`/sales-pipeline`
Sidebar	Menu CRM → Sales Pipeline
CRM Tab	Via tab “Pipeline” di `/crm` (embedded version)

Fitur Utama

Dual View Mode

Mode	Deskripsi	Best For
Kanban Board	Kolom per tahap, card per lead, drag-and-drop	Visual overview, daily standup
List View	Tabel dengan semua lead, sortable & filterable	Detail analysis, bulk operations

Metrics Bar — 5 KPI Real-Time

Metrik	Formula	Insight
Total Pipeline Value	`SUM(estimated_value) WHERE stage ∉ {lost}`	Total potensi revenue
Won Value	`SUM(estimated_value) WHERE stage = won`	Revenue yang sudah diamankan
Weighted Forecast	`SUM(estimated_value × probability/100)`	Prediksi revenue berdasarkan probabilitas
Conversion Rate	`won_count / (won_count + lost_count) × 100%`	Efisiensi pipeline
Overdue Leads	`COUNT(expected_close_date < today AND stage ∉ {won, lost})`	Lead yang butuh perhatian segera

Stage Pipeline — 6 Tahap

Stage	Default Probability	Deskripsi	Aksi Utama
prospect	10%	Lead baru masuk, belum diverifikasi	Initial contact, qualification
qualified	25%	Kebutuhan & budget terkonfirmasi	Prepare proposal
proposal	50%	Proposal sudah dikirim	Follow up, present
negotiation	75%	Sedang negosiasi harga/term	Close deal
won	100%	Deal closed, revenue diamankan	Convert to customer
lost	0%	Deal gagal, tidak lanjut	Post-mortem, re-engage later

Lead Management

Operasi	Deskripsi	Implementasi
Create	Dialog form dengan semua field SalesPipeline	`useMutation(createSalesPipeline)`
Edit	Update data lead (termasuk stage transition)	`useMutation(updateSalesPipeline)`
Delete	Hapus lead dengan konfirmasi dialog	`useMutation(deleteSalesPipeline)`
Advance Stage	Pindah ke tahap berikutnya (drag-drop di Kanban)	`updateSalesPipeline({stage: next})`
Convert	Konversi lead won menjadi Customer	`convertLeadToCustomer(lead_id)`

Lead-to-Customer Conversion

Step	Aksi	Data Source
1	Cek duplikat berdasarkan email/nama	`Customer` entity
2a	Jika ada duplikat → link ke customer existing	`updateSalesPipeline({customer_id})`
2b	Jika tidak → buat customer baru	`createCustomer(lead_data)`
3	Update lead: stage = `won`, link `customer_id`	`updateSalesPipeline`
4	Invalidate cache → refresh UI	`queryClient.invalidateQueries`

Invoice Matching

Cross-reference Invoice entity berdasarkan nama/email pelanggan untuk menampilkan invoice yang terkait dengan lead:

Overdue Detection

Lead yang melewati expected_close_date dan belum won/lost ditandai sebagai overdue dengan badge merah:

Kondisi	Indikator	Aksi
`expected_close_date < today` AND `stage ∉ {won, lost}`	🔴 Red badge + “Overdue” label	Prioritize follow-up
`expected_close_date` within 3 days	🟡 Yellow badge + “Due Soon”	Schedule follow-up
`expected_close_date` > 3 days	🟢 Normal	On track

React Query Implementation

Hook	Purpose	Cache
`useQuery('salesPipelines')`	Fetch all leads	5 min staleTime
`useMutation(createSalesPipeline)`	Create lead	Invalidate on success
`useMutation(updateSalesPipeline)`	Update lead/stage	Invalidate on success
`useMutation(deleteSalesPipeline)`	Delete lead	Invalidate on success
`useMutation(convertLeadToCustomer)`	Convert lead	Invalidate both queries

Tips

Gunakan Kanban view untuk overview visual pipeline dan daily standup
Gunakan List view untuk sorting dan filtering detail, terutama saat volume lead tinggi
Monitor Weighted Forecast untuk prediksi revenue yang lebih akurat daripada total pipeline value
Review overdue leads setiap pagi — prioritaskan follow-up lead yang sudah melewati close date
Convert lead ke customer segera setelah deal closed agar data terpusat di CRM
Set probability yang realistis per stage — ini mempengaruhi akurasi weighted forecast
Gunakan lead_source untuk menganalisis channel mana yang paling efektif menghasilkan deal

Entity Schema — Sales Pipeline Management

ER Diagram

Tabel Schema — SalesPipeline

Field	Tipe	Required	Default	Enum / Format	Deskripsi
`company_id`	`string`	Ya	—	—	ID perusahaan pemilik pipeline
`lead_id`	`string`	Tidak	—	—	ID prospek/lead (referensi eksternal)
`lead_name`	`string`	Ya	—	—	Nama lengkap prospek
`lead_email`	`string`	Tidak	—	email	Alamat email prospek
`lead_phone`	`string`	Tidak	—	—	Nomor telepon prospek
`company_name`	`string`	Tidak	—	—	Nama perusahaan prospek (B2B)
`assigned_to`	`string`	Ya	—	—	ID sales person yang bertanggung jawab
`pipeline_stage`	`string`	Tidak	`"prospect"`	`prospect \| qualified \| proposal \| negotiation \| won \| lost`	Tahap saat ini dalam pipeline
`estimated_value`	`number`	Tidak	—	—	Perkiraan nilai deal (dalam `currency`)
`currency`	`string`	Tidak	`"IDR"`	ISO 4217	Mata uang estimasi nilai
`probability`	`number`	Tidak	`0`	0–100	Probabilitas konversi (%) — mempengaruhi weighted forecast
`expected_close_date`	`date`	Tidak	—	ISO 8601	Target tanggal penutupan deal
`actual_close_date`	`date`	Tidak	—	ISO 8601	Tanggal aktual deal ditutup (won/lost)
`source_lead`	`string`	Tidak	—	`website \| referral \| advertisement \| cold_call \| social_media \| event \| other`	Sumber asal prospek
`product_interest`	`array<string>`	Tidak	—	—	Daftar produk/jasa yang diminati prospek
`interaction_history`	`array<object>`	Tidak	—	—	Riwayat interaksi (call, email, meeting, message)
`next_action`	`string`	Tidak	—	—	Deskripsi aksi selanjutnya yang harus dilakukan
`next_action_date`	`date`	Tidak	—	ISO 8601	Tanggal rencana aksi selanjutnya
`notes`	`string`	Tidak	—	—	Catatan tambahan tentang lead/deal

Sub-object interaction_history[]:

Field	Tipe	Format	Deskripsi
`interaction_date`	`date`	ISO 8601	Tanggal interaksi
`interaction_type`	`string`	`call \| email \| meeting \| message`	Jenis interaksi
`notes`	`string`	—	Catatan hasil interaksi
`done_by`	`string`	—	ID user yang melakukan interaksi

Tabel Schema — Customer (Hasil Konversi Lead)

Field	Tipe	Required	Default	Enum / Format	Deskripsi
`company_id`	`string`	Ya	—	—	ID perusahaan
`name`	`string`	Ya	—	—	Nama customer
`email`	`string`	Tidak	—	email	Alamat email
`phone`	`string`	Ya	—	—	Nomor telepon
`whatsapp_number`	`string`	Tidak	—	—	Nomor WhatsApp untuk follow up
`company`	`string`	Tidak	—	—	Nama perusahaan customer
`address`	`string`	Tidak	—	—	Alamat lengkap
`customer_type`	`string`	Tidak	`"individual"`	`individual \| business \| retail \| reseller \| distributor \| modern_market`	Tipe customer
`status`	`string`	Tidak	`"lead"`	`lead \| prospect \| customer \| inactive`	Status lifecycle customer
`source`	`string`	Tidak	—	—	Sumber customer (ads, referral, walk-in, dll)
`lifetime_value`	`number`	Tidak	`0`	—	Total nilai transaksi sepanjang waktu
`total_orders`	`number`	Tidak	`0`	—	Jumlah total transaksi
`average_order_value`	`number`	Tidak	`0`	—	Rata-rata nilai per transaksi
`last_purchase_date`	`date`	Tidak	—	ISO 8601	Tanggal pembelian terakhir
`tags`	`array<string>`	Tidak	—	—	Label/tag kategorisasi customer

State Machine — Pipeline Management Workflow

Transisi Stage & Probabilitas Otomatis:

Dari Stage	Ke Stage	Trigger	Probability Change
—	`prospect`	Create lead baru	→ 10%
`prospect`	`qualified`	Verifikasi kebutuhan & budget	10% → 25%
`qualified`	`proposal`	Proposal dikirim ke prospek	25% → 50%
`proposal`	`negotiation`	Prospek masuk fase negosiasi	50% → 75%
`negotiation`	`won`	Deal closed, kontrak ditandatangani	75% → 100%
`prospect`	`lost`	Lead tidak qualify	→ 0%
`qualified`	`lost`	Budget/kebutuhan tidak cocok	→ 0%
`proposal`	`lost`	Proposal ditolak prospek	→ 0%
`negotiation`	`lost`	Negosiasi gagal	→ 0%

Sequence Diagram — Pipeline Analytics & Forecast Calculation

Sequence Diagram — Weighted Forecast Calculation

Enum Tables

`pipeline_stage` — Tahap Pipeline Penjualan

Nilai	Label	Probabilitas Default	Deskripsi
`prospect`	Prospect	10%	Lead baru masuk, belum diverifikasi kebutuhan dan budgetnya
`qualified`	Qualified	25%	Kebutuhan & budget terkonfirmasi, prospek layak dilanjutkan
`proposal`	Proposal	50%	Proposal/penawaran sudah dikirim ke prospek
`negotiation`	Negotiation	75%	Sedang dalam fase negosiasi harga dan ketentuan
`won`	Won	100%	Deal berhasil ditutup, revenue sudah diamankan
`lost`	Lost	0%	Deal gagal, prospek tidak lanjut (arsip untuk re-engage)

`source_lead` — Sumber Prospek

Nilai	Label	Deskripsi
`website`	Website	Prospek datang dari website perusahaan
`referral`	Referral	Referensi dari customer atau partner existing
`advertisement`	Advertisement	Dari kampanye iklan (digital/print)
`cold_call`	Cold Call	Hasil dari outbound calling
`social_media`	Social Media	Dari platform media sosial
`event`	Event	Dari event, seminar, atau pameran
`other`	Lainnya	Sumber lainnya

`interaction_type` — Jenis Interaksi

Nilai	Label	Deskripsi
`call`	Telepon	Interaksi melalui panggilan telepon
`email`	Email	Interaksi melalui email
`meeting`	Meeting	Pertemuan tatap muka atau virtual meeting
`message`	Pesan	Interaksi melalui chat/pesan (WhatsApp, dll)

`forecast_method` — Metode Forecast (Konseptual)

Metode	Formula	Kapan Digunakan
Weighted Pipeline	`SUM(estimated_value × probability/100)`	Default — semua stage aktif
Stage-Value	`SUM(estimated_value) WHERE stage = won`	Konservatif — hanya yang sudah won
Total Pipeline	`SUM(estimated_value) WHERE stage ∉ {lost}`	Optimis — seluruh potensi revenue
Conversion-Based	`total_leads × avg_conversion_rate × avg_deal_value`	Perencanaan jangka panjang

RBAC — Hak Akses Sales Pipeline

Role	Create Lead	Read Pipeline	Update Lead	Delete Lead	Convert to Customer	View All Team Leads
Admin	✅ Full access	✅ Semua data	✅ Semua data	✅ Semua data	✅	✅
Manager	✅	✅ Semua data (company-scoped)	✅	✅	✅	✅
Sales Person	✅	✅ Milik sendiri + company	✅ Milik sendiri	✅ Milik sendiri	✅	❌
Staff	❌	✅ Milik sendiri	❌	❌	❌	❌

Row-Level Security (RLS) Rules:

Operasi	Kondisi	Keterangan
Create	`company_id = user.active_company_id` AND `company_id ∉ {null, ""}`	Harus dalam perusahaan aktif
Read	`company_id = user.active_company_id` OR `created_by_id = user.id` OR `role = admin`	Company-scoped + creator + admin
Update	`company_id = user.active_company_id` OR `created_by_id = user.id` OR `role = admin`	Company-scoped + creator + admin
Delete	`company_id = user.active_company_id` OR `created_by_id = user.id` OR `role = admin`	Company-scoped + creator + admin

​title: “Sales Pipeline Management — Manajemen Pipeline Lanjutan” description: “SalesPipelineManagement.jsx (963 baris) — dual view (Kanban + List), 5 KPI metrics bar, 6-stage pipeline, lead CRUD via React Query, lead-to-customer conversion, dan overdue detection.”

​Sales Pipeline Management — Manajemen Pipeline Lanjutan

​Arsitektur Komponen

​Perbedaan dengan Embedded Pipeline

​Akses Halaman

​Fitur Utama

​Dual View Mode

​Metrics Bar — 5 KPI Real-Time

​Stage Pipeline — 6 Tahap

​Lead Management

​Lead-to-Customer Conversion

​Invoice Matching

​Overdue Detection

​React Query Implementation

​Tips

​Entity Schema — Sales Pipeline Management

​ER Diagram

​Tabel Schema — SalesPipeline

​Tabel Schema — Customer (Hasil Konversi Lead)

​State Machine — Pipeline Management Workflow

​Sequence Diagram — Pipeline Analytics & Forecast Calculation

​Sequence Diagram — Weighted Forecast Calculation

​Enum Tables

​pipeline_stage — Tahap Pipeline Penjualan

​source_lead — Sumber Prospek

​interaction_type — Jenis Interaksi

​forecast_method — Metode Forecast (Konseptual)

​RBAC — Hak Akses Sales Pipeline