Indikrea Visual Diagram Exporter

graph TB
    subgraph FRONTEND_LAYER ["1. Front-End Layer (Public Facing)"]
        UI_MAIN["🏠 Main Portal (indikrea.id)
• Split Accordion 3 Pilar
• Bilingual ID / EN Engine
• Interactive Dual-Pill Theme"]
        UI_CREATOR["💻 Kreasi Digital (/creator/)
• Web, Video, 3D, Branding"]
        UI_MEDIA["📱 Kelola Medsos (/media/)
• Feed, Reels, Ads Meta/TikTok"]
        UI_PRESS["📚 IndiKrea Press (/publishing/)
• ISBN Perpusnas, Layout, POD"]
        UI_BLOG["📰 Blog & Insights (/blog/)
• 4 Kategori Artikel & Reader"]
        UI_TRACKER["📍 Live Project Tracker (/tracker/)
• Timeline & Bukti Serah Terima"]
        UI_ASKKREA["🤖 Ask Krea AI Widget
• Konsultan Virtual Cerdas"]
    end

    subgraph INTEGRATION_LAYER ["2. Logic & Cloud Integrations"]
        CF_AI["⚡ GCP Cloud Functions
• Gemini AI Engine
• Natural Language Q&A"]
        PAY_GW["💳 Midtrans Payment Engine
• QRIS, VA Bank, Instant Checkout"]
        CANVAS_IMG["🖼️ Client-side Canvas
• WebP Compressor (Base64)"]
        SEO_JSONLD["🔍 Schema.org JSON-LD
• Rich Snippets 5.0 ★ (48 Reviews)"]
    end

    subgraph ADMIN_LAYER ["3. Internal Operations & Staff Portal (/admin/)"]
        ADM_AUTH["🛡️ Discreet Staff Auth
• Role-Based Access Control"]
        ADM_CRM["📋 Tab 1: CRM & Pesanan
• Pipeline Progres
• WA Notif & Unduh CSV"]
        ADM_FIN["💰 Financial Analytics
• Omset Proyek & DP Real-time"]
        ADM_TEAM["👥 Tab 2: Tim & Tupoksi
• Matriks Tanggung Jawab Staf"]
        ADM_SEO["🌐 Tab 3: SEO Website
• Meta Tag & Keyword Mgmt"]
        ADM_TESTI["⭐ Tab 4: Ulasan Klien
• Moderasi Testimoni Publik"]
        ADM_BLOG["✍️ Tab 5: Blog & CMS
• Publish & Update Artikel"]
    end

    subgraph INFRA_LAYER ["4. Hosting & Persistence Layer"]
        HST_SRV["🚀 Hostinger Production Server
• HTTPS SSL & Fast CDN Extractor"]
        LOC_STORE["💾 LocalStorage & Cloud DB
• Cache Artikel, CRM, Tema, Bahasa"]
    end

    UI_MAIN --> UI_CREATOR & UI_MEDIA & UI_PRESS & UI_BLOG & UI_TRACKER
    UI_ASKKREA --> CF_AI
    UI_MAIN & UI_CREATOR & UI_MEDIA & UI_PRESS --> PAY_GW
    UI_MAIN --> SEO_JSONLD
    
    ADM_AUTH --> ADM_CRM & ADM_FIN & ADM_TEAM & ADM_SEO & ADM_TESTI & ADM_BLOG
    ADM_BLOG --> CANVAS_IMG
    
    FRONTEND_LAYER --> HST_SRV
    ADMIN_LAYER --> LOC_STORE
                

sequenceDiagram
    autonumber
    actor Klien as 👤 Klien / Pengunjung
    participant Web as 🌐 Web Indikrea (Bilingual)
    participant Midtrans as 💳 Payment Gateway
    participant Staf as 👨‍💼 Staf Admin (CRM)
    participant Tracker as 📍 Live Tracker

    Klien->>Web: Memilih Layanan (Web / Medsos / ISBN Buku)
    alt Konsultasi Awal
        Klien->>Web: Tanya Layanan via Ask Krea AI
    else Langsung Order
        Klien->>Web: Klik "Mulai Proyek / Pesan Paket"
    end
    Web->>Midtrans: Buka Modal Checkout & Simulasi Pembayaran
    Midtrans-->>Klien: Bayar DP 50% (QRIS / Transfer Bank)
    
    Midtrans->>Staf: Notifikasi Pesanan Masuk (Order ID)
    Staf->>Staf: Update Status -> "Sedang Dikerjakan" & Assign Staf
    Staf->>Klien: Kirim Link Linimasa Tracker via WhatsApp Otomatis
    
    Klien->>Tracker: Masukkan No. Order (Contoh: ORD-202608-001)
    Tracker-->>Klien: Tampilkan Linimasa 4 Tahap & Pratinjau Desain/Naskah
    
    Staf->>Tracker: Update "Sesi Review Klien" -> Klien Setuju
    Staf->>Tracker: Update "Selesai & Serah Terima File Final"
                

flowchart LR
    subgraph AKSES_MASUK ["1. Akses Masuk"]
        A[Klik Ikon Profil di Header] --> B[Internal Operations Portal]
        B --> C{Autentikasi Staf}
    end

    subgraph OPERASIONAL ["2. Pengelolaan Data"]
        C -->|Valid| D[Dashboard 5 Modul]
        D --> E[CRM & Progres Proyek]
        D --> F[Artikel & Edukasi Blog]
        D --> G[SEO & Rich Snippets]
        D --> H[Ulasan & Testimoni]
    end

    subgraph OUTPUT_BISNIS ["3. Output & Integrasi"]
        E --> I[📊 Export CSV Laporan Omset]
        E --> J[📲 Broadcast Notif WhatsApp]
        F --> K[📰 Tayang di /blog/ Real-time]
        G --> L[🔍 Terindeks Google Search]
    end