# Dashboard Bukti Asal Berbasis Mermaid Interaktif untuk Audit Kuesioner Real‑Time

## Pendahuluan  

Kuesioner keamanan, audit kepatuhan, dan penilaian risiko vendor secara tradisional menjadi hambatan bagi perusahaan SaaS yang bergerak cepat. Meskipun AI dapat menyusun jawaban dalam hitungan detik, auditor dan peninjau internal tetap bertanya, *“Dari mana jawaban itu berasal? Apakah sudah berubah sejak audit terakhir?”* Jawabannya terletak pada **bukti asal**—kemampuan melacak setiap respons kembali ke sumber, versi, dan jejak persetujuannya.

Fitur generasi selanjutnya dari Procurize memperkenalkan **dashboard interaktif Mermaid** yang memvisualisasikan bukti asal secara real‑time. Dashboard ini didukung oleh **Dynamic Compliance Knowledge Graph (DCKG)**, yang terus disinkronkan dengan penyimpanan kebijakan, repositori dokumen, dan umpan kepatuhan eksternal. Dengan merender grafik sebagai diagram Mermaid yang intuitif, tim keamanan dapat:

* **Menelusuri** jejak setiap jawaban hanya dengan satu klik.  
* **Memvalidasi** kesegaran bukti melalui peringatan otomatis kebijakan‑drift.  
* **Mengekspor** snapshot siap‑audit yang menyematkan bukti visual ke dalam laporan kepatuhan.  

Bagian‑bagian berikut menguraikan arsitektur, model Mermaid, pola integrasi, dan langkah‑langkah penerapan terbaik.

---

## 1. Mengapa Asal Bukti Penting dalam Kuesioner Otomatis  

| Masalah | Solusi Tradisional | Risiko Residual |
|---------|--------------------|-----------------|
| **Kedaluwarsa Jawaban** | Catatan “last‑updated” manual | Perubahan kebijakan terlewat |
| **Sumber Tidak Jelas** | Catatan kaki teks | Auditor tidak dapat memverifikasi |
| **Kekacauan Versi** | Repo Git terpisah untuk dokumen | Snapshot tidak konsisten |
| **Beban Kolaborasi** | Thread email untuk persetujuan | Persetujuan hilang, pekerjaan ganda |

Asal bukti menghilangkan celah‑celah ini dengan **mengikat setiap jawaban yang dihasilkan AI ke node bukti unik** dalam grafik yang mencatat:

* **Dokumen Sumber** (file kebijakan, attestation pihak ketiga, bukti kontrol)  
* **Hash Versi** (sidik kriptografis yang menjamin keutuhan)  
* **Pemilik / Penyetuju** (identitas manusia atau bot)  
* **Timestamp** (waktu UTC otomatis)  
* **Flag Kebijakan‑Drift** (dihasilkan otomatis oleh Real‑Time Drift Engine)

Saat auditor mengklik sebuah jawaban di dashboard, sistem langsung memperluas node tersebut, menampilkan semua metadata di atas.

---

## 2. Arsitektur Inti  

Berikut diagram Mermaid tingkat tinggi dari pipeline bukti asal. Diagram menggunakan **label node ber‑kutip ganda** sesuai spesifikasi.

```mermaid
graph TD
    subgraph AI Engine
        A["LLM Answer Generator"]
        B["Prompt Manager"]
    end
    subgraph Knowledge Graph
        KG["Dynamic Compliance KG"]
        V["Evidence Version Store"]
        D["Drift Detection Service"]
    end
    subgraph UI Layer
        UI["Interactive Mermaid Dashboard"]
        C["Audit Export Service"]
    end
    subgraph Integrations
        R["Policy Repo (Git)"]
        S["Document Store (S3)"]
        M["External Compliance Feed"]
    end

    B --> A
    A --> KG
    KG --> V
    V --> D
    D --> KG
    KG --> UI
    UI --> C
    R --> V
    S --> V
    M --> KG
```

**Alur utama**

1. **Prompt Manager** memilih prompt yang sadar konteks dan merujuk pada node KG yang relevan.  
2. **LLM Answer Generator** menghasilkan jawaban draf.  
3. Jawaban **didaftarkan** ke KG sebagai *Answer Node* baru yang terhubung ke *Evidence Nodes* dasar.  
4. **Evidence Version Store** menulis hash kriptografis dari tiap dokumen sumber.  
5. **Drift Detection Service** terus membandingkan hash yang disimpan dengan snapshot kebijakan terkini; setiap ketidakcocokan secara otomatis menandai jawaban untuk ditinjau.  
6. **Interactive Dashboard** membaca KG lewat endpoint GraphQL, merender kode Mermaid secara dinamis.  
7. **Audit Export Service** mengemas SVG Mermaid saat ini, JSON bukti, dan teks jawaban ke dalam satu paket PDF.

