Files
ProjectKP/docs/diagrams_mermaid.md
T
2026-06-28 15:14:51 +07:00

9.1 KiB

Codingan Diagram (Mermaid) Lengkap - Sistem Monitoring Penugasan

Anda dapat menyalin (copy) kode-kode di bawah ini ke dalam Mermaid Live Editor (https://mermaid.live/) atau Draw.io (Insert > Advanced > Mermaid) untuk menjadikannya gambar.


1. Usecase Diagram Lengkap (Termasuk CRUD)

Menggambarkan interaksi menyeluruh dari autentikasi, CRUD data, hingga ekspor.

usecaseDiagram
    actor Pegawai
    actor Admin
    actor "Super Admin" as SA

    rectangle "Sistem Monitoring Penugasan" {
        %% Autentikasi
        usecase "Melakukan Login & Logout" as Auth
        usecase "Mengelola Profil Diri" as Profil
        
        %% CRUD Kegiatan
        usecase "Melihat Daftar Kegiatan (Read)" as CRUD_R
        usecase "Menambah Laporan Baru (Create)" as CRUD_C
        usecase "Mengubah Laporan (Update)" as CRUD_U
        usecase "Menghapus/Membatalkan Laporan (Delete)" as CRUD_D
        
        %% Tindakan Lanjutan
        usecase "Meninjau Kegiatan (Ubah ke Ditinjau)" as Review
        usecase "Menyetujui Kegiatan (Ubah ke Selesai)" as Approve
        usecase "Melihat Statistik Dashboard" as Dash
        
        %% CRUD Pengguna
        usecase "Manajemen Akun User & Pegawai (CRUD)" as KelolaUser
        usecase "Mengekspor Laporan Excel" as Export
    }

    Pegawai --> Auth
    Pegawai --> Profil
    Pegawai --> CRUD_R
    Pegawai --> CRUD_C
    Pegawai --> CRUD_U

    Admin --> Auth
    Admin --> Profil
    Admin --> Dash
    Admin --> CRUD_R
    Admin --> Review
    Admin --> KelolaUser

    SA --> Auth
    SA --> Profil
    SA --> Dash
    SA --> CRUD_R
    SA --> Approve
    SA --> CRUD_D
    SA --> KelolaUser
    SA --> Export

2. Flowchart Sistem (Menyesuaikan dengan Gambar Referensi)

Flowchart ini disusun persis seperti gambar alur sistem yang Anda lampirkan, disesuaikan dengan arsitektur backend Monitoring Penugasan Pegawai di Dinas Tenaga Kerja dan Transmigrasi.

flowchart TD
    %% Tampilan (Styling) Node agar rapi
    classDef startEnd fill:#fff,stroke:#333,stroke-width:2px;
    classDef process fill:#fff,stroke:#333,stroke-width:1px;
    classDef decision fill:#fff,stroke:#333,stroke-width:1px;
    classDef io fill:#fff,stroke:#333,stroke-width:1px;

    Start([Mulai]):::startEnd --> B[Membuka Aplikasi]:::process
    B --> C[Login]:::process
    C --> D[/Input Username dan Password/]:::io
    D --> E{Validasi?}:::decision
    E -- Tidak --> D
    E -- Ya --> F[Sistem Mengecek Role]:::process
    
    F --> R_USER[Dashboard Pegawai]:::process
    F --> R_ADMIN[Dashboard Admin]:::process
    F --> R_SA[Dashboard Super Admin]:::process
    
    %% ================= ALUR PEGAWAI =================
    R_USER --> U_M{Menu User}:::decision
    U_M --> U_M1[Tambah Laporan]:::process
    U_M1 --> U_M1A[/Input Data & Upload Berkas/]:::io
    U_M1A --> U_M1B[Simpan Data ke Database]:::process
    U_M1B --> J1(( ))
    
    U_M --> U_M2[Riwayat Laporan]:::process
    U_M2 --> U_M2A[/Lihat Seluruh Laporan/]:::io
    U_M2A --> U_M2B{Status Laporan?}:::decision
    U_M2B -- Ditolak / Pending --> U_M2B1[/Input Data & Upload Berkas Ulang/]:::io
    U_M2B1 --> J1
    U_M2B -- Diterima / Selesai --> J1
    
    %% ================= ALUR ADMIN =================
    R_ADMIN --> A_M{Menu Admin}:::decision
    
    A_M --> A_M1[Kelola Laporan]:::process
    A_M1 --> A_M1A[/Lihat Laporan Masuk/]:::io
    A_M1A --> A_M1B{Status Laporan?}:::decision
    A_M1B -- Valid --> A_M1B1[Update Status 'Telah Ditinjau']:::process
    A_M1B1 --> A_M1B1A[Update Data di DB]:::process
    A_M1B1A --> J2(( ))
    A_M1B -- Tidak Valid --> A_M1B2[Revisi Laporan / Tolak]:::process
    A_M1B2 --> A_M1B2A[Update Data di DB]:::process
    A_M1B2A --> J2
    A_M1B -- Dipending --> A_M1B3[/Lihat Detail Laporan/]:::io
    A_M1B3 --> J2

    A_M --> A_M2[Riwayat Laporan]:::process
    A_M2 --> A_M2A[/Lihat Seluruh Laporan/]:::io
    A_M2A --> A_M2B[/Unduh Laporan/]:::io
    A_M2B --> J2
    
    A_M --> A_M3[Kelola Data Akun & Berkas]:::process
    A_M3 --> A_M3A[/Input Data Pegawai Baru/]:::io
    A_M3A --> A_M3B[Simpan Data di Database]:::process
    A_M3B --> J2
    
    %% ================= ALUR SUPER ADMIN =================
    R_SA --> SA_M{Menu Super Admin}:::decision
    SA_M --> SA_M1[Lihat Laporan]:::process
    SA_M1 --> SA_M1B{Status Laporan?}:::decision
    SA_M1B -- Diterima (Approve) --> SA_M1B1[/Update Status 'Selesai'/]:::io
    SA_M1B -- Ditolak / Dipending --> SA_M1B2[/Lihat Detail Laporan/]:::io
    
    SA_M1B1 --> J3(( ))
    SA_M1B2 --> J3
    
    %% ================= PENYELESAIAN =================
    J1 --> N[/Notifikasi/]:::io
    J2 --> N
    J3 --> N
    
    N --> K[Menu Profil]:::process
    K --> L[Logout]:::process
    L --> End([Selesai]):::startEnd

2.B Flowchart Logika Backend Murni (Alur Proses API & Database)

Flowchart ini adalah flowchart yang sangat disarankan untuk digunakan dalam Laporan Anda karena berfokus pada apa yang terjadi di "belakang layar" (Backend), mulai dari penerimaan Request HTTP, middleware, validasi, hingga interaksi dengan Database MySQL.

flowchart TD
    classDef startEnd fill:#fff,stroke:#333,stroke-width:2px;
    classDef process fill:#fff,stroke:#333,stroke-width:1px;
    classDef decision fill:#fff,stroke:#333,stroke-width:1px;
    classDef io fill:#fff,stroke:#333,stroke-width:1px;

    Start([Mulai (Request dari Frontend)]):::startEnd --> REQ[/Menerima HTTP Request\n(POST/GET/PUT/DELETE)/]:::io
    
    %% Middleware Auth & Role
    REQ --> MID_AUTH{Cek Token Sanctum?}:::decision
    MID_AUTH -- Tidak Valid / Kosong --> ERR401[/Return JSON: 401 Unauthorized/]:::io
    MID_AUTH -- Valid --> MID_ROLE{Cek Role Akses?}:::decision
    MID_ROLE -- Ditolak --> ERR403[/Return JSON: 403 Forbidden/]:::io
    
    %% Validasi Controller
    MID_ROLE -- Diizinkan --> CTRL[Controller Menerima Request]:::process
    CTRL --> VAL{Validasi Payload Data\n(Input Kosong/Salah)?}:::decision
    VAL -- Gagal --> ERR422[/Return JSON: 422 Unprocessable Entity/]:::io
    
    %% Proses Database
    VAL -- Sukses --> DB_OP[Eksekusi Logika Bisnis & Query Database]:::process
    DB_OP --> DB_ACT{Jenis Operasi?}:::decision
    
    DB_ACT -- Create/Insert --> DB1[Simpan Data Baru ke Tabel]:::process
    DB_ACT -- Read/Select --> DB2[Ambil Data dari Tabel]:::process
    DB_ACT -- Update --> DB3[Perbarui Data di Tabel]:::process
    DB_ACT -- Delete --> DB4[Soft Delete Data (Ubah deleted_at)]:::process
    
    DB1 --> RES[/Return JSON: 201 Created/]:::io
    DB2 --> RES2[/Return JSON: 200 OK + Data/]:::io
    DB3 --> RES2
    DB4 --> RES2
    
    %% End
    ERR401 --> End([Selesai (Response Terkirim)]):::startEnd
    ERR403 --> End
    ERR422 --> End
    RES --> End
    RES2 --> End

3. Data Flow Diagram (DFD) Level 0 (Konteks)

Menggambarkan aliran input/output makro sistem.

flowchart LR
    P[Pegawai] -- "Data Kredensial\nData Laporan Kegiatan\nData Edit Kegiatan" --> S((Sistem Monitoring\nPenugasan Pegawai))
    S -- "Status Laporan\nDaftar Kegiatanku\nKonfirmasi Login" --> P

    A[Admin] -- "Data Manajemen User (CRUD)\nInstruksi Review Laporan\nData Kredensial" --> S
    S -- "Rekap Seluruh Laporan (Proses)\nData Tabel Pegawai\nDashboard Stats" --> A

    SA[Super Admin] -- "Instruksi Approval (Selesai)\nInstruksi Pembatalan (Delete)\nPerintah Export Excel" --> S
    S -- "Rekap Seluruh Laporan (Ditinjau)\nFile Export (XLSX)\nDashboard Stats" --> SA

4. Entity Relationship Diagram (ERD) Komprehensif

Menggambarkan seluruh struktur database berbasis Laravel Backend, termasuk token otentikasi Sanctum dan soft deletes (Fitur Hapus).

erDiagram
    USERS ||--o| PEGAWAI : "Satu profil per user"
    USERS ||--o{ PENUGASAN : "Dibuat oleh (created_by)"
    USERS ||--o{ PENUGASAN : "Disetujui oleh (approved_by)"
    PEGAWAI }|--|{ PENUGASAN_PEGAWAI : "Ditugaskan pada"
    PENUGASAN }|--|{ PENUGASAN_PEGAWAI : "Melibatkan pegawai"
    USERS ||--o{ PERSONAL_ACCESS_TOKENS : "Memiliki token (Login)"

    USERS {
        bigint id PK
        string name
        string username "UNIQUE"
        string email "UNIQUE"
        string password
        enum role "superadmin, admin, user"
        string jabatan "nullable"
        timestamp created_at
        timestamp updated_at
    }
    
    PEGAWAI {
        bigint id PK
        string nip "UNIQUE"
        string nama
        string jabatan
        bigint user_id FK
        timestamp deleted_at "Soft Deletes"
    }

    PENUGASAN {
        bigint id PK
        string nomor_surat "UNIQUE"
        string kegiatan
        string lokasi
        text keterangan
        date tanggal_mulai
        date tanggal_selesai
        enum status "proses, selesai, telah_ditinjau"
        bigint created_by FK
        bigint approved_by FK
        timestamp approved_at
        text alasan_hapus
        timestamp deleted_at "Soft Deletes"
    }

    PENUGASAN_PEGAWAI {
        bigint id PK
        bigint penugasan_id FK
        bigint pegawai_id FK
    }

    PERSONAL_ACCESS_TOKENS {
        bigint id PK
        string tokenable_type
        bigint tokenable_id FK
        string name
        string token "UNIQUE"
        text abilities
        timestamp last_used_at
        timestamp expires_at
    }