Metix System Architecture v1.0 API

Interactive Visual System Flow & Sequence Diagrams

Swagger API Docs Back to App
Overview Architecture

End-to-End System Architecture

High Resolution SVG
METIX PLATFORM ARCHITECTURE & SYSTEM FLOW Alur Terintegrasi Frontend Client, Backend API, Gate Check-In, & Payment Gateway STEP 01 • CLIENT Next.js App • User Authentication • Ticket Catalog • Bearer Token Auth STEP 02 • BACKEND Laravel REST API • Sanctum Auth & Roles • Event & Quota Logic • OTP Verification • PDF Surat Kuasa Gen • Wristband QR Logic STEP 03A • PAYMENTS Midtrans Gateway • QRIS / Bank Transfer Snap • Auto Webhook Callback STEP 03B • VENUE GATE Scan & Wristband Pairing • Gate Scanner Validation • Wristband QR Code Pairing Metix Platform © 2026 RESTful API Specifications • Powered by Developer Lutfi Fahri

01. Client Applications

Frontend Next.js Web App dan Mobile Gate App berkomunikasi via HTTP REST API menggunakan Sanctum Bearer Token.

02. Metix Core API

Server Laravel memproses otentikasi, validasi kuota tiket, otorisasi role, pembuatan OTP, dan PDF Surat Kuasa.

03. Integrations & Gate

Midtrans Gateway memproses pembayaran QRIS/Bank, Webhook otomatis, penerbitan E-Tiket QR & Wristband pairing.

Workflow 01

Authentication & Sanctum Token Lifecycle

sequenceDiagram autonumber actor Client as Frontend (Next.js / Mobile) participant API as Laravel REST API participant DB as MySQL Database Client->>API: POST /api/login (email, password) API->>DB: Verify User Credentials & Password Hash DB-->>API: User Found & Verified API->>DB: Generate Sanctum Bearer Token (personal_access_tokens) API-->>Client: 200 OK (token: "1|xyz...", user: {...}) Note over Client,API: Client includes "Authorization: Bearer 1|xyz..." in subsequent requests
Workflow 02

Ticket Purchasing & Midtrans Payment Gateway

sequenceDiagram autonumber actor Buyer as Pembeli (Frontend / App) participant API as Laravel API participant Service as CheckoutService participant Midtrans as Midtrans Gateway participant DB as Database Buyer->>API: POST /api/events/{id}/orders (ticket_type_id, quantity) API->>Service: Validate Quota & Calculate Subtotal / Discount Service->>DB: Create Order (status: "pending") & OrderItems Service->>Midtrans: Request Snap Payment Token / Snap Redirect URL Midtrans-->>Service: Return Snap Token API-->>Buyer: 200 OK (order_number, snap_token, grand_total) Buyer->>Midtrans: Pay via QRIS / Bank Transfer / Credit Card Midtrans->>API: POST /api/midtrans/webhook (order_id, transaction_status) API->>DB: Update Order status to "paid" & Generate E-Tickets (PDF & QR Token) API-->>Midtrans: 200 OK (Webhook Processed)
Workflow 03

Venue Entry & Ticket Check-In Gate

sequenceDiagram autonumber actor Staff as Panitia / Gate Officer participant App as Scanner App / Frontend participant API as Laravel CheckIn API participant DB as Database Staff->>App: Scan Ticket QR Code / Input Code App->>API: POST /api/checkin (qr_token / ticket_code, event_id) API->>DB: Validate Ticket Existence, Event ID, & Expiry alt Ticket Valid & Not Checked-In API->>DB: Mark Ticket status = "checked_in" & Record check_in_logs API-->>App: 200 OK (success: true, holder_name, ticket_type) else Ticket Already Used / Invalid API-->>App: 400 Bad Request (success: false, message: "Tiket sudah pernah digunakan!") end
Workflow 04

Ticket Transfer & PDF Surat Kuasa Generator

sequenceDiagram autonumber actor Sender as Pemilik Tiket (Sender) participant API as Laravel API participant Service as TicketTransferService actor Recipient as Penerima Tiket (Recipient) participant DB as Database Sender->>API: POST /api/tickets/{id}/transfer (recipient_email) API->>Service: Send OTP Verification Code to Sender's Email Sender->>API: POST /api/tickets/transfers/{id}/verify-otp (otp_code) API->>DB: Verify OTP & Change Transfer status to "pending_acceptance" API->>Recipient: Send Claim Link Email with Token Recipient->>API: POST /api/transfers/{uuid}/sign-accept (attachment signature) API->>Service: Generate Official PDF Surat Kuasa & Re-assign Ticket Ownership API-->>Recipient: 200 OK (Ticket Ownership Transferred)
Workflow 05

Wristband QR Code Pairing & Printing

sequenceDiagram autonumber actor Admin as Panitia / Officer participant API as Wristband API participant DB as Database Admin->>API: POST /api/wristbands/bulk-generate (event_id, quantity) API->>DB: Generate Unique Wristband QR Codes (status: "GENERATED") Admin->>API: POST /api/wristbands/{qr}/pair (ticket_code) API->>DB: Pair Wristband QR Code with Ticket & Set Status = "ACTIVE" API-->>Admin: 200 OK (Wristband Paired & Ready for Venue Entry)