Instruksi Pembuatan Diagram untuk Dokumentasi

Untuk melengkapi dokumentasi, berikut adalah spesifikasi diagram yang perlu dibuat.

📁 Lokasi File

Semua diagram disimpan di:

public/images/docs/

🎨 Style Guide

Warna

Gunakan color coding konsisten:

Font

• Judul: Roboto Bold, 16px
• Label: Roboto Regular, 12px
• Keterangan: Roboto Light, 10px

Icon

Gunakan Material Icons atau Font Awesome untuk konsistensi.

📊 Diagram 1: Complaint Flow - Complete Cycle

Filename: complaint-flow-complete.png
Size: 1200x1600px
Format: PNG dengan background transparan

Struktur:

┌─────────────────────────────────────────┐
│         PENGAJUAN COMPLAINT              │
│  ┌──────────┐        ┌──────────┐       │
│  │ Internal │        │  Public  │       │
│  └────┬─────┘        └────┬─────┘       │
│       └──────────┬─────────┘             │
└──────────────────┼───────────────────────┘
                   ↓
┌─────────────────────────────────────────┐
│      REVIEW & VALIDASI ADMIN             │
│         (Orange Box)                     │
└──────────────────┬──────────────────────┘
                   ↓
            ┌──────┴──────┐
            │   Urgent?   │ (Decision Diamond)
            └──┬────────┬─┘
         YES   │        │ NO
               ↓        ↓
    ┌──────────────┐  ┌────────────────┐
    │ JALUR URGENT │  │  JALUR NORMAL  │
    │  (Red Path)  │  │  (Blue Path)   │
    └──────┬───────┘  └────────┬───────┘
           │                   ↓
           │          ┌─────────────────┐
           │          │ SCHEDULE MEETING│
           │          └────────┬────────┘
           │                   ↓
           │          ┌─────────────────┐
           │          │  PEMBAHASAN DI  │
           │          │      RAPAT      │
           │          └────────┬────────┘
           │                   ↓
           │            ┌──────┴──────┐
           │            │  Keputusan? │
           │            └──┬────┬───┬─┘
           │         Resolved│ │Postponed
           │               ↓ │ │
           │               │ │ └──→ (Loop back)
           │               │ │
           │               │ └──→ REJECTED (End)
           │               ↓
           └──────→ ┌─────────────────┐
                    │ COMPLAINT ACTIONS│
                    │  (Purple Box)    │
                    └────────┬─────────┘
                             ↓
                    ┌─────────────────┐
                    │  CREATE TASK    │
                    └────────┬────────┘
                             ↓
                    ┌─────────────────┐
                    │  EKSEKUSI TASK  │
                    │  (Green Box)    │
                    └────────┬────────┘
                             ↓
                    ┌─────────────────┐
                    │ TASK COMPLETED  │
                    └────────┬────────┘
                             ↓
                    ┌─────────────────┐
                    │ VERIFIKASI ADMIN│
                    └────────┬────────┘
                             ↓
                    ┌─────────────────┐
                    │ COMPLAINT CLOSED│
                    │  (Dark Green)   │
                    └─────────────────┘

Label Bahasa Indonesia:

• Pengajuan Complaint
• Review & Validasi Admin
• Jalur Urgent / Jalur Normal
• Jadwalkan Rapat
• Pembahasan di Rapat
• Keputusan: Disetujui/Ditunda/Ditolak
• Complaint Actions
• Buat Tugas
• Eksekusi Tugas
• Tugas Selesai
• Verifikasi Admin
• Complaint Ditutup

📊 Diagram 2: Meeting Workflow

Filename: meeting-workflow.png
Size: 1000x800px

Struktur:

CREATE MEETING
      ↓
ADD AGENDA
  ├─ Add Complaints
  └─ Add Custom Topics
      ↓
START MEETING
      ↓
DISCUSS EACH ITEM
  ├─ Toggle "Discussed"
  ├─ Fill Discussion Notes
  └─ Set Decision
      ↓
FINISH MEETING
      ↓
AUTO UPDATE
  ├─ Resolved → Complaint Actions
  ├─ Postponed → Next Meeting
  └─ Rejected → Closed
      ↓