---

## 3. Membuat Dashboard Mermaid  

### 3.1 Transformasi Data‑ke‑Diagram  

Lapisan UI men‑query KG untuk ID kuesioner tertentu. Respons mencakup struktur bersarang:

```json
{
  "questionId": "Q-101",
  "answer": "We encrypt data at rest using AES‑256.",
  "evidence": [
    {
      "docId": "policy-iso27001",
      "versionHash": "0x9f2c...",
      "approvedBy": "alice@example.com",
      "timestamp": "2025-11-20T14:32:00Z",
      "drift": false
    },
    {
      "docId": "cloud‑kbs‑report",
      "versionHash": "0x4c1a...",
      "approvedBy": "bob@example.com",
      "timestamp": "2025-09-05T09:10:00Z",
      "drift": true
    }
  ]
}
```

**Renderer sisi klien** mengubah tiap entri bukti menjadi sub‑grafik Mermaid:

```mermaid
graph LR
    A["Answer Q‑101"] --> E1["policy‑iso27001"]
    A --> E2["cloud‑kbs‑report"]
    E1 -->|hash: 0x9f2c| H1["Hash"]
    E2 -->|hash: 0x4c1a| H2["Hash"]
    E2 -->|drift| D["⚠️ Drift Detected"]
```

UI menambahkan indikasi visual:

* **Node hijau** – bukti terkini.  
* **Node merah** – drift terdeteksi.  
* **Ikon gembok** – hash kriptografis terverifikasi.

