Lanjut ke konten
Samkarsa Logbook

Ketik untuk mencari…

↑↓untuk navigasi
Esc

jualan v1.5.0-055 : Visual Diagram Mermaid, Quick Starters, Pinned Insights & SmartNote Autocomplete Dropdown

Implementasi rendering visual diagram Mermaid interaktif SVG (dual view, zoom, fullscreen, PNG export), 4 kartu Quick Starter, fitur Bookmark/Pinned Insights di Vibes Chat, serta perbaikan custom interactive autocomplete popover produk & UOM di SmartNote ParsePreview.

2mnt baca

Pembaruan ini berfokus pada peningkatan antarmuka visual Vibes Chat & AI Financial Co-Pilot agar representasi diagram alur bisnis dapat langsung dirender secara visual, penambahan akses cepat analitik, serta perbaikan sistem dropdown autocomplete pada SmartNote ParsePreview.

  • Integrasi Pustaka Mermaid: Mengintegrasikan engine mermaid pada VibesChat.tsx untuk mengonversi blok kode diagram alur, arsitektur, dan relasi transaksi menjadi diagram grafis SVG visual interaktif secara real-time.
  • Dukungan Tema Otomatis: Warna diagram otomatis menyelaraskan diri dengan mode aktif (Dark Mode / Light Mode) melalui hook useTheme.
  • Dual-View Switcher: Menyediakan tab switch instan antara tab “Visual” (tampilan grafis intuitif) dan tab “Kode” (melihat sumber teks sintaks asli).
  • Kontrol Zoom & Fullscreen Modal:
    • Tombol Zoom In (+), Zoom Out (-), dan Reset Zoom dari 50% hingga 300%.
    • Modal Fullscreen Preview melayang dengan latar backdrop blur untuk memeriksa diagram kompleks pada layar lebar.
  • Ekspor Gambar Multi-Format: Tombol ekspor satu klik untuk mengunduh gambar resolusi tinggi PNG (via HTML5 Canvas) dan vektor SVG.

  • Menyediakan 4 kartu pemicu analisis cerdas saat obrolan baru/kosong:
    1. 💰 Arus Kas & Saldo Toko: Posisi kas, bank, dan estimasi laba kotor berjalan.
    2. 🔀 Diagram Alur Jurnal: Visualisasi alur pencatatan dari nota fisik ke buku besar hingga kas keluar.
    3. ⚠️ Utang & Piutang Berjalan: Ringkasan utang supplier dan piutang pelanggan aktif.
    4. 📊 Visual Proporsi Beban: Grafik pembagian pos-pos biaya operasional bulan berjalan.
  • Mengirimkan prompt analitik secara instan cukup dengan satu klik tanpa perlu mengetik manual.

  • Pin Toggle pada Bubble Asisten: Pengguna dapat menandai respons analitik penting dengan ikon Bookmark/Pin.
  • Highlight Visual & Persistensi: Pesan yang disematkan mendapatkan border keemasan dan tersimpan ke local storage per sesi percakapan.
  • Filter Top Bar: Tombol “Disematkan (N)” pada header bar untuk menyaring tampilan khusus insight yang di-pin.

  • Masalah: Tag HTML <datalist> bawaan browser tidak membuka dropdown popup saat kolom diklik/difokuskan, serta tidak melakukan auto-fill satuan dan harga modal dari katalog.
  • Solusi: Mengganti <datalist> dengan Custom Interactive Autocomplete Popover pada ParsePreview.tsx:
    • Dropdown otomatis muncul saat kolom nama barang diklik, difokuskan, atau diketik, lengkap dengan pencarian fuzzy (Nama, SKU, Barcode).
    • Auto-Fill Pintar: Saat produk katalog dipilih, sistem langsung mengisi nama barang, satuan UOM default, dan harga satuan modal/beli, lalu mengkalkulasi ulang total baris & transaksi.
    • Dropdown Satuan (UOM): Menu pilihan cepat untuk satuan-satuan umum (pcs, kg, dus, pack, btl, karton, sak, bal, dll.).
    • Hapus Baris (Trash2): Tombol hapus baris item yang tidak diperlukan.

  • Build Frontend: pnpm --filter blonjo-ui build berhasil (Clean 0 Errors).
  • Deployment VPS: Berhasil di-deploy ke server produksi (./deploy.sh blonjo-ui sajen-api) dengan status Healthy & Active.