MEETING REPORT
  ├─ Preview
  ├─ Download (Excel/PDF)
  └─ Upload Documentation

📊 Diagram 3: Task Workflow

Filename: task-workflow.png
Size: 1000x1200px

Struktur:

COMPLAINT ACTIONS
      ↓
SELECT COMPLAINTS
      ↓
CREATE TASK
  ├─ Set Title & Description
  ├─ Assign PIC
  ├─ Set Priority
  └─ Set Deadline
      ↓
TASK CREATED
  Status: Pending
      ↓
PIC: START TASK
  Status: In Progress
      ↓
WORK ON TASK
  ├─ Upload Progress Photos
  ├─ Update Notes
  └─ Update Status per Complaint
      ↓
COMPLETE TASK
  ├─ All items completed
  ├─ Upload evidence
  └─ Fill completion notes
      ↓
ADMIN VERIFICATION
      ↓
  ┌───┴───┐
APPROVE  REJECT
  ↓       ↓
DONE   REVISE

📊 Diagram 4: Status Transition

Filename: status-transition.png
Size: 1200x800px

Struktur:

Buat state diagram dengan semua status:

States:

• PENDING (Yellow)
• SCHEDULED (Blue)
• IN_DISCUSSION (Blue)
• POSTPONED (Gray)
• NEED_ACTION (Red)
• RESOLVED (Purple)
• REJECTED (Red)
• CLOSED (Green)

Transitions (dengan arrow dan kondisi):

• PENDING → SCHEDULED (Admin add to meeting)
• PENDING → NEED_ACTION (Admin mark urgent)
• PENDING → REJECTED (Admin reject)
• SCHEDULED → IN_DISCUSSION (Meeting started)
• IN_DISCUSSION → RESOLVED (Decision: resolved)
• IN_DISCUSSION → POSTPONED (Decision: postponed)
• IN_DISCUSSION → REJECTED (Decision: rejected)
• POSTPONED → SCHEDULED (Add to next meeting)
• NEED_ACTION → IN_DISCUSSION (Task created)
• RESOLVED → CLOSED (Admin close)

🛠️ Tools yang Direkomendasikan

1. Draw.io (diagrams.net)

• Free & Open Source
• Export: PNG, SVG, PDF
• Template: Flowchart, UML
• Link: https://app.diagrams.net/

2. Lucidchart

• Professional
• Collaboration: Real-time
• Link: https://www.lucidchart.com/

3. Mermaid (Code-based)

• Markdown-friendly
• Version control: Git-friendly
• Link: https://mermaid.js.org/

4. Figma

• Design tool
• Collaboration: Excellent
• Link: https://www.figma.com/

📝 Checklist Pembuatan Diagram

Untuk setiap diagram, pastikan:

• Menggunakan color coding yang konsisten
• Label dalam Bahasa Indonesia
• Font readable (minimal 12px)
• Icon konsisten (Material Icons/Font Awesome)
• Background transparan (untuk PNG)
• Resolusi tinggi (minimal 1000px width)
• Export dalam format PNG dan SVG
• Simpan source file (.drawio, .fig, dll)

📂 Struktur Folder

public/
└── images/
    └── docs/
        ├── complaint-flow-complete.png
        ├── complaint-flow-complete.svg
        ├── complaint-flow-normal.png
        ├── complaint-flow-urgent.png
        ├── meeting-workflow.png
        ├── task-workflow.png
        ├── status-transition.png
        └── source/
            ├── complaint-flow-complete.drawio
            ├── meeting-workflow.drawio
            └── task-workflow.drawio

🔗 Referensi Diagram di Dokumentasi

Setelah diagram dibuat, update file markdown dengan:

![Complaint Flow Complete](/images/docs/complaint-flow-complete.png)

Atau untuk responsive:

<img src="/images/docs/complaint-flow-complete.png" alt="Complaint Flow Complete" style="max-width: 100%; height: auto;">

✅ Next Steps

1. Buat diagram menggunakan tool pilihan
2. Export ke PNG (dan SVG jika memungkinkan)
3. Simpan di public/images/docs/
4. Update dokumentasi dengan link gambar
5. Commit ke repository

Dibuat: 1 Desember 2024
Maintainer: Tim Pengembang Wargaku