> **Catatan:** Referensi *policy‑iso27001* sesuai standar ISO 27001 — lihat spesifikasi resmi untuk detailnya: [ISO 27001](https://www.iso.org/standard/27001).

### 3.2 Fitur Interaktif  

| Fitur | Interaksi | Hasil |
|-------|-----------|-------|
| **Klik Node** | Klik pada node bukti mana pun | Membuka modal dengan pratinjau dokumen penuh, perbedaan versi, dan komentar persetujuan |
| **Alih Tampilan Drift** | Saklar di toolbar | Menyorot hanya node dengan `drift = true` |
| **Ekspor Snapshot** | Klik tombol “Export” | Menghasilkan bundel SVG + JSON bukti untuk auditor |
| **Pencarian** | Ketik ID dokumen atau email pemilik | Fokus otomatis pada sub‑grafik yang cocok |

Semua interaksi berlangsung **di sisi klien**, menghindari putaran jaringan tambahan. Kode Mermaid yang dihasilkan disimpan dalam `<textarea>` tersembunyi untuk memudahkan salin‑tempel.

---

## 4. Mengintegrasikan Bukti Asal ke Alur Kerja yang Ada  

### 4.1 Gerbang Kepatuhan CI/CD  

Tambahkan langkah dalam pipeline yang **gagal membangun** bila ada flag drift yang belum terselesaikan. Contoh GitHub Action:

```yaml
name: Evidence Provenance Gate
on: [pull_request]
jobs:
  provenance-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run Drift Scanner
        run: |
          curl -s https://api.procurize.io/drift?pr=${{ github.event.pull_request.number }} \
          | jq '.drifted | length > 0' && exit 1 || exit 0
```

### 4.2 Peringatan Slack / Teams  

Konfigurasikan **Drift Detection Service** untuk mengirim **snippet Mermaid** singkat ke saluran ketika drift muncul. Bot yang mendukung akan merender snippet secara otomatis, memberi tim keamanan visibilitas instan.

### 4.3 Otomatisasi Tinjauan Hukum  

Tim legal dapat menambahkan edge **“Legal Sign‑Off”** ke node bukti. Dashboard kemudian menampilkan ikon gembok di node tersebut, menandakan bukti telah melewati checklist hukum.

---

## 5. Pertimbangan Keamanan & Privasi  

| Kekhawatiran | Mitigasi |
|--------------|----------|
| **Paparan Dokumen Sensitif** | Simpan dokumen mentah di bucket S3 terenkripsi; dashboard hanya menampilkan metadata dan hash, bukan isi file. |
| **Pemalsuan Data Bukti** | Gunakan tanda tangan bergaya **EIP‑712** untuk tiap transaksi grafik; setiap modifikasi membatalkan hash. |
| **Residensi Data** | Deploy KG dan penyimpanan bukti di region yang sama dengan data kepatuhan utama (EU, US‑East, dsb.). |
| **Kontrol Akses** | Manfaatkan model RBAC Procurize: hanya pengguna dengan `provenance:read` yang dapat melihat dashboard; `provenance:edit` diperlukan untuk persetujuan. |

---

## 6. Dampak Nyata: Studi Kasus  

**Perusahaan:** SecureFinTech Ltd.  
**Skenario:** Audit **[SOC 2](https://secureframe.com/hub/soc-2/what-is-soc-2/)** triwulanan menuntut bukti untuk 182 kontrol enkripsi.  
**Sebelum Dashboard:** Pengumpulan manual memakan 12 hari; auditor meragukan kesegaran bukti.  
**Setelah Dashboard:**  

| Metik | Sebelum | Dengan Dashboard |
|-------|---------|------------------|
| Rata‑rata Waktu Menjawab | 4,2 jam | **1,1 jam** |
| Re‑work terkait Drift | 28 % jawaban | **3 %** |
| Skor Kepuasan Auditor (1‑5) | 2,8 | **4,7** |
| Waktu Ekspor Paket Audit | 6 jam | **45 menit** |

Visualisasi bukti asal memotong waktu persiapan audit sebesar **70 %**, dan peringatan drift otomatis menghemat perkiraan **160 jam orang per tahun**.

---

## 7. Panduan Implementasi Langkah‑per‑Langkah  

1. **Aktifkan Sinkronisasi Knowledge Graph** – Hubungkan repo kebijakan Git, penyimpanan dokumen, dan umpan kepatuhan eksternal di pengaturan Procurize.  
2. **Nyalakan Layanan Bukti Asal** – Aktifkan “Evidence Versioning & Drift Detection” di konsol admin platform.  
3. **Konfigurasikan Dashboard Mermaid** – Tambahkan `dashboard.provenance.enabled = true` ke file konfigurasi `procurize.yaml`.  
4. **Definisikan Alur Persetujuan** – Gunakan “Workflow Builder” untuk menambahkan langkah “Legal Sign‑Off” dan “Security Owner” pada tiap node bukti.  
5. **Latih Tim** – Selenggarakan demo 30 menit yang mencakup interaksi node, penanganan drift, dan prosedur ekspor.  
6. **Sematkan di Portal Auditor** – Pakai snippet IFrame berikut untuk menampilkan dashboard di portal audit eksternal.  

```html
<iframe src="https://dashboard.procurize.io/q/2025-Q101"
        width="100%" height="800"
        style="border:none;"></iframe>
```

7. **Pantau Metik** – Lacak “Drift Events”, “Export Count”, dan “Avg. Answer Time” di dashboard analitik Procurize untuk mengukur ROI.

---

## 8. Peningkatan Mendatang  

| Item Roadmap | Deskripsi |
|--------------|-----------|
| **Prediksi Drift Berbasis AI** | Gunakan analisis tren berbasis LLM pada log perubahan kebijakan untuk memprediksi drift sebelum terjadi. |
| **Berbagi Bukti Asal Lintas‑Tenant** | Mode KG federasi yang memungkinkan perusahaan mitra melihat bukti bersama tanpa mengekspos dokumen mentah. |
| **Navigasi Suara** | Integrasi dengan Procurize Voice Assistant sehingga peninjau dapat bertanya “Tunjukkan sumber jawaban 34”. |
| **Kolaborasi Live** | Penyuntingan multi‑pengguna real‑time pada node bukti, dengan indikator keberadaan yang dirender langsung di Mermaid. |

---

## 9. Kesimpulan  

**Dashboard bukti asal berbasis Mermaid interaktif** dari Procurize mengubah dunia yang selama ini tidak transparan dalam otomatisasi kuesioner keamanan menjadi pengalaman yang dapat dilihat, diaudit, dan diajak berkolaborasi. Dengan menggabungkan jawaban yang dihasilkan AI dengan grafik‑pengetahuan kepatuhan yang hidup, organisasi memperoleh **visibilitas jejak instan**, **mitigasi drift otomatis**, dan **artefak siap audit**—tanpa mengorbankan kecepatan.

Mengadopsi lapisan visual bukti asal ini tidak hanya memperpendek siklus audit, tetapi juga membangun kepercayaan di antara regulator, mitra, dan pelanggan bahwa klaim keamanan Anda **didukung oleh bukti yang immutable dan real‑time**.