BAB I - PENDAHULUAN

Bab ini menguraikan latar belakang pengembangan sistem e-commerce Nalala Store, perumusan masalah bisnis dan teknis, tujuan pengembangan, manfaat yang diharapkan, batasan masalah, dan diagram alir operasional utama (Master Flowchart).

1.1 Latar Belakang

Nalala Store merupakan bisnis perdagangan ritel dan grosir tas fashion wanita yang beroperasi secara dinamis dengan ragam koleksi produk mencakup sling bag, shoulder bag, tote bag, dan tas ransel wanita. Dalam perkembangannya, model operasional konvensional berbasis komunikasi pesan instan manual menghadapi empat kendala utama:

1. Pendaftaran dan Pembelian Paket Usaha Reseller Tidak Terstruktur: Calon mitra grosir harus menghubungi admin secara manual melalui aplikasi pesan WhatsApp untuk menanyakan ketersediaan produk paket usaha dan melakukan negosiasi harga. Hal ini memicu antrean verifikasi yang lambat dan risiko ketidakteraturan kuota pemilihan tas.
2. Ketidakpastian Kapasitas Muatan Tas bagi Calon Pembeli Online: Pembeli tas fashion sering mengurungkan niat transaksi karena kesulitan mengestimasi apakah tas yang diminati mampu menampung barang bawaan kerja atau kuliah harian (seperti laptop 14 inci, botol air minum 600ml, pouch kosmetik, dan mukena travel).
3. Pengelolaan Pembayaran Transfer Multi-Rekening yang Rawan Selisih: Transaksi pelanggan yang mentransfer dana ke rekening toko (BCA, Mandiri, serta QRIS dinamis) memerlukan verifikasi mutasi bank yang ketat terhadap struk bukti bayar guna mencegah terjadinya pemalsuan bukti transfer (struk fiktif).
4. Penghitungan Ongkos Kirim dan Penerbitan Resi Logistik Terpisah: Admin harus menghitung bobot produk dan tarif kurir secara terpisah serta menyalin nomor resi (*Air Waybill*) J&T Express secara manual ke pelanggan, sehingga rawan salah ketik dan menunda pelacakan pengiriman.

Untuk menyelesaikan kendala-kendala tersebut, dibangun platform e-commerce komprehensif dengan arsitektur modern berorientasi layanan: Next.js 15 pada sisi presentasi antarmuka, Node.js Express.js pada backend API, serta MySQL 8.0 dengan Prisma ORM melalui perancangan 24 model entitas basis data terpadu.

1.2 Rumusan Masalah

1. Bagaimana merancang arsitektur basis data relasional (24 model) yang mampu mengakomodasi transaksi satuan, paket usaha reseller kuota flat 11 pcs, dan pelacakan riwayat voucher promosi?
2. Bagaimana mengimplementasikan kalkulator daya tampung tas interaktif (3D Bag Capacity Checker) berbasis batas toleransi dimensi tiga dimensi (PxLxT) dan volume kubikasi liter?
3. Bagaimana merancang keranjang belanja bersekat (Cart Sections) yang mampu mengunci komposisi paket reseller tepat 11 item tas tanpa mencampurkan kalkulasi diskon belanja reguler?
4. Bagaimana mengintegrasikan kalkulasi tarif ekspedisi J&T Express (layanan EZ dan CARGO) berbasis bobot akumulasi gram dan penerbitan nomor resi AWB secara otomatis saat pembayaran disetujui?
5. Bagaimana membuktikan keandalan logika persetujuan pembayaran dan pencegahan fraud melalui pengujian perangkat lunak standar White Box (Basis Path Testing) dan Black Box (Equivalence Partitioning & BVA)?

1.3 Tujuan Pengembangan

1. Membangun platform e-commerce Nalala Store dengan dukungan penuh terhadap transaksi belanja satuan pelanggan dan skema Paket Usaha Reseller.
2. Menyediakan fitur visualisasi Capacity Checker 3D untuk memberikan kepastian daya muat produk tas sebelum pembeli menyelesaikan pesanan.
3. Mengintegrasikan modul logistik kurir J&T Express (layanan EZ dan CARGO) dengan perhitungan pembulatan bobot gram otomatis.
4. Mengembangkan modul verifikasi pembayaran multi-rekening (BCA, Mandiri, QRIS) dengan panel audit admin yang terhubung langsung ke pencetakan resi AWB J&T Express.
5. Menyusun dokumentasi rekayasa perangkat lunak standar akademik yang konsisten mulai dari pemodelan basis data (ERD, LRS, Kamus Data) hingga diagram UML dan pengujian sistem.

1.4 Manfaat Sistem

• Bagi Toko Nalala Store: Mengotomatisasi validasi kuota grosir reseller, mempercepat verifikasi mutasi rekening koran, mencegah kehabisan stok melalui transaksi atomik, dan menerbitkan resi logistik dalam hitungan detik.
• Bagi Pelanggan & Mitra Reseller: Mendapatkan simulasi nyata kapasitas tas sebelum membeli, transparansi biaya kirim J&T Express, serta kemudahan upload struk bukti bayar dan live tracking posisi paket.
• Bagi Akademik: Memberikan referensi implementasi rekayasa perangkat lunak e-commerce yang utuh dengan konsistensi 24 model persisten pada ERD konseptual, LRS fisik, dan UML Class Diagram.

1.5 Batasan Masalah

• Metode pembayaran didasarkan pada transfer manual rekening bank toko resmi (BCA, Mandiri) dan QRIS toko dengan pengunggahan bukti bayar struk dan verifikasi persetujuan admin.
• Mitra kurir logistik yang terintegrasi secara bawaan adalah J&T Express dengan opsi layanan EZ (Reguler) dan CARGO (Grosir bobot besar ≥ 5 Kg).
• Skema Paket Usaha Reseller berfokus pada kuota wajib tepat 11 item tas varian pilihan dengan penetapan harga flat bundle terkonfigurasi.
• Fitur Capacity Checker 3D menguji kelayakan tampung berdasarkan perbandingan batas dimensi fisik (panjang, lebar, tinggi) dan volume liter antara tas dan master barang bawaan preset_bag_capacities.
• Hak akses sistem terbagi atas tiga peran pengguna (RBAC): CUSTOMER (Pelanggan Umum), RESELLER (Mitra Grosir), dan ADMIN (Pengelola Toko).

1.6 Master Flowchart Operasional Layanan

Diagram alir di bawah ini menyajikan seluruh rangkaian proses operasional sistem Nalala Store dari penjelajahan katalog, simulasi muatan 3D, pemilihan paket reseller, checkout terpadu, hingga verifikasi transfer dan penyerahan paket ke ekspedisi J&T Express:

flowchart TD
    START([Pengunjung Membuka Website Nalala]) --> CHOOSE_PATH{Pilih Mode Belanja}

    %% JALUR 1: BELANJA SATUAN REGULER & CAPACITY CHECKER
    CHOOSE_PATH -->|Belanja Satuan Reguler| DETAIL_PROD["Buka Detail Produk Tas<br/>(Foto, Deskripsi, Dimensi 3D)"]
    DETAIL_PROD --> OPEN_CAP{Gunakan Fitur<br/>Capacity Checker?}
    OPEN_CAP -->|Ya| SELECT_PRESET["Pilih Preset Barang:<br/>Laptop, Botol, Pouch, Buku"]
    SELECT_PRESET --> CALC_3D["Kalkulasi Dimensi 3D (PxLxT)<br/>& Toleransi Volume Liter"]
    CALC_3D --> CHECK_FIT{Barang Muat<br/>di Dalam Tas?}
    CHECK_FIT -->|Muat / Sesuai| SHOW_FIT["Tampilkan Status Hijau (FIT)<br/>& Visualisasi 3D"]
    CHECK_FIT -->|Overload / Tidak Muat| SHOW_WARN["Tampilkan Status Merah (OVERLOAD)<br/>& Peringatan Batas Dimensi"]
    SHOW_FIT --> ADD_CART_REG["Masukkan Produk ke Keranjang<br/>(cart_items dengan section NULL)"]
    SHOW_WARN --> ADD_CART_REG
    OPEN_CAP -->|Tidak| ADD_CART_REG

    %% JALUR 2: PAKET USAHA RESELLER (KUOTA FLAT 11 PCS)
    CHOOSE_PATH -->|Paket Usaha Reseller| BROWSE_PAKET["Buka Halaman Paket Usaha Reseller<br/>(Aturan Kuota Wajib 11 Pcs)"]
    BROWSE_PAKET --> PICK_11["Pilih Kombinasi Varian Tas<br/>(Total Wajib Tepat 11 Pcs)"]
    PICK_11 --> CHECK_KUOTA{Jumlah Item<br/>Tepat 11 Pcs?}
    CHECK_KUOTA -->|Kurang / Lebih| WARN_KUOTA["Validasi Gagal:<br/>Tampilkan Sisa Kuota (n/11)"]
    WARN_KUOTA --> PICK_11
    CHECK_KUOTA -->|Tepat 11 Pcs| ADD_CART_PAKET["Simpan ke Keranjang<br/>(cart_sections & 11 baris cart_items)"]

    %% KERANJANG & CHECKOUT TERPADU
    ADD_CART_REG --> VIEW_CART["Buka Halaman Keranjang Belanja<br/>(Pemisahan Section Reguler & Paket)"]
    ADD_CART_PAKET --> VIEW_CART
    VIEW_CART --> PROCEED_CHECKOUT["Lanjut ke Halaman Checkout"]
    PROCEED_CHECKOUT --> SELECT_ADDR["Pilih Alamat Pengiriman<br/>(user_addresses / Destinasi J&T)"]
    SELECT_ADDR --> CALC_WEIGHT["Hitung Akumulasi Berat Total (gram)<br/>& Dimensi Paket"]
    CALC_WEIGHT --> PICK_COURIER["Pilih Layanan J&T Express:<br/>J&T EZ (Reguler) atau J&T CARGO (Grosir)"]
    PICK_COURIER --> APPLY_VOUCHER{Gunakan Voucher<br/>Diskon / Ongkir?}
    APPLY_VOUCHER -->|Ya| VALIDATE_VOUCHER["Validasi Min. Spend & Kuota<br/>(Hitung net_total = Subtotal + Ongkir - Diskon)"]
    APPLY_VOUCHER -->|Tidak| NET_CALC["Hitung net_total = Subtotal + Ongkir"]
    VALIDATE_VOUCHER --> CREATE_ORDER["Terbitkan Pesanan (Status: PENDING_PAYMENT)<br/>Generate Order Number & Countdown 24 Jam"]
    NET_CALC --> CREATE_ORDER

    %% PEMBAYARAN & VERIFIKASI ADMIN
    CREATE_ORDER --> PAY_TRANSFER["Pembeli Transfer ke Rekening Toko<br/>(BCA, Mandiri, atau QRIS Dinamis)"]
    PAY_TRANSFER --> UPLOAD_RECEIPT["Upload Struk Bukti Transfer<br/>(Status: WAITING_VERIFICATION)"]
    UPLOAD_RECEIPT --> ADMIN_AUDIT{Admin Cek Mutasi<br/>Rekening & Bukti Valid?}

    ADMIN_AUDIT -->|Tidak / Bukti Fiktif| REJECT_PAY["Admin Tolak Pembayaran & Beri Alasan<br/>(Status Payment: REJECTED)"]
    REJECT_PAY --> CHECK_RETRY{Batas Reupload<br/>Terpenuhi? (<= 3x)}
    CHECK_RETRY -->|Bisa Upload Ulang| UPLOAD_RECEIPT
    CHECK_RETRY -->|Batas Habis / Batal| CANCEL_ORDER["Admin Batalkan Pesanan<br/>(Status: CANCELLED)"]
    CANCEL_ORDER --> END_FAIL([Pesanan Dibatalkan])

    ADMIN_AUDIT -->|Ya / Mutasi Sesuai| APPROVE_PAY["Admin Setujui Pembayaran<br/>(Status: VERIFIED & Order: PAID)"]
    APPROVE_PAY --> AUTO_AWB["Generate Resi J&T Express (AWB)<br/>via Modul Logistik shipments"]
    AUTO_AWB --> PACKING["Admin Packing & Serahkan Paket ke J&T<br/>(Status: PROCESSING -> SHIPPED)"]
    PACKING --> TRACK_JNT["Pelanggan Lacak Resi Real-Time<br/>(J&T API Tracking Logs)"]
    TRACK_JNT --> DELIVERED["Paket Diterima Pelanggan<br/>(Status: DELIVERED -> COMPLETED)"]
    DELIVERED --> END_SUCCESS([Transaksi Selesai & Sukses])

