# Ringkasan Konteks Pengembangan Fitur Katalog Drawer - Penawaran (Estimates)

Dokumen ini mencatat seluruh perubahan, struktur kode, dan logika bisnis yang telah diimplementasikan dalam topik pengembangan panel Drawer untuk pemilihan produk cepat pada modul Penawaran (Estimates). Dokumen ini ditujukan untuk melanjutkan topik ini di masa mendatang.

---

## 1. Daftar Berkas yang Dimodifikasi

### A. Backend (CRM & Data Center API)
*   **[Estimates.php](file:///w:/san_ibb_2jul/app/Controllers/Estimates.php):**
    *   Mengintegrasikan pengambilan data stok langsung via cURL ke API Data Center (`/eusvc/Products/seeItemAll/id/`) dalam fungsi `get_estimate_item_info_suggestion()`.
    *   Menambahkan method `get_cart_restriction_ajax()` untuk mengembalikan batasan keranjang (`paket` vs `non-paket`), daftar ID item terpilih (`existing_item_ids`), dan pemetaan ID transaksi (`item_to_tx_map`) secara real-time.
*   **[Invoice_items_model.php](file:///w:/san_ibb_2jul/app/Models/Invoice_items_model.php):**
    *   Menambahkan field `$items_table.rate` pada kueri `get_item_suggestion`.
*   **[Products.php](file:///w:/san_28jun/application/controllers/eusvc/Products.php):**
    *   *(Data Center API)* Menambahkan parameter kueri `jenis` (`paket` atau `non-paket`) pada endpoint `/seeItemAll_get` untuk penyaringan langsung di tingkat database (SQL).

### B. Frontend (CRM)
*   **[details.php](file:///w:/san_ibb_2jul/app/Views/estimates/details.php):**
    *   Menambahkan tombol **"Buka Katalog"** (`#btn-open-catalog-drawer`) tepat di samping tombol "+ Tambah produk".
*   **[item_modal_form.php](file:///w:/san_ibb_2jul/app/Views/estimates/item_modal_form.php):**
    *   Mendesain ulang card preview modal di panel kanan (`col-md-5`) dengan gaya kartu katalog Store.
    *   Menerapkan *Background Hydration* agar data dari database lokal dimuat instan terlebih dahulu, lalu di-refresh halus dengan stok live dari Data Center.
*   **[view.php](file:///w:/san_ibb_2jul/app/Views/estimates/view.php):**
    *   Membuat markup HTML untuk panel Drawer (`#catalog-drawer`) dan backdrop overlay gelap (`#catalog-drawer-backdrop`).
    *   Menyusun CSS styling lengkap (animasi *slide-in*, scroll horizontal kategori/pills, dan styling kartu produk `.card-mode2` beserta efek hover).
    *   Mengimplementasikan logika Javascript lengkap untuk:
        1.  Membuka/menutup Drawer, me-load pills kategori, dan merender grid produk langsung dari API Data Center.
        2.  Menerapkan filter jenis produk (`paket` vs `non-paket`) di tingkat database API menggunakan parameter `jenis` guna memecahkan isu pemotongan data limit (`limit/40`).
        3.  Mengatur highlight visual pada produk yang sudah masuk keranjang: background kartu menjadi hijau lembut (`#f4faf6`), border hijau (`#c1ebd0`), dan menampilkan badge **`✓ Di Keranjang`** serta tombol aksi **`Tambah Lagi`** & **`Hapus`** (merah).
        4.  Pencegahan kondisi balapan (*Anti-Race Condition*) dengan mematikan seluruh tombol aksi saat ada satu produk yang sedang diproses.
        5.  Scroll isolation (`overscroll-behavior: contain`) dan logika *Scroll Forwarding* pada area backdrop agar scroll wheel mouse dapat menggeser halaman utama jika diarahkan ke sisi kiri.
        6.  Tombol pembersih pencarian (`×`) secara dinamis di dalam kolom input pencarian.

---

## 2. Alur Kerja Logika Bisnis & Teknis

```mermaid
graph TD
    A[Buka Katalog] --> B[Ambil Status Pembatasan & Keranjang Aktif via AJAX]
    B --> C[Set Variabel cartRestriction & existingCartItemMap]
    C --> D[Panggil API Data Center /seeItemAll dengan parameter jenis]
    D --> E[Render Grid Produk di Drawer]
    E --> F{Apakah Produk ada di Keranjang?}
    F -- Ya --> G[Beri Highlight Hijau + Tampilkan Badge Di Keranjang + Tombol Tambah Lagi & Hapus]
    F -- Tidak --> H[Tampilkan Kartu Standar Putih + Tombol Tambah]
```

### Detail Mekanisme Penting:
1.  **Scroll Pointer Tracking (Dual Scroll):**
    *   Ketika kursor mouse berada di dalam Drawer, roda scroll mouse hanya akan menggulirkan Drawer. Jika scroll mentok ke atas/bawah, event scroll diblokir agar halaman utama tidak ikut bergeser.
    *   Ketika kursor mouse berada di luar Drawer (di atas backdrop sebelah kiri), event scroll ditangkap oleh JS dan diteruskan untuk menggulirkan halaman utama di belakang backdrop secara mulus.
2.  **Penanganan Keranjang Kosong:**
    *   Jika keranjang kosong, user bebas menambahkan produk Paket atau reguler.
    *   Begitu klik pertama berhasil masuk, server mengunci tipe dokumen penawaran. AJAX callback langsung me-refresh status Drawer, menyembunyikan produk bertipe kontradiktif, dan memperbarui banner status aturan di bagian atas.
    *   Seluruh tombol dinonaktifkan sementara selama AJAX penyimpanan atau penghapusan berjalan untuk mencegah *race condition*.

---

## 3. Langkah Selanjutnya & Pengujian
1.  **Verifikasi Pencarian:** Cari produk paket menggunakan kata kunci umum seperti `"pintu"` dan pastikan produk seperti *"Cabinet pintu ayun kaca"* (ID 833) langsung muncul paling atas.
2.  **Verifikasi Penghapusan:** Coba klik tombol **`Hapus`** (merah) pada Drawer, dan pastikan item tersebut lenyap dari tabel utama di kiri serta status visual kartu di Drawer kembali menjadi tombol **`Tambah`** (biru) dengan latar belakang putih.
3.  **Verifikasi Scroll:** Posisikan mouse bergantian di sisi kiri (halaman penawaran) dan sisi kanan (Drawer) untuk memastikan fokus scroll bergerak secara natural dan akurat.