Gambar 1.1 Master Flowchart Alur Operasional Nalala Store

Tabel 1.2 Deskripsi Alur Master Flowchart Operasional Nalala Store

BAB II - PERANCANGAN BASIS DATA

Perancangan basis data Nalala Store dikembangkan berdasarkan 24 model entitas persisten pada skema resmi schema.prisma MySQL 8.0, mencakup pengelolaan pengguna, katalog tas berdimensi 3D, paket reseller, keranjang bersekat, pesanan, pembayaran multi-rekening, dan resi logistik J&T Express.

2.1 Entity Relationship Diagram (ERD) Konseptual

Diagram di bawah ini memodelkan hubungan kardinalitas 24 entitas basis data Nalala Store menggunakan notasi Crow's Foot. Entitas PRESET_BAG_CAPACITIES dimodelkan sebagai entitas mandiri (standalone) yang menyediakan master data ukuran barang 3D untuk kalkulasi komparasi:

erDiagram
    USERS ||--o{ USER_SOCIAL_ACCOUNTS : "memiliki_sosial"
    USERS ||--o{ USER_ADDRESSES : "memiliki_alamat"
    USERS ||--o{ USER_VERIFICATIONS : "memiliki_verifikasi"
    USERS ||--o{ USER_TOKENS : "memiliki_token"
    USERS ||--|| CARTS : "memiliki_keranjang"
    USERS ||--o{ ORDERS : "membuat"
    USERS ||--o{ USER_VOUCHER_USAGES : "riwayat_pemakaian"
    USERS ||--o{ NOTIFICATIONS : "mendapat_notifikasi"

    CATEGORIES ||--o{ PRODUCTS : "mengelompokkan"
    PRODUCTS ||--o{ PRODUCT_VARIANTS : "memiliki_varian"
    PRODUCTS ||--o{ PRODUCT_IMAGES : "memiliki_gambar"
    PRODUCTS ||--o{ PRODUCT_RESELLER_PACKAGES : "dibundel_dalam"
    PRODUCTS ||--o{ VOUCHER_PRODUCTS : "terhubung_ke_produk"
    PRODUCTS ||--o{ CART_ITEMS : "ditaruh_di"
    PRODUCTS ||--o{ ORDER_ITEMS : "dipesan_dalam"

    PRODUCT_VARIANTS ||--o{ CART_ITEMS : "varian_dipilih"
    PRODUCT_VARIANTS ||--o{ ORDER_ITEMS : "varian_dibeli"
    PRODUCT_VARIANTS ||--o{ PRODUCT_IMAGES : "gambar_varian"

    RESELLER_PACKAGES ||--o{ PRODUCT_RESELLER_PACKAGES : "bundle_produk"
    RESELLER_PACKAGES ||--o{ CART_SECTIONS : "diterapkan_pada"

    CARTS ||--o{ CART_SECTIONS : "membagi_section"
    CARTS ||--o{ CART_ITEMS : "memuat_satuan"
    CART_SECTIONS |o--o{ CART_ITEMS : "memuat_paket"

    VOUCHERS ||--o{ VOUCHER_PRODUCTS : "digunakan_pada"
    VOUCHERS ||--o{ USER_VOUCHER_USAGES : "dicatat_pemakaian"

    ORDERS ||--o{ ORDER_ITEMS : "memuat_rincian"
    ORDERS ||--|| PAYMENTS : "memiliki_transaksi"
    ORDERS ||--|| SHIPMENTS : "menghasilkan_logistik"

    PAYMENT_ACCOUNTS ||--o{ PAYMENTS : "menerima_ke"

    USERS {
        bigint id PK
        string email UK
        string phone_number UK
        string name
        string role
        boolean is_active
        datetime created_at
    }
    USER_SOCIAL_ACCOUNTS {
        bigint id PK
        bigint user_id FK
        string provider
        string provider_user_id
    }
    USER_ADDRESSES {
        bigint id PK
        bigint user_id FK
        string recipient_name
        string phone_number
        string city
        string postal_code
        boolean is_primary
    }
    USER_VERIFICATIONS {
        bigint id PK
        bigint user_id FK
        string type
        string token
        boolean is_used
        datetime expires_at
    }
    USER_TOKENS {
        bigint id PK
        bigint user_id FK
        string token_hash UK
        datetime expires_at
    }
    CATEGORIES {
        bigint id PK
        bigint parent_id FK
        string name
        string slug UK
        boolean is_active
    }
    PRODUCTS {
        bigint id PK
        bigint category_id FK
        string name
        string slug UK
        int weight_grams
        decimal base_price_customer
        decimal base_price_reseller
        decimal length_cm
        decimal width_cm
        decimal height_cm
        decimal volume_liters
        string reseller_package_type
        boolean is_active
    }
    PRODUCT_VARIANTS {
        bigint id PK
        bigint product_id FK
        string color_name
        string sku UK
        int stock
        decimal price_adjustment
    }
    PRODUCT_IMAGES {
        bigint id PK
        bigint product_id FK
        bigint variant_id FK
        string image_url
        boolean is_primary
    }
    PRESET_BAG_CAPACITIES {
        bigint id PK
        string name
        string category
        decimal length_cm
        decimal width_cm
        decimal height_cm
        decimal volume_liters
        boolean is_rigid
    }
    RESELLER_PACKAGES {
        bigint id PK
        string name
        string slug UK
        decimal package_price
        int required_quantity
        boolean is_active
    }
    PRODUCT_RESELLER_PACKAGES {
        bigint id PK
        bigint product_id FK
        bigint reseller_package_id FK
    }
    VOUCHERS {
        bigint id PK
        string code UK
        string title
        string type
        string discount_type
        decimal discount_value
        decimal min_spend
        string applicable_to
        int quota_total
        int quota_used
        boolean is_active
    }
    VOUCHER_PRODUCTS {
        bigint id PK
        bigint voucher_id FK
        bigint product_id FK
    }
    USER_VOUCHER_USAGES {
        bigint id PK
        bigint user_id FK
        bigint voucher_id FK
        datetime used_at
    }
    CARTS {
        bigint id PK
        bigint user_id FK_UK
        datetime updated_at
    }
    CART_SECTIONS {
        bigint id PK
        bigint cart_id FK
        bigint reseller_package_id FK
    }
    CART_ITEMS {
        bigint id PK
        bigint cart_id FK
        bigint cart_section_id FK
        bigint product_id FK
        bigint variant_id FK
        int quantity
    }
    ORDERS {
        bigint id PK
        string order_number UK
        bigint user_id FK
        string status
        decimal regular_subtotal
        decimal package_subtotal
        decimal discount_product_total
        decimal shipping_fee
        decimal net_total
        int total_weight_grams
        json shipping_address
    }
    ORDER_ITEMS {
        bigint id PK
        bigint order_id FK
        bigint product_id FK
        bigint variant_id FK
        string product_name
        string color_name
        string sku
        decimal unit_price
        int quantity
        decimal total_price
    }
    PAYMENTS {
        bigint id PK
        bigint order_id FK_UK
        bigint payment_account_id FK
        decimal amount
        string status
        string proof_image_url
        datetime verified_at
    }
    PAYMENT_ACCOUNTS {
        bigint id PK
        string type
        string provider_name
        string account_number
        string account_holder_name
        boolean is_active
    }
    SHIPMENTS {
        bigint id PK
        bigint order_id FK_UK
        string waybill_number UK
        string courier_name
        string service_type
        string status
        json tracking_logs
    }
    NOTIFICATIONS {
        bigint id PK
        bigint user_id FK
        string title
        string type
        boolean is_read
        datetime created_at
    }

Gambar 2.1 Entity Relationship Diagram (ERD) Basis Data Nalala Store (24 Entitas)

Tabel 2.1 Deskripsi Entitas dan Kardinalitas ERD Nalala Store

2.2 Penjelasan Relasi Entitas Basis Data

Analisis keterhubungan antar entitas pada perancangan basis data Nalala Store memiliki beberapa poin arsitektural krusial:

• Isolasi Riwayat Voucher dari Pesanan (No voucher_id FK on orders): Sesuai kaidah normalisasi dan skema resmi, tabel orders tidak memiliki foreign key langsung ke vouchers. Relasi pemakaian kupon dicatat secara independen pada tabel user_voucher_usages untuk menjaga keutuhan data faktur pesanan meskipun data promosi diubah atau dihapus.
• Relasi One-to-One Keranjang (users ke carts): Setiap pengguna yang telah mengaktifkan akun memiliki tepat satu keranjang belanja persisten (user_id bersifat UNIQUE pada tabel carts).
• Pemisahan Section Paket Usaha (carts ke cart_sections): Keranjang belanja dapat menampung transaksi satuan (langsung pada cart_items dengan cart_section_id = NULL) dan transaksi paket reseller (mengelompokkan tepat 11 item tas di bawah cart_sections yang terhubung ke reseller_packages).
• Relasi One-to-One Transaksi dan Logistik: Satu pesanan (orders) menghasilkan tepat satu rekaman pembayaran transfer (payments, dengan order_id UNIQUE) dan satu manifes logistik ekspedisi (shipments, dengan order_id UNIQUE).

2.3 Aturan Transformasi ERD ke LRS

Proses pemetaan dari Entity Relationship Diagram (ERD) konseptual menjadi Logical Record Structure (LRS) fisik dilakukan mengikuti 4 kaidah formal rekayasa basis data:

2.4 Logical Record Structure (LRS) Fisik

Berikut adalah representasi LRS fisik 24 tabel basis data Nalala Store lengkap dengan tipe data MySQL, indikator kunci primer (+PK), kunci tamu (#FK), kunci unik (~UQ), serta arah relasi multiplisitas:

classDiagram
    direction TB

    class users {
        +BigInt id PK
        ~String email UQ
        ~String phone_number UQ
        +String name
        +String role
        +Boolean is_active
        +DateTime created_at
    }

    class user_social_accounts {
        +BigInt id PK
        #BigInt user_id FK
        +String provider
        +String provider_user_id
    }

    class user_addresses {
        +BigInt id PK
        #BigInt user_id FK
        +String recipient_name
        +String city
        +String postal_code
        +Boolean is_primary
    }

    class user_verifications {
        +BigInt id PK
        #BigInt user_id FK
        +String type
        +String token
        +Boolean is_used
        +DateTime expires_at
    }

    class user_tokens {
        +BigInt id PK
        #BigInt user_id FK
        ~String token_hash UQ
        +DateTime expires_at
    }

    class categories {
        +BigInt id PK
        #BigInt parent_id FK
        +String name
        ~String slug UQ
        +Boolean is_active
    }

    class products {
        +BigInt id PK
        #BigInt category_id FK
        +String name
        ~String slug UQ
        +Int weight_grams
        +Decimal base_price_customer
        +Decimal base_price_reseller
        +Decimal volume_liters
        +String reseller_package_type
    }

    class product_variants {
        +BigInt id PK
        #BigInt product_id FK
        +String color_name
        ~String sku UQ
        +Int stock
        +Decimal price_adjustment
    }

    class product_images {
        +BigInt id PK
        #BigInt product_id FK
        #BigInt variant_id FK
        +String image_url
        +Boolean is_primary
    }

    class preset_bag_capacities {
        +BigInt id PK
        +String name
        +String category
        +Decimal volume_liters
        +Boolean is_rigid
    }

    class reseller_packages {
        +BigInt id PK
        +String name
        ~String slug UQ
        +Decimal package_price
        +Int required_quantity
    }

    class product_reseller_packages {
        +BigInt id PK
        #BigInt product_id FK
        #BigInt reseller_package_id FK
    }

    class vouchers {
        +BigInt id PK
        ~String code UQ
        +String type
        +Decimal discount_value
        +Decimal min_spend
        +String applicable_to
    }

    class voucher_products {
        +BigInt id PK
        #BigInt voucher_id FK
        #BigInt product_id FK
    }

    class user_voucher_usages {
        +BigInt id PK
        #BigInt user_id FK
        #BigInt voucher_id FK
        +DateTime used_at
    }

    class carts {
        +BigInt id PK
        #BigInt user_id FK_UQ
    }

    class cart_sections {
        +BigInt id PK
        #BigInt cart_id FK
        #BigInt reseller_package_id FK
    }

    class cart_items {
        +BigInt id PK
        #BigInt cart_id FK
        #BigInt cart_section_id FK
        #BigInt product_id FK
        #BigInt variant_id FK
        +Int quantity
    }

    class orders {
        +BigInt id PK
        ~String order_number UQ
        #BigInt user_id FK
        +String status
        +Decimal net_total
        +Int total_weight_grams
        +JSON shipping_address
    }

    class order_items {
        +BigInt id PK
        #BigInt order_id FK
        #BigInt product_id FK
        #BigInt variant_id FK
        +String sku
        +Int quantity
        +Decimal total_price
    }

    class payments {
        +BigInt id PK
        #BigInt order_id FK_UQ
        #BigInt payment_account_id FK
        +Decimal amount
        +String status
        +String proof_image_url
    }

    class payment_accounts {
        +BigInt id PK
        +String type
        +String provider_name
        +String account_number
    }

    class shipments {
        +BigInt id PK
        #BigInt order_id FK_UQ
        ~String waybill_number UQ
        +String courier_name
        +String service_type
        +String status
    }

    class notifications {
        +BigInt id PK
        #BigInt user_id FK
        +String title
        +String type
        +Boolean is_read
    }

    users "1" --> "0..*" user_social_accounts : user_id
    users "1" --> "0..*" user_addresses : user_id
    users "1" --> "0..*" user_verifications : user_id
    users "1" --> "0..*" user_tokens : user_id
    users "1" --> "1" carts : user_id
    users "1" --> "0..*" orders : user_id
    users "1" --> "0..*" user_voucher_usages : user_id
    users "1" --> "0..*" notifications : user_id

    categories "1" --> "0..*" products : category_id
    categories "0..1" --> "0..*" categories : parent_id
    products "1" --> "0..*" product_variants : product_id
    products "1" --> "0..*" product_images : product_id
    products "1" --> "0..*" product_reseller_packages : product_id
    products "1" --> "0..*" voucher_products : product_id
    products "1" --> "0..*" cart_items : product_id
    products "1" --> "0..*" order_items : product_id

    product_variants "1" --> "0..*" cart_items : variant_id
    product_variants "1" --> "0..*" order_items : variant_id
    product_variants "0..1" --> "0..*" product_images : variant_id

    reseller_packages "1" --> "0..*" product_reseller_packages : reseller_package_id
    reseller_packages "1" --> "0..*" cart_sections : reseller_package_id

    carts "1" --> "0..*" cart_sections : cart_id
    carts "1" --> "0..*" cart_items : cart_id
    cart_sections "0..1" --> "0..*" cart_items : cart_section_id

    vouchers "1" --> "0..*" voucher_products : voucher_id
    vouchers "1" --> "0..*" user_voucher_usages : voucher_id

    orders "1" --> "1..*" order_items : order_id
    orders "1" --> "1" payments : order_id
    orders "1" --> "1" shipments : order_id

    payment_accounts "1" --> "0..*" payments : payment_account_id

Gambar 2.2 Logical Record Structure (LRS) Fisik Basis Data Nalala Store

Tabel 2.3 Matriks Relasi Foreign Key dan Integritas Referensial LRS

2.5 Kamus Data Fisik (24 Tabel Basis Data MySQL)

Kamus data fisik merinci secara lengkap spesifikasi atribut kolom, tipe data MySQL, batasan integritas (PK, FK, UQ, NULLABLE, DEFAULT), dan fungsi bisnis pada seluruh 24 model persisten basis data Nalala Store:

BAB III - PERANCANGAN SISTEM (UML)

Perancangan sistem perangkat lunak Nalala Store dimodelkan secara komprehensif menggunakan Unified Modeling Language (UML) yang mencakup Use Case Diagram, Activity Diagram, Sequence Diagram, dan Comprehensive Domain Class Diagram.

3.1 Use Case Diagram

Sistem Nalala Store melibatkan tiga aktor utama dengan batasan wewenang berbasis peran (Role-Based Access Control): Customer (Pembeli Ritel), Reseller (Mitra Grosir Paket Usaha), dan Admin (Pengelola Operasional Toko). Hubungan aktor dengan 12 use case disajikan pada Gambar 3.1:

flowchart LR
    subgraph Aktor Sistem
        Cust[Customer / Pembeli Reguler]
        Reseller[Mitra Reseller]
        Admin[Administrator Toko]
    end

    subgraph Nalala Store E-Commerce Subsystem
        UC1([UC-01 Registrasi & Verifikasi OTP])
        UC2([UC-02 Login Multi-Role & Profil])
        UC3([UC-03 Eksplorasi Katalog & Capacity Checker 3D])
        UC4([UC-04 Pemilihan Paket Usaha Reseller 11 Pcs])
        UC5([UC-05 Manajemen Keranjang & Section Paket])
        UC6([UC-06 Klaim & Validasi Voucher Diskon])
        UC7([UC-07 Checkout Pesanan & Hitung Ongkir J&T])
        UC8([UC-08 Pembayaran Transfer & Upload Bukti])
        UC9([UC-09 Lacak Pengiriman Resi J&T Real-Time])
        UC10([UC-10 Verifikasi Pembayaran & Approval Mutasi])
        UC11([UC-11 Kelola Produk, Varian & Paket Usaha])
        UC12([UC-12 Dispatch Pengiriman & Penerbitan AWB J&T])
    end

    Cust --> UC1
    Cust --> UC2
    Cust --> UC3
    Cust --> UC5
    Cust --> UC6
    Cust --> UC7
    Cust --> UC8
    Cust --> UC9

    Reseller --> UC1
    Reseller --> UC2
    Reseller --> UC3
    Reseller --> UC4
    Reseller --> UC5
    Reseller --> UC6
    Reseller --> UC7
    Reseller --> UC8
    Reseller --> UC9

    Admin --> UC2
    Admin --> UC10
    Admin --> UC11
    Admin --> UC12

Gambar 3.1 Use Case Diagram Sistem E-Commerce Nalala Store

Tabel 3.1 Spesifikasi Use Case Inti Sistem Nalala Store

3.2 Spesifikasi Use Case Inti

Tabel 3.1 pada sub-bab sebelumnya menyajikan rincian skenario operasional use case inti, kondisi prasyarat (precondition), alur transaksi normal, serta kondisi akhir sistem (postcondition).

3.3 Activity Diagram Registrasi Akun dan Verifikasi OTP

Activity diagram pada Gambar 3.2 memodelkan alur registrasi pengguna baru, pembuatan token verifikasi acak 6 digit, pengiriman melalui pesan instan WhatsApp/Email, hingga validasi masa aktif token 5 menit sebelum aktivasi akun:

flowchart TD
    START([Mulai]) --> INPUT_REG[Pengguna Mengisi Form Registrasi: Nama, Email, No. WA, Password]
    INPUT_REG --> SUBMIT_REG[Kirim Data ke Server]
    SUBMIT_REG --> VAL_INPUT{Format Data Valid & Email Belum Terdaftar?}
    VAL_INPUT -->|Tidak| SHOW_ERR[Tampilkan Pesan Validasi Error]
    SHOW_ERR --> INPUT_REG
    VAL_INPUT -->|Ya| SAVE_USER[Simpan Akun ke users: is_active = false]
    SAVE_USER --> GEN_OTP[Generate 6-Digit OTP & Simpan ke user_verifications]
    GEN_OTP --> SEND_OTP[Kirim OTP via WhatsApp / Email Gateway]
    SEND_OTP --> SHOW_OTP_PAGE[Buka Halaman Input Verifikasi OTP & Countdown 5 Menit]
    SHOW_OTP_PAGE --> INPUT_OTP[Pengguna Memasukkan 6-Digit Kode OTP]
    INPUT_OTP --> CHECK_OTP{Kode OTP Cocok & Belum Kedaluwarsa?}
    CHECK_OTP -->|Tidak Cocok / Expired| WARN_OTP[Tampilkan Error OTP & Sisa Percobaan]
    WARN_OTP --> SHOW_OTP_PAGE
    CHECK_OTP -->|Valid| UPDATE_VERIF[Update user_verifications: is_used = true]
    UPDATE_VERIF --> ACTIVATE_USER[Update users: is_active = true, verified_at = NOW]
    ACTIVATE_USER --> AUTO_LOGIN[Generate JWT Auth Token & Inisialisasi Keranjang carts]
    AUTO_LOGIN --> REDIRECT_HOME[Arahkan ke Beranda / Dashboard Pembeli]
    REDIRECT_HOME --> FINISH([Selesai])

Gambar 3.2 Activity Diagram Registrasi dan Verifikasi OTP

Tabel 3.2 Deskripsi Alur Aktivitas Registrasi dan OTP

Alur memodelkan interaksi antara calon pengguna dan subsistem autentikasi Nalala Store, memastikan setiap pendaftar tervalidasi melalui saluran komunikasi nomor telepon WhatsApp atau surel sebelum akun diaktifkan.

3.4 Activity Diagram Simulasi Daya Muat Tas (3D Capacity Checker)

Activity diagram pada Gambar 3.3 memodelkan proses pemilihan objek barang bawaan harian, kalkulasi dimensi batas tiga dimensi (PxLxT) dan kubikasi volume liter, serta penentuan indikator kelayakan muat tas:

flowchart TD
    START([Mulai]) --> OPEN_PROD[Pengguna Membuka Halaman Detail Produk Tas]
    OPEN_PROD --> FETCH_SPEC[Sistem Memuat Spesifikasi Fisik: PxLxT, Volume Liter, & Laptop Max]
    FETCH_SPEC --> CLICK_CAP[Pengguna Mengklik Tombol 'Uji Kapasitas Muat 3D']
    CLICK_CAP --> LOAD_PRESETS[Sistem Mengambil Master Data preset_bag_capacities]
    LOAD_PRESETS --> SELECT_ITEMS[Pengguna Memilih Barang Bawaan: Laptop, Botol Minum, Mukena, Pouch]
    SELECT_ITEMS --> CALC_ENGINE[Engine Menghitung Total Volume Barang & Dimensi Maksimal PxLxT]
    CALC_ENGINE --> EVALUATE{Volume Barang <= Volume Tas & Dimensi Muat?}
    EVALUATE -->|Ya / Fit Sempurna| RENDER_GREEN[Render Kontainer Tas 3D Hijau & Label 'Muat Sempurna']
    EVALUATE -->|Melebihi Kapasitas| RENDER_RED[Render Kontainer Tas 3D Merah & Peringatan Dimensi Overload]
    RENDER_GREEN --> USER_DECISION{Pengguna Puas & Ingin Membeli?}
    RENDER_RED --> USER_DECISION
    USER_DECISION -->|Ubah Pilihan Barang| SELECT_ITEMS
    USER_DECISION -->|Beli Produk| ADD_TO_CART[Simpan Produk & Varian ke cart_items]
    ADD_TO_CART --> FINISH([Selesai])

Gambar 3.3 Activity Diagram Simulasi Capacity Checker 3D

Tabel 3.3 Deskripsi Alur Aktivitas Simulasi 3D Capacity Checker

Alur memodelkan kalkulasi matematis evaluasi dimensi tiga dimensi (Panjang, Lebar, Tinggi) dan toleransi volume kubik liter antara produk tas fashion dengan objek preset barang bawaan harian.

3.5 Activity Diagram Checkout Belanja & Pembayaran Multi-Rekening

Activity diagram pada Gambar 3.4 memodelkan alur checkout keranjang belanja, penegakan kuota wajib 11 pcs paket reseller, penghitungan tarif kurir J&T Express (EZ / CARGO), hingga pengunggahan struk bukti bayar transfer:

flowchart TD
    START([Mulai]) --> OPEN_CART[Pengguna Membuka Keranjang Belanja]
    OPEN_CART --> CHECK_SECTIONS{Keranjang Memuat Paket Reseller?}
    CHECK_SECTIONS -->|Ya| VALIDATE_11{Item di Section Tepat 11 Pcs?}
    VALIDATE_11 -->|Belum Tepat| WARN_SECTION[Tampilkan Peringatan Kuota Paket Belum Genap 11]
    WARN_SECTION --> OPEN_CART
    VALIDATE_11 -->|Tepat 11 Pcs| CLICK_CHECKOUT[Klik Tombol Checkout Pesanan]
    CHECK_SECTIONS -->|Tidak / Reguler Saja| CLICK_CHECKOUT

    CLICK_CHECKOUT --> LOAD_CHECKOUT[Sistem Menampilkan Form Checkout: Alamat & Layanan J&T]
    LOAD_CHECKOUT --> PICK_ADDRESS[Pengguna Memilih Alamat Pengiriman dari user_addresses]
    PICK_ADDRESS --> CALC_JNT_FEE[Sistem Menghitung Total Bobot Gram & Tarif J&T EZ/CARGO]
    CALC_JNT_FEE --> INPUT_VOUCHER{Input Kupon Diskon / Subsidi Ongkir?}
    INPUT_VOUCHER -->|Ya| CHECK_VOUCHER{Kode Valid, Min Spend Cukup, Kuota Ada?}
    CHECK_VOUCHER -->|Tidak| ERR_VOUCHER[Tampilkan Error Voucher Tidak Berlaku]
    ERR_VOUCHER --> INPUT_VOUCHER
    CHECK_VOUCHER -->|Valid| APPLY_DISCOUNT[Kurangi Total Bayar Sesuai Nilai Diskon]
    INPUT_VOUCHER -->|Tidak| SUM_TOTAL[Kalkulasi net_total = Subtotal + Ongkir - Diskon]
    APPLY_DISCOUNT --> SUM_TOTAL

    SUM_TOTAL --> CREATE_ORDER_DB[Sistem Terbitkan orders & payments (Status: PENDING_PAYMENT)]
    CREATE_ORDER_DB --> SELECT_PAYMENT[Pengguna Memilih Rekening Transfer: BCA / Mandiri / QRIS]
    SELECT_PAYMENT --> SHOW_PAY_INFO[Tampilkan Nomor Rekening, Jumlah Transfer, & Timer 24 Jam]
    SHOW_PAY_INFO --> USER_TRANSFERS[Pengguna Melakukan Transfer Dana ke Rekening Toko]
    USER_TRANSFERS --> UPLOAD_PROOF[Pengguna Mengunggah Foto Bukti Struk Pembayaran]
    UPLOAD_PROOF --> UPDATE_WAITING[Update Status: WAITING_VERIFICATION & Notifikasi ke Admin]
    UPDATE_WAITING --> FINISH([Menunggu Verifikasi Admin])

Gambar 3.4 Activity Diagram Checkout Belanja & Pembayaran Multi-Rekening

Tabel 3.4 Deskripsi Alur Aktivitas Checkout & Pembayaran

Alur memodelkan transisi keranjang belanja menuju pesanan terikat (binding order), penegakan kuota paket 11 pcs, kalkulasi ongkos kirim logistik J&T, serta pengunggahan bukti pembayaran transfer.

3.6 Activity Diagram Verifikasi Pembayaran & Penerbitan Resi J&T

Activity diagram pada Gambar 3.5 memodelkan pemeriksaan mutasi rekening oleh admin, penanganan penolakan struk fiktif berulang, serta pemanggilan API logistik kurir J&T Express untuk auto-generate nomor resi AWB saat transaksi disetujui:

flowchart TD
    START([Mulai]) --> ADMIN_LOGIN[Admin Membuka Dashboard Kelola Transaksi]
    ADMIN_LOGIN --> VIEW_PENDING[Admin Memfilter Transaksi Berstatus: WAITING_VERIFICATION]
    VIEW_PENDING --> OPEN_DETAIL[Buka Detail Pembayaran: Struk Bukti Bayar & Nominal net_total]
    OPEN_DETAIL --> CHECK_MUTASI[Admin Membuka Rekening Koran Internet Banking / QRIS Mutasi]
    CHECK_MUTASI --> AUDIT_DECISION{Bukti Struk & Mutasi Bank Sesuai?}

    AUDIT_DECISION -->|Tidak Valid / Fiktif| INPUT_REASON[Admin Mengisi Alasan Penolakan di Form]
    INPUT_REASON --> SUBMIT_REJECT[Eksekusi Tolak Pembayaran]
    SUBMIT_REJECT --> DB_REJECT[Update payments: REJECTED & Increment reupload_attempts]
    DB_REJECT --> NOTIF_BUYER[Kirim Notifikasi Penolakan ke Pembeli via In-App / WA]
    NOTIF_BUYER --> BUYER_CHECK{Percobaan Upload <= 3x?}
    BUYER_CHECK -->|Bisa Re-Upload| BUYER_REUPLOAD[Pembeli Mengunggah Ulang Bukti Transfer Baru]
    BUYER_REUPLOAD --> VIEW_PENDING
    BUYER_CHECK -->|Batas Habis / Dibatalkan| DB_CANCEL[Update orders: CANCELLED & Kembalikan Stok]
    DB_CANCEL --> FINISH_CANCEL([Pesanan Batal])

    AUDIT_DECISION -->|Valid & Dana Masuk| APPROVE_PAY[Admin Menyetujui Pembayaran]
    APPROVE_PAY --> DB_APPROVE[Update payments: VERIFIED & Update orders: PAID]
    DB_APPROVE --> CALL_JNT_API[Sistem Memanggil API J&T Express: Generate Air Waybill]
    CALL_JNT_API --> SAVE_SHIPMENT[Simpan ke shipments: waybill_number, courier_name, status MANIFESTED]
    SAVE_SHIPMENT --> PRINT_LABEL[Admin Mencetak Label Pengiriman & Tempel ke Paket]
    PRINT_LABEL --> HANDOVER_COURIER[Paket Diserahkan ke Kurir J&T Express: Status SHIPPED]
    HANDOVER_COURIER --> NOTIF_SUCCESS[Kirim Notifikasi Resi & Tautan Live Tracking ke Pembeli]
    NOTIF_SUCCESS --> FINISH_SUCCESS([Pengiriman Berjalan])

Gambar 3.5 Activity Diagram Verifikasi Pembayaran & Penerbitan Resi Logistik

Tabel 3.5 Deskripsi Alur Aktivitas Verifikasi Pembayaran & Logistik

Alur memodelkan proses verifikasi pembayaran transfer oleh administrator, pencegahan fraud bukti bayar fiktif, serta integrasi otomatis penerbitan resi kurir J&T Express saat transaksi terverifikasi.

3.7 Sequence Diagram Alur Sistem

Empat Sequence Diagram di bawah ini memodelkan pertukaran pesan dinamis antar komponen UI, Controller, Service Layer, dan Prisma ORM Database:

3.7.1 Sequence Diagram Registrasi dan Verifikasi OTP

sequenceDiagram
    autonumber
    actor User as Calon Pengguna
    participant View as Web Client UI
    participant AuthCtrl as AuthController
    participant OTPService as VerificationService
    participant DB as Prisma (MySQL)
    participant WA as Gateway WA / Email

    User->>View: Isi nama, email, no_telp, password
    View->>AuthCtrl: POST /api/auth/register (payload)
    AuthCtrl->>DB: findUnique({ where: { email } })
    DB-->>AuthCtrl: null (email tersedia)
    AuthCtrl->>DB: users.create({ data: { is_active: false } })
    DB-->>AuthCtrl: userRecord
    AuthCtrl->>OTPService: generateOTP(userRecord.id)
    OTPService->>DB: user_verifications.create({ token, expires_at })
    DB-->>OTPService: verifRecord
    OTPService->>WA: sendOTPMessage(phone_number, token)
    WA-->>OTPService: Delivery Status: Sent
    AuthCtrl-->>View: 201 Created (Redirect ke Verifikasi OTP)
    User->>View: Input 6-Digit Kode OTP
    View->>AuthCtrl: POST /api/auth/verify-otp { user_id, token }
    AuthCtrl->>DB: findFirst(user_verifications valid & belum dipakai)
    DB-->>AuthCtrl: verifMatch
    AuthCtrl->>DB: $transaction([activateUser, markVerifUsed, createCart])
    DB-->>AuthCtrl: Transaction Committed
    AuthCtrl-->>View: 200 OK { token: JWT, user: profile }
    View-->>User: Tampilkan Dashboard Akun Aktif

Gambar 3.6 Sequence Diagram Registrasi dan Verifikasi OTP

3.7.2 Sequence Diagram Simulasi Capacity Checker 3D

sequenceDiagram
    autonumber
    actor User as Calon Pembeli
    participant UI as ProductDetailPage UI
    participant ProdCtrl as ProductController
    participant CapEngine as CapacityEngine3D
    participant DB as Prisma (MySQL)

    User->>UI: Buka Halaman Detail Produk Tas
    UI->>ProdCtrl: GET /api/products/:slug
    ProdCtrl->>DB: products.findUnique({ include: { variants, images } })
    DB-->>ProdCtrl: productData (PxLxT: 32x12x25cm, Volume: 9.6L)
    ProdCtrl-->>UI: 200 OK (Render Spesifikasi Produk)
    User->>UI: Klik 'Uji Kapasitas Muat 3D'
    UI->>ProdCtrl: GET /api/preset-capacities
    ProdCtrl->>DB: preset_bag_capacities.findMany()
    DB-->>ProdCtrl: listPresets (Laptop 14", Botol 600ml, Pouch)
    ProdCtrl-->>UI: 200 OK (Tampilkan Pilihan Objek)
    User->>UI: Centang Laptop 14" & Botol Minum 600ml
    UI->>CapEngine: evaluateFit(productDimensions, selectedItems)
    Note over CapEngine: Hitung Vol Item = 4.2L <= 9.6L<br/>Uji Dimensi PxLxT & Sifat Kaku (Rigid)
    CapEngine-->>UI: Result: { isFit: true, percentUsed: 43.75%, status: 'FIT' }
    UI-->>User: Render Visualisasi 3D Hijau & Label 'Muat Sempurna'
    User->>UI: Klik 'Masukkan Keranjang'
    UI->>ProdCtrl: POST /api/cart/items { product_id, variant_id }
    ProdCtrl->>DB: cart_items.upsert()
    DB-->>ProdCtrl: cartItemRecord
    ProdCtrl-->>UI: 201 Added to Cart

Gambar 3.7 Sequence Diagram Simulasi Capacity Checker 3D

3.7.3 Sequence Diagram Checkout Pesanan dan Kalkulasi Logistik

sequenceDiagram
    autonumber
    actor Buyer as Pembeli (Customer / Reseller)
    participant View as CheckoutView UI
    participant OrderCtrl as OrderController
    participant JntService as JntLogisticsService
    participant VoucherService as VoucherService
    participant DB as Prisma (MySQL)

    Buyer->>View: Pilih Alamat Kirim & Layanan J&T (EZ / CARGO)
    View->>OrderCtrl: POST /api/shipping/calculate-rate { address_id, cart_id, courier: 'J&T' }
    OrderCtrl->>DB: Hitung total_weight_grams dari seluruh cart_items
    DB-->>OrderCtrl: Total Bobot = 2.450 gram (Dibulatkan ke 3 Kg)
    OrderCtrl->>JntService: queryTariff(originDistrict, destDistrict, weight: 3kg, service: 'EZ')
    JntService-->>OrderCtrl: Tariff Response: Rp 36.000,-
    OrderCtrl-->>View: 200 OK { shipping_fee: 36000 }
    Buyer->>View: Input Kupon Diskon 'NALALAHEMAT'
    View->>VoucherService: validateVoucher(code, subtotal, user_id)
    VoucherService->>DB: vouchers.findUnique({ where: { code } })
    DB-->>VoucherService: voucherData
    VoucherService-->>View: 200 OK { discount_product: 20000, net_total: subtotal + 36000 - 20000 }
    Buyer->>View: Klik 'Buat Pesanan & Bayar'
    View->>OrderCtrl: POST /api/orders/create (payload checkout)
    OrderCtrl->>DB: $transaction([orders.create, order_items.createMany, payments.create, clearCart])
    DB-->>OrderCtrl: Order #NL-202610-008 Diterbitkan
    OrderCtrl-->>View: 201 Created { order_number, net_total, expires_at }
    View-->>Buyer: Tampilkan Rekening Transfer Toko & Instruksi Upload Bukti

Gambar 3.8 Sequence Diagram Checkout dan Kalkulasi Logistik

3.7.4 Sequence Diagram Verifikasi Pembayaran Admin & Penerbitan AWB

sequenceDiagram
    autonumber
    actor Admin as Administrator Toko
    participant AdminUI as AdminDashboard UI
    participant PayCtrl as PaymentVerificationController
    participant JntAPI as J&T Express Logistics API
    participant DB as Prisma (MySQL)
    participant NotifHub as NotificationGateway

    Admin->>AdminUI: Buka Daftar Pembayaran Menunggu Verifikasi
    AdminUI->>PayCtrl: GET /api/admin/payments?status=WAITING_VERIFICATION
    PayCtrl->>DB: payments.findMany({ include: { order, payment_account } })
    DB-->>PayCtrl: listWaitingPayments
    PayCtrl-->>AdminUI: 200 OK (Render Tabel & Bukti Struk)
    Admin->>AdminUI: Cek Mutasi Bank & Klik 'Setujui Pembayaran'
    AdminUI->>PayCtrl: POST /api/admin/payments/:id/verify { action: 'APPROVE', admin_id }
    PayCtrl->>DB: orders.findUnique({ where: { id: order_id } })
    DB-->>PayCtrl: orderRecord
    PayCtrl->>JntAPI: requestAWB(senderAddress, orderRecord.shipping_address, weight, service)
    JntAPI-->>PayCtrl: 200 Success { waybill_number: 'JT8829102910' }
    PayCtrl->>DB: $transaction([payments.update(VERIFIED), orders.update(PAID), shipments.create(JT8829102910)])
    DB-->>PayCtrl: Transaction Committed
    PayCtrl->>NotifHub: dispatchNotification(order.user_id, 'Pembayaran Lunas & Resi Terbit: JT8829102910')
    NotifHub-->>PayCtrl: Notification Queued
    PayCtrl-->>AdminUI: 200 OK { message: 'Pembayaran Diverifikasi & Resi Berhasil Diterbitkan' }
    AdminUI-->>Admin: Tampilkan Tombol Cetak Label Pengiriman J&T

Gambar 3.9 Sequence Diagram Verifikasi Pembayaran & Penerbitan AWB

3.8 Comprehensive Domain Class Diagram (24 Kelas)

Class diagram pada Gambar 3.10 menyajikan 24 kelas domain bisnis perangkat lunak yang selaras secara presisi dengan 24 model tabel basis data, lengkap dengan atribut, tipe data, serta operasi/metode pada service layer:

classDiagram
    direction TB

    class User {
        +BigInt id
        +String name
        +String email
        +String phone_number
        +String password_hash
        +Role role
        +Boolean is_active
        +register()
        +login()
        +verifyOTP()
    }

    class UserAddress {
        +BigInt id
        +BigInt user_id
        +String label
        +String recipient_name
        +String city
        +String postal_code
        +Boolean is_primary
        +setPrimary()
    }

    class UserVerification {
        +BigInt id
        +BigInt user_id
        +VerificationType type
        +String token
        +Boolean is_used
        +DateTime expires_at
        +isExpired() Boolean
    }

    class UserToken {
        +BigInt id
        +BigInt user_id
        +String token_hash
        +DateTime expires_at
        +revoke()
    }

    class Category {
        +BigInt id
        +BigInt parent_id
        +String name
        +String slug
        +Boolean is_active
        +getSubCategories()
    }

    class Product {
        +BigInt id
        +BigInt category_id
        +String name
        +String slug
        +Int weight_grams
        +Decimal base_price_customer
        +Decimal base_price_reseller
        +Decimal length_cm
        +Decimal width_cm
        +Decimal height_cm
        +Decimal volume_liters
        +getEffectivePrice(role) Decimal
    }

    class ProductVariant {
        +BigInt id
        +BigInt product_id
        +String color_name
        +String sku
        +Int stock
        +Decimal price_adjustment
        +deductStock(qty)
    }

    class ProductImage {
        +BigInt id
        +BigInt product_id
        +BigInt variant_id
        +String image_url
        +Boolean is_primary
    }

    class PresetBagCapacity {
        +BigInt id
        +String name
        +String category
        +Decimal length_cm
        +Decimal width_cm
        +Decimal height_cm
        +Decimal volume_liters
        +Boolean is_rigid
    }

    class ResellerPackage {
        +BigInt id
        +String name
        +String slug
        +Decimal package_price
        +Int required_quantity
        +Boolean is_active
        +validateQuota(count) Boolean
    }

    class ProductResellerPackage {
        +BigInt id
        +BigInt product_id
        +BigInt reseller_package_id
    }

    class Voucher {
        +BigInt id
        +String code
        +VoucherType type
        +DiscountType discount_type
        +Decimal discount_value
        +Decimal min_spend
        +Int quota_total
        +Int quota_used
        +calculateDiscount(amount) Decimal
    }

    class VoucherProduct {
        +BigInt id
        +BigInt voucher_id
        +BigInt product_id
    }

    class UserVoucherUsage {
        +BigInt id
        +BigInt user_id
        +BigInt voucher_id
        +DateTime used_at
    }

    class Cart {
        +BigInt id
        +BigInt user_id
        +calculateTotal() Decimal
        +clear()
    }

    class CartSection {
        +BigInt id
        +BigInt cart_id
        +BigInt reseller_package_id
        +isQuotaFulfilled() Boolean
    }

    class CartItem {
        +BigInt id
        +BigInt cart_id
        +BigInt cart_section_id
        +BigInt product_id
        +BigInt variant_id
        +Int quantity
        +getSubtotal() Decimal
    }

    class Order {
        +BigInt id
        +String order_number
        +BigInt user_id
        +OrderStatus status
        +Decimal net_total
        +Int total_weight_grams
        +JSON shipping_address
        +cancel()
        +markPaid()
    }

    class OrderItem {
        +BigInt id
        +BigInt order_id
        +BigInt product_id
        +BigInt variant_id
        +String sku
        +Decimal unit_price
        +Int quantity
        +Decimal total_price
    }

    class Payment {
        +BigInt id
        +BigInt order_id
        +BigInt payment_account_id
        +Decimal amount
        +PaymentStatus status
        +String proof_image_url
        +approve(adminId)
        +reject(reason)
    }

    class PaymentAccount {
        +BigInt id
        +AccountType type
        +String provider_name
        +String account_number
        +String account_holder_name
        +Boolean is_active
    }

    class Shipment {
        +BigInt id
        +BigInt order_id
        +String waybill_number
        +String courier_name
        +ServiceType service_type
        +ShipmentStatus status
        +JSON tracking_logs
        +updateTracking()
    }

    class Notification {
        +BigInt id
        +BigInt user_id
        +String title
        +String message
        +Boolean is_read
        +markAsRead()
    }

    User "1" --> "0..*" UserAddress
    User "1" --> "0..*" UserVerification
    User "1" --> "0..*" UserToken
    User "1" --> "1" Cart
    User "1" --> "0..*" Order
    User "1" --> "0..*" UserVoucherUsage
    User "1" --> "0..*" Notification

    Category "1" --> "0..*" Product
    Product "1" --> "0..*" ProductVariant
    Product "1" --> "0..*" ProductImage
    Product "1" --> "0..*" ProductResellerPackage
    Product "1" --> "0..*" VoucherProduct

    ResellerPackage "1" --> "0..*" ProductResellerPackage
    ResellerPackage "1" --> "0..*" CartSection

    Cart "1" --> "0..*" CartSection
    Cart "1" --> "0..*" CartItem
    CartSection "0..1" --> "0..*" CartItem

    Voucher "1" --> "0..*" VoucherProduct
    Voucher "1" --> "0..*" UserVoucherUsage

    Order "1" --> "1..*" OrderItem
    Order "1" --> "1" Payment
    Order "1" --> "1" Shipment
    PaymentAccount "1" --> "0..*" Payment

Gambar 3.10 Domain Class Diagram Sistem Nalala Store (24 Entitas)

BAB IV - PERANCANGAN ANTARMUKA (USER INTERFACE)

Perancangan antarmuka sistem e-commerce Nalala Store dirancang menggunakan tata letak responsif ramah seluler dan desktop. Berikut adalah representasi 7 layar wireframe berbasis ASCII yang memetakan alur transaksi dari penelusuran produk hingga audit verifikasi pesanan:

4.1 UI-01 - Beranda & Katalog Produk Tas Fashion (Navigasi & Filter)

Antarmuka utama pengunjung untuk mengeksplorasi koleksi tas fashion wanita, pencarian berdasarkan kategori (Sling Bag, Tote Bag, Ransel, Shoulder Bag), serta filter harga dan status stok.

+----------------------------------------------------------------------------------------------------+
|  [LOGO NALALA STORE]     [Cari Tas Fashion...]         (Katalog) (Paket Reseller) (Keranjang: 2) [Login]   |
+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|  +==================================== HERO BANNER PROMO =======================================+  |
|  |  KOLEKSI TAS WANITA TERKINI & PAKET USAHA RESELLER SPESIAL                                    |  |
|  |  Mulai Bisnis Grosir Tas dengan Paket Cuan 11 Pcs Flat Rp 750.000,- | Gratis Ongkir J&T       |  |
|  |  [ Belanja Sekarang ]    [ Gabung Mitra Reseller ]                                            |  |
|  +===============================================================================================+  |
|                                                                                                    |
|  KATEGORI:  [Semua]  [Sling Bag]  [Shoulder Bag]  [Tote Bag]  [Ransel Wanita]  [Tas Kerja Laptop]  |
|  ------------------------------------------------------------------------------------------------  |
|  FILTER: [Harga: Semua v] [Bahan: Kulit PU v] [Warna: Hitam v]           Urutkan: [Terpopuler v]   |
|                                                                                                    |
|  +---------------------+   +---------------------+   +---------------------+   +-----------------+ |
|  | [ FOTO PRODUK ]     |   | [ FOTO PRODUK ]     |   | [ FOTO PRODUK ]     |   | [ FOTO PRODUK ] | |
|  | NALALA AURA SLING   |   | NALALA CLARA TOTE   |   | NALALA URBAN BACKPK |   | NALALA SOFIA SHL| |
|  | P:24 L:8 T:16 cm    |   | P:34 L:12 T:28 cm   |   | P:30 L:14 T:40 cm   |   | P:26 L:9 T:18 cm| |
|  | Vol: 3.1 Liter      |   | Vol: 11.4 Liter     |   | Vol: 16.8 Liter     |   | Vol: 4.2 Liter  | |
|  | Rp 129.000,-        |   | Rp 189.000,-        |   | Rp 249.000,-        |   | Rp 145.000,-    | |
|  | [Uji Muatan 3D]     |   | [Uji Muatan 3D]     |   | [Uji Muatan 3D]     |   | [Uji Muatan 3D] | |
|  | [ + Keranjang ]     |   | [ + Keranjang ]     |   | [ + Keranjang ]     |   | [ + Keranjang ] | |
|  +---------------------+   +---------------------+   +---------------------+   +-----------------+ |
|                                                                                                    |
|                                        << [1]  [2]  [3]  [4] >>                                    |
+----------------------------------------------------------------------------------------------------+

4.2 UI-02 - Detail Produk & Modal Simulasi 3D Capacity Checker

Halaman spesifikasi detail produk yang terintegrasi dengan modal simulasi interaktif 3D Capacity Checker untuk memvisualisasikan daya muat barang bawaan harian pembeli sebelum transaksi.

+----------------------------------------------------------------------------------------------------+
|  [ < Kembali ke Katalog ]                                          Nalala Store / Tote Bag / Clara |
+----------------------------------------------------------------------------------------------------+
|  [ GALERI FOTO PRODUK ]           |  NALALA CLARA PREMIUM TOTE BAG (KULIT PU WATERPROOF)           |
|                                   |  SKU: NL-CLR-BLK-01 | Kategori: Tote Bag | Terjual: 142 Pcs    |
|  +-----------------------------+  |  Harga Eceran: Rp 189.000,-  (Harga Reseller: Rp 145.000,-)    |
|  |                             |  |  -------------------------------------------------------------  |
|  |      [ FOTO UTAMA 1 ]       |  |  PILIH VARIAN WARNA:                                            |
|  |                             |  |  (x) Hitam Obsidian   ( ) Mocca Latte   ( ) Sage Green          |
|  +-----------------------------+  |  Stok Tersedia: 38 Pcs                                          |
|  [Thumb 1] [Thumb 2] [Thumb 3]    |  -------------------------------------------------------------  |
|                                   |  DIMENSI FISIK & KAPASITAS KUBIKASI:                            |
|                                   |  Panjang: 34 cm | Lebar: 12 cm | Tinggi: 28 cm | Vol: 11.4 Liter|
|                                   |  Berat Fisik: 650 gram | Maksimal Laptop: 14.0 Inci             |
|                                   |  -------------------------------------------------------------  |
|                                   |  [!] RAGU BARANG BAWAAN ANDA MUAT?                              |
|                                   |  [ >>> KLIK DI SINI: UJI KAPASITAS MUAT 3D <<< ]                |
|                                   |  -------------------------------------------------------------  |
|                                   |  Jumlah: [-] [ 1 ] [+]        [ + Masukkan Keranjang ] [Beli]   |
+-----------------------------------+----------------------------------------------------------------+
|  +============================= MODAL 3D CAPACITY CHECKER =======================================+  |
|  |  SIMULASI DAYA MUAT TAS: NALALA CLARA TOTE (Kapasitas Maksimal: 11.4 Liter)                   |  |
|  |  -------------------------------------------------------------------------------------------  |
|  |  PILIH BARANG BAWAAN HARIAN ANDA:          |  VISUALISASI KONTAINER 3D (TOLERANSI RUANG):     |  |
|  |  [x] Laptop 14 Inci  (P:32 L:22 T:2 cm)    |  +--------------------------------------------+  |
|  |  [x] Botol Minum 600ml (D:7 T:23 cm)       |  |  +--------------------------------------+  |  |
|  |  [x] Pouch Make-Up (P:18 L:8 T:12 cm)      |  |  |  [LAPTOP 14"]    [BOTOL]   [POUCH]   |  |  |
|  |  [ ] Mukena Travel Pouch                   |  |  |  Total Terpakai: 5.4 Liter (47.3%)   |  |  |
|  |  [ ] Buku Agenda A5                        |  |  +--------------------------------------+  |  |
|  |  [ ] Payung Lipat Otomatis                 |  |  STATUS DAYA MUAT:  [ OKE: SEMUA MUAT (FIT) ]  |  |
|  |                                            |  +--------------------------------------------+  |  |
|  |  [ Reset Pilihan ]                         |  [ Tutup Modal ]  [ Tetap Masukkan Keranjang ]    |  |
|  +===============================================================================================+  |
+----------------------------------------------------------------------------------------------------+

4.3 UI-03 - Katalog Pemilihan Paket Usaha Reseller (Kompilasi Kuota Wajib 11 Pcs)

Antarmuka pemesanan grosir khusus mitra reseller untuk memilih kombinasi 11 pcs tas pilihan dari daftar produk yang diizinkan dengan penegakan validasi kuota flat otomatis.

+----------------------------------------------------------------------------------------------------+
|  [LOGO NALALA STORE]           PORTAL MITRA RESELLER: PAKET USAHA 11 PCS               [Saldo/Akun] |
+----------------------------------------------------------------------------------------------------+
|  +================================== ATURAN PAKET USAHA ========================================+  |
|  |  PAKET USAHA CUAN 11 PCS - HARGA FLAT BUNDLE: Rp 750.000,- (Harga Rata-rata Rp 68.180/pcs)   |  |
|  |  Syarat: Anda WAJIB memilih tepat 11 item tas dari katalog produk di bawah ini.               |  |
|  |  STATUS SELEKSI SAAT INI: [ 8 / 11 PCS TERPILIH ]  -----> [ BUTUH 3 PCS LAGI UNTUK LANJUT ]  |  |
|  +==============================================================================================+  |
|                                                                                                    |
|  KATALOG PRODUK PAKET USAHA TERSEDIA:                                                              |
|  +-----------------------+  +-----------------------+  +-----------------------+  +--------------+ |
|  | NALALA AURA SLING     |  | NALALA SOFIA SHOULDER |  | NALALA DIANA TOTE     |  | NALALA MINI  | |
|  | Varian: Hitam         |  | Varian: Mocca         |  | Varian: Cream         |  | Varian: Sage | |
|  | Stok: 24 | Terpilih: 3|  | Stok: 15 | Terpilih: 2|  | Stok: 30 | Terpilih: 3|  | Stok: 10     | |
|  | [-] [ 3 ] [+]         |  | [-] [ 2 ] [+]         |  | [-] [ 3 ] [+]         |  | [-] [ 0 ] [+] | |
|  +-----------------------+  +-----------------------+  +-----------------------+  +--------------+ |
|                                                                                                    |
|  RINGKASAN KOMPOSISI PAKET ANDA:                                                                   |
|  1. Nalala Aura Sling (Hitam) x 3 Pcs                                                              |
|  2. Nalala Sofia Shoulder (Mocca) x 2 Pcs                                                          |
|  3. Nalala Diana Tote (Cream) x 3 Pcs                                                              |
|  TOTAL SAAT INI: 8 Pcs (Kurang 3 Pcs) | Total Bobot Estimasi: 5.200 gram (J&T CARGO Disarankan)   |
|                                                                                                    |
|  [ Batal / Kosongkan ]                     [ Masukkan Paket ke Keranjang (Terkunci: Belum 11) ]   |
+----------------------------------------------------------------------------------------------------+

4.4 UI-04 - Keranjang Belanja (Pemisahan Section Reguler vs Paket Usaha)

Antarmuka keranjang belanja yang mengelompokkan barang eceran satuan dan paket grosir reseller secara terpisah agar perhitungan diskon dan kuota paket tidak tercampur.

+----------------------------------------------------------------------------------------------------+
|  [LOGO NALALA]                     KERANJANG BELANJA ANDA                             [Lanjut Belanja]     |
+----------------------------------------------------------------------------------------------------+
|  SECTION 1: BELANJA REGULER (ECERAN SATUAN)                                                        |
|  +---+---------------------------------+---------------+------------+---------------+----------+   |
|  | v | Produk & Varian                 | Harga Satuan  | Kuantitas  | Total Harga   | Aksi     |   |
|  +---+---------------------------------+---------------+------------+---------------+----------+   |
|  | [x| Nalala Clara Tote - Hitam       | Rp 189.000,-  | [-] 1 [+]  | Rp 189.000,-  | [Hapus]  |   |
|  +---+---------------------------------+---------------+------------+---------------+----------+   |
|  Subtotal Belanja Reguler: Rp 189.000,- (Bobot: 650 gram)                                          |
|                                                                                                    |
|  SECTION 2: PAKET USAHA RESELLER #1 (KUOTA 11 PCS VALID - LENGKAP)                                |
|  +=============================================================================================+   |
|  | Paket Usaha Cuan 11 Pcs (Harga Flat Bundle Terkunci)            Harga Paket: Rp 750.000,-   |   |
|  | - 3x Nalala Aura Sling (Hitam)                                                              |   |
|  | - 3x Nalala Sofia Shoulder (Mocca)                                                          |   |
|  | - 5x Nalala Diana Tote (Cream)                                                              |   |
|  | Status Kuota: [ 11 / 11 PCS TEPAT - VALID ]                     [Edit Item Paket] [Hapus]   |   |
|  +=============================================================================================+   |
|  Subtotal Paket Usaha #1: Rp 750.000,- (Bobot: 6.800 gram)                                         |
|  ------------------------------------------------------------------------------------------------  |
|  RINGKASAN BELANJA:                                                                                |
|  Total Item: 12 Pcs (1 Reguler + 11 Paket Reseller) | Total Bobot: 7.450 gram (7.5 Kg)            |
|  Akumulasi Subtotal: Rp 939.000,-                                                                  |
|                                                                                                    |
|  [ Lanjut ke Form Checkout & Ekspedisi J&T Express >> ]                                            |
+----------------------------------------------------------------------------------------------------+

4.5 UI-05 - Form Checkout Pesanan & Kalkulasi Ongkir J&T Express

Halaman konfirmasi checkout dengan pemilihan alamat pengiriman, kalkulasi bobot gabungan, pemilihan jenis layanan kurir J&T Express (EZ / CARGO), dan penukaran kupon voucher.

+----------------------------------------------------------------------------------------------------+
|  [LOGO NALALA]                   CHECKOUT PESANAN & PENGIRIMAN J&T EXPRESS                         |
+----------------------------------------------------------------------------------------------------+
|  1. ALAMAT PENGIRIMAN:                                   |  RINGKASAN PEMBAYARAN:                  |
|  [v] Siti Rahmawati (Rumah Utama)                        |  Subtotal Produk Reguler : Rp 189.000   |
|      Jl. Melati No. 45 RT 02/05, Kebayoran Baru,         |  Subtotal Paket Usaha    : Rp 750.000   |
|      Kota Jakarta Selatan, DKI Jakarta 12150             |  Ongkos Kirim J&T CARGO  : Rp  45.000   |
|      No. Telp: 0812-9876-5432                            |  Diskon Voucher (HEMAT)  : -Rp 25.000   |
|  [ + Pilih Alamat Lain ]  [ + Tambah Alamat Baru ]       |  ------------------------------------   |
|                                                          |  TOTAL TAGIHAN (NET)     : Rp 959.000   |
|  ------------------------------------------------------- |                                         |
|  2. METODE PENGIRIMAN (KURIR J&T EXPRESS):               |  KUPON PROMO / VOUCHER:                 |
|  Total Bobot Pesanan: 7.450 gram (Dibulatkan ke 8 Kg)    |  +------------------------------------+ |
|                                                          |  | KODE: [ NALALAHEMAT      ] [Klaim] | |
|  ( ) J&T EZ (Reguler Estimasi 2-3 Hari)                  |  +------------------------------------+ |
|      Tarif: Rp 12.000 / Kg x 8 Kg = Rp 96.000,-          |  [V] Diskon Rp 25.000,- Berhasil Pasang!|
|                                                          |                                         |
|  (x) J&T CARGO (Grosir Khusus Bobot >= 5 Kg - Disarankan)|  Tenggat Pembayaran: 24 Jam             |
|      Tarif Flat Grosir = Rp 45.000,- (Hemat Rp 51.000)   |                                         |
|                                                          |  [ >>> LANJUTKAN KE PEMBAYARAN <<< ]    |
|  Catatan Kurir: "Tolong titip di pos satpam bila kosong" |                                         |
+----------------------------------------------------------+-----------------------------------------+

4.6 UI-06 - Pembayaran Transfer Multi-Rekening & Form Unggah Struk Bukti Bayar

Antarmuka penyelesaian transaksi yang menampilkan nomor rekening resmi toko (BCA, Mandiri, QRIS), batas waktu pembayaran 24 jam, serta formulir pengunggahan foto struk bukti transfer.

+----------------------------------------------------------------------------------------------------+
|  [LOGO NALALA]                   PORTAL PEMBAYARAN & UPLOAD BUKTI TRANSFER                         |
+----------------------------------------------------------------------------------------------------+
|  NOMOR FAKTUR PESANAN: #NL-ORD-202610-0089                  STATUS: [ MENUNGGU PEMBAYARAN ]        |
|  Sisa Waktu Pembayaran: [ 23 Jam 48 Menit 12 Detik ] (Batas: 15 Okt 2026, 14:30 WIB)              |
|  ------------------------------------------------------------------------------------------------  |
|  TOTAL YANG WAJIB DITRANSFER:                                                                      |
|  +==============================================================================================+  |
|  |   Rp 959.000,-   [ Salin Jumlah ]  (Harap transfer tepat hingga digit terakhir)              |  |
|  +==============================================================================================+  |
|                                                                                                    |
|  PILIH KANAL REKENING PEMBAYARAN TUJUAN:                                                           |
|  (x) BANK CENTRAL ASIA (BCA)     ( ) BANK MANDIRI               ( ) QRIS NALALA STORE DINAMIS      |
|      No. Rek: 8820-1928-11           No. Rek: 137-00-1928-111       [ Tampilkan Kode QR ]          |
|      A.N: NALALA STORE OFFICIAL      A.N: NALALA STORE OFFICIAL     Mendukung BCA, GoPay, OVO, dll |
|      [ Salin No Rekening ]           [ Salin No Rekening ]                                         |
|  ------------------------------------------------------------------------------------------------  |
|  FORMULIR UNGGAH BUKTI STRUK TRANSFER:                                                             |
|  Nama Bank Pengirim   : [ Bank BCA                              ]                                  |
|  Nama Pemilik Rekening: [ Siti Rahmawati                        ]                                  |
|  Waktu Transfer       : [ 14/10/2026 15:45 WIB                  ]                                  |
|  Unggah Foto Bukti    : [ Browse... ] struk_transfer_bca_959rb.jpg (Maksimal 5MB, format JPG/PNG) |
|                                                                                                    |
|  [ X Batalkan Pesanan ]                               [ >>> KIRIM BUKTI PEMBAYARAN <<< ]          |
+----------------------------------------------------------------------------------------------------+

4.7 UI-07 - Dashboard Admin Verifikasi Mutasi Rekening & Penerbitan Resi J&T

Panel kontrol administrator toko untuk memverifikasi keabsahan bukti struk bayar terhadap mutasi rekening koran bank, menyetujui transaksi, serta menerbitkan resi otomatis AWB J&T.

+----------------------------------------------------------------------------------------------------+
|  NALALA ADMIN CONSOLE         [Pesanan]  [Verifikasi Bayar (3)]  [Produk]  [Resi J&T]   (Admin Nalala v)   |
+----------------------------------------------------------------------------------------------------+
|  AUDIT VERIFIKASI PEMBAYARAN (STATUS: WAITING_VERIFICATION)                                        |
|  ------------------------------------------------------------------------------------------------  |
|  DAFTAR ANTRIAN:                                                                                   |
|  1. #NL-ORD-202610-0089 | Pembeli: Siti Rahmawati | Net: Rp 959.000,- | BCA | [AUDIT SEKARANG]     |
|  2. #NL-ORD-202610-0088 | Pembeli: Dewi Sartika   | Net: Rp 750.000,- | QRIS| [AUDIT SEKARANG]     |
|  ------------------------------------------------------------------------------------------------  |
|  DETAIL TRANSAKSI TERPILIH: #NL-ORD-202610-0089                                                   |
|  +-----------------------------------+---------------------------------------------------------+  |
|  | PRATINJAU BUKTI STRUK TRANSFER:   | DATA VERIFIKASI TRANSAKSI:                              |  |
|  | +-------------------------------+ | Order ID     : #NL-ORD-202610-0089                      |  |
|  | | [ CITRA STRUK TRANSFER BCA ]  | | Pembeli      : Siti Rahmawati (CUSTOMER)                |  |
|  | | Nilai Tercetak: Rp 959.000,-  | | Tagihan Net  : Rp 959.000,-                             |  |
|  | | Pengirim: Siti Rahmawati      | | Bank Tujuan  : BCA (8820-1928-11 A.N Nalala Official)   |  |
|  | | Tanggal : 14/10/2026 15:45    | | Ekspedisi    : J&T CARGO (Bobot: 7.5 Kg)                |  |
|  | +-------------------------------+ | Percobaan Ke : 1 dari 3x batas re-upload                |  |
|  | [ Perbesar Gambar Bukti Struk ] | ------------------------------------------------------- |  |
|  |                                   | KEPUTUSAN VERIFIKASI ADMIN:                             |  |
|  | Catatan Penolakan (Jika Fiktif):  | [v] Mutasi Internet Banking Sesuai (Dana Telah Masuk)   |  |
|  | [                               ] |                                                         |  |
|  | [ X TOLAK PEMBAYARAN ]            | [ >>> SETUJUI PEMBAYARAN & TERBITKAN RESI J&T <<< ]     |  |
|  +-----------------------------------+---------------------------------------------------------+  |
|  * Saat disetujui: Sistem otomatis memanggil API J&T, menghasilkan Nomor Resi (AWB), mengubah      |  |
|    status pesanan menjadi PAID, dan mengirim notifikasi WhatsApp resi ke nomor pelanggan.         |  |
+----------------------------------------------------------------------------------------------------+

BAB V - PENGUJIAN SISTEM

Pengujian sistem dilakukan secara komprehensif melalui dua pendekatan: pengujian struktural internal (White Box Testing) dengan metode Basis Path Testing pada fungsi inti verifikasi pembayaran, serta pengujian fungsionalitas eksternal (Black Box Testing) dengan metode Equivalence Partitioning dan Boundary Value Analysis.

5.1 White Box Testing - Fungsi verifyPayment()

Fungsi verifyPayment() pada service layer merupakan titik kritis integritas finansial dan logistik sistem yang bertugas memvalidasi bukti struk pembayaran, memeriksa kecukupan nominal transfer terhadap nilai net_total, mengeksekusi penolakan atau persetujuan, serta menerbitkan resi AWB J&T Express.

5.1.1 Pseudocode Logika Fungsi verifyPayment()

async function verifyPayment(orderId, adminId, action, rejectionReason) {
  // [Node 1] Inisialisasi proses verifikasi audit pembayaran
  const payment = await prisma.payments.findUnique({
    where: { order_id: orderId },
    include: { order: true }
  });

  // [Node 2] Predikat 1: Apakah entitas pembayaran ditemukan?
  if (!payment) {
    // [Node 11] Lempar exception error data tidak ditemukan
    throw new Error("ERR_PAYMENT_NOT_FOUND");
  }

  // [Node 3] Predikat 2: Apakah status pembayaran sedang menunggu audit?
  if (payment.status !== 'WAITING_VERIFICATION') {
    // [Node 11] Lempar exception status tidak valid untuk diverifikasi
    throw new Error("ERR_INVALID_PAYMENT_STATUS");
  }

  // [Node 4] Predikat 3: Apakah aksi admin adalah PENOLAKAN (REJECT)?
  if (action === 'REJECT') {
    // [Node 5] Eksekusi penolakan transaksi dalam atomic transaction
    await prisma.$transaction([
      prisma.payments.update({
        where: { id: payment.id },
        data: {
          status: 'REJECTED',
          rejection_reason: rejectionReason,
          reupload_attempts: { increment: 1 }
        }
      }),
      prisma.orders.update({
        where: { id: orderId },
        data: { status: 'PENDING_PAYMENT' }
      }),
      prisma.notifications.create({
        data: {
          user_id: payment.order.user_id,
          title: 'Pembayaran Ditolak',
          message: 'Bukti transfer tidak sesuai: ' + rejectionReason,
          type: 'PAYMENT_REJECTED'
        }
      })
    ]);
    // [Node 6] Selesai: Kembalikan respons penolakan sukses
    return { success: false, status: 'REJECTED' };
  }

  // [Node 7] Aksi APPROVE: Ambil entitas order terkait untuk evaluasi nominal
  const order = await prisma.orders.findUnique({ where: { id: orderId } });

  // [Node 8] Predikat 4: Apakah nominal transfer mencukupi net_total order?
  if (payment.amount < order.net_total) {
    // [Node 11] Lempar exception nominal transfer kurang dari tagihan
    throw new Error("ERR_AMOUNT_INSUFFICIENT");
  }

  // [Node 9] Terbitkan nomor resi J&T Express dan setujui transaksi
  const generatedAwb = await jntLogisticsService.generateAWB(order);
  await prisma.$transaction([
    prisma.payments.update({
      where: { id: payment.id },
      data: {
        status: 'VERIFIED',
        verified_at: new Date(),
        verified_by: adminId
      }
    }),
    prisma.orders.update({
      where: { id: orderId },
      data: { status: 'PAID' }
    }),
    prisma.shipments.create({
      data: {
        order_id: orderId,
        waybill_number: generatedAwb,
        courier_name: 'J&T Express',
        service_type: order.shipping_service,
        status: 'MANIFESTED',
        tracking_logs: JSON.stringify([{
          timestamp: new Date(),
          status: 'MANIFESTED',
          note: 'Resi dicetak, paket menunggu pickup kurir J&T'
        }])
      }
    }),
    prisma.notifications.create({
      data: {
        user_id: order.user_id,
        title: 'Pembayaran Diterima & Resi Terbit',
        message: 'Pesanan Anda telah dibayar. Nomor Resi J&T: ' + generatedAwb,
        type: 'PAYMENT_VERIFIED'
      }
    })
  ]);

  // [Node 10] Selesai: Kembalikan respons approval dan nomor resi AWB J&T
  return { success: true, status: 'VERIFIED', waybill: generatedAwb };
}

5.1.2 Graf Alir (Flow Graph)

Graf alir pada Gambar 5.1 memetakan aliran kendali eksekusi fungsi verifyPayment() ke dalam 11 node dan 14 edge:

flowchart TD
    1([Node 1: Start verifyPayment]) --> 2{Node 2: payment == null?}
    2 -->|Ya / True| 11([Node 11: Throw PAYMENT_NOT_FOUND])
    2 -->|Tidak / False| 3{Node 3: status != WAITING_VERIFICATION?}
    3 -->|Ya / True| 11
    3 -->|Tidak / False| 4{Node 4: action == REJECT?}
    4 -->|Ya / True| 5[Node 5: Execute DB Reject & Notify]
    5 --> 6([Node 6: Return REJECTED])
    4 -->|Tidak / False: APPROVE| 7[Node 7: Fetch Order by orderId]
    7 --> 8{Node 8: amount < net_total?}
    8 -->|Ya / True| 11
    8 -->|Tidak / False| 9[Node 9: Generate J&T AWB & DB Commit]
    9 --> 10([Node 10: Return VERIFIED with Waybill])

Gambar 5.1 Graf Alir (Flow Graph) Pengujian White Box Fungsi verifyPayment()

5.1.3 Perhitungan Kompleksitas Siklomatis (Cyclomatic Complexity)

Kompleksitas siklomatis dihitung menggunakan tiga formula matematis dasar pengujian perangkat lunak:

1. Formula Predikat Keputusan (P + 1):
   Jumlah node predikat (node percabangan keputusan) bernilai 4 (Node 2, Node 3, Node 4, dan Node 8).
   V(G) = P + 1 = 4 + 1 = 5
2. Formula Edge dan Node (E - N + 2):
   Jumlah sisi aliran kendali (Edges) E = 14, dan jumlah simpul pernyataan (Nodes) N = 11.
   V(G) = E - N + 2 = 14 - 11 + 2 = 5
3. Formula Region Terisolasi (R):
   Jumlah area tertutup dan tidak tertutup pada graf bidang datar berjumlah 5 region.
   V(G) = R = 5

Berdasarkan perhitungan di atas, diperoleh V(G) = 5, yang berarti terdapat tepat 5 jalur independen (Basis Paths) yang wajib diuji untuk menjamin 100% statement and branch coverage.

5.1.4 Tabel Kasus Uji Basis Path Testing

5.2 Black Box Testing (16 Skenario Fungsional)

Pengujian fungsionalitas sistem dilakukan terhadap 16 skenario operasional menggunakan teknik Equivalence Partitioning (EP) untuk memvalidasi partisi data valid/invalid, serta Boundary Value Analysis (BVA) untuk menguji batas kritis kuota 11 pcs paket reseller, batas waktu 5 menit OTP, dan pembulatan bobot gram ekspedisi J&T Express:

BAB VI - ARSITEKTUR & PENUTUP

Bab penutup ini menyajikan arsitektur multi-tier sistem terdistribusi Nalala Store, rekomendasi pemilihan teknologi, kesimpulan hasil perancangan dan pengujian, serta saran untuk pengembangan di masa mendatang.

6.1 Arsitektur Sistem 4-Tier Terdistribusi

Sistem Nalala Store dirancang menggunakan arsitektur 4-Tier (Presentation Tier, Web/API Gateway Tier, Business Logic Tier, dan Persistence & External Services Tier) untuk menjamin skalabilitas tinggi dan pemisahan tanggung jawab komputasi secara modular:

flowchart TB
    subgraph TIER1[TIER 1: CLIENT PRESENTATION TIER]
        direction LR
        P1[Web Browser Modern<br/>Desktop & Mobile Responsive]
        P2[Next.js 15 Client Components<br/>Tailwind CSS & Canvas 3D]
        P3[State Management<br/>Zustand & React Hooks]
    end

    subgraph TIER2[TIER 2: WEB & API GATEWAY TIER]
        direction LR
        G1[Reverse Proxy & Nginx<br/>SSL Termination]
        G2[Express.js REST API Server<br/>Node.js Runtime]
        G3[Security Middleware<br/>JWT Auth, CORS, Helmet, Rate Limit]
    end

    subgraph TIER3[TIER 3: BUSINESS LOGIC & SERVICE TIER]
        direction TB
        subgraph SERVICES[Core Engine Microservices]
            S1[Cart & Reseller Package Validator<br/>Aturan Flat Kuota 11 Pcs]
            S2[3D Capacity Checker Engine<br/>PxLxT & Kubikasi Liter Calculator]
            S3[J&T Logistics Calculation Engine<br/>Rounding Berat & Tarif EZ/CARGO]
            S4[Payment Verification & Audit Hub<br/>Multi-Bank & QRIS Mutasi Checker]
            S5[Notification & Webhook Dispatcher<br/>Socket.IO & WhatsApp Provider]
        end
    end

    subgraph TIER4[TIER 4: PERSISTENCE & EXTERNAL SERVICES]
        direction LR
        D1[(MySQL 8.0 Database<br/>Prisma ORM 24 Model)]
        D2[Object Cloud Storage<br/>Foto Produk & Bukti Bayar]
        D3[J&T Express API Gateway<br/>Tarif, AWB & Live Tracking]
        D4[WhatsApp Business API<br/>OTP & Notifikasi Transaksi]
    end

    TIER1 -->|HTTPS / JSON REST API| TIER2
    TIER2 -->|Controller Invocation| TIER3
    TIER3 -->|Prisma Client Queries| D1
    TIER3 -->|Upload S3 Compatible| D2
    TIER3 -->|Logistics API Integration| D3
    TIER3 -->|Messaging Integration| D4

Gambar 6.1 Arsitektur 4-Tier Terdistribusi Nalala Store

Tabel 6.1 Deskripsi Layer Arsitektur Multi-Tier Sistem Nalala Store

6.2 Rekomendasi Teknologi Sistem

Tabel di bawah ini menguraikan daftar pustaka dan perangkat lunak terpilih yang direkomendasikan untuk deployment sistem pada lingkungan produksi:

6.3 Kesimpulan

1. Perancangan basis data dengan 24 model persisten berhasil mengakomodasi kebutuhan bisnis komprehensif Nalala Store, mulai dari transaksi ritel, paket usaha reseller 11 pcs bersekat, riwayat voucher promosi, audit pembayaran transfer, hingga logistik kurir J&T Express.
2. Fitur 3D Bag Capacity Checker berhasil memecahkan kendala ketidakpastian kapasitas pembeli tas wanita secara daring melalui evaluasi matematis kubikasi volume liter dan toleransi dimensi tiga dimensi (panjang, lebar, dan tinggi).
3. Model keranjang belanja bersekat (cart_sections) berhasil menegakkan aturan kuota flat 11 pcs secara konsisten dan mengisolasi kalkulasi harga grosir dari belanja reguler eceran.
4. Pengujian White Box Testing pada fungsi verifyPayment() membuktikan bahwa seluruh 5 jalur independen (Basis Paths) dieksekusi dengan hasil 100% PASS (V(G)=5), membuktikan ketahanan logika persetujuan pembayaran dan pencegahan fraud bukti bayar.
5. Pengujian Black Box Testing pada 16 skenario membuktikan bahwa seluruh fungsionalitas sistem berjalan sesuai spesifikasi kebutuhan pengguna (100% PASS).

6.4 Saran Pengembangan

1. Otomatisasi Mutasi Bank via Webhook / Aggregator: Di masa mendatang, proses verifikasi pembayaran transfer manual dapat diintegrasikan dengan Payment Gateway otomatis (seperti Midtrans atau Xendit) untuk menghilangkan proses audit manual oleh admin.
2. Augmented Reality (AR) Try-On: Mengembangkan fitur penampil tas menggunakan WebAR pada kamera ponsel cerdas agar pembeli dapat melihat proporsi tas saat dikenakan di tubuh secara nyata.
3. Integrasi Multi-Kurir Ekspedisi: Menambahkan pilihan kurir logistik lain seperti SiCepat, JNE, dan Paxel untuk memperluas jangkauan layanan logistik pengiriman ke seluruh pelosok Nusantara.