From b3c44df8334fcd696d2420cb2cb943636d5a9812 Mon Sep 17 00:00:00 2001
From: Rakha adi <rakhaadi24@gmail.com>
Date: Wed, 19 Nov 2025 22:10:32 +0700
Subject: [PATCH] feat(ui): split MainActivity into ViewModel/UI/network
 modules; add checklist UI & 3D PanicButton

Split MainActivity into MainViewModel, MainScreen, PanicButton, NotificationSender, and ReportOption.\n\nReplaced dropdown with checklist, added emoji icons, notes field, and validation (catatan wajib when 'Lainnya' selected). Improves maintainability and testability. Ran editor static checks; no errors reported.
---
 .idea/copilot.data.migration.agent.xml        |  11 +
 .idea/copilotDiffState.xml                    |  18 -
 .../ac/ubharajaya/panicbutton/MainActivity.kt | 364 +-----------------
 .../ac/ubharajaya/panicbutton/MainScreen.kt   | 100 +++++
 .../ubharajaya/panicbutton/MainViewModel.kt   |  69 ++++
 .../panicbutton/NotificationSender.kt         |  29 ++
 .../ac/ubharajaya/panicbutton/PanicButton.kt  |  56 +++
 .../ac/ubharajaya/panicbutton/ReportOption.kt |   3 +
 8 files changed, 274 insertions(+), 376 deletions(-)
 delete mode 100644 .idea/copilotDiffState.xml
 create mode 100644 app/src/main/java/id/ac/ubharajaya/panicbutton/MainScreen.kt
 create mode 100644 app/src/main/java/id/ac/ubharajaya/panicbutton/MainViewModel.kt
 create mode 100644 app/src/main/java/id/ac/ubharajaya/panicbutton/NotificationSender.kt
 create mode 100644 app/src/main/java/id/ac/ubharajaya/panicbutton/PanicButton.kt
 create mode 100644 app/src/main/java/id/ac/ubharajaya/panicbutton/ReportOption.kt

diff --git a/.idea/copilot.data.migration.agent.xml b/.idea/copilot.data.migration.agent.xml
index dbdf9f5..6aa0d3a 100644
--- a/.idea/copilot.data.migration.agent.xml
+++ b/.idea/copilot.data.migration.agent.xml
@@ -16,6 +16,12 @@
               <option value="fe272d92-3acf-42e8-bd88-66dc00800c3f" />
               <option value="ea6afe5a-c296-461b-a4a7-49209b3d7937" />
               <option value="2b41e5bf-4d90-46d8-8fc8-7b41c3f788e1" />
+              <option value="34b3c4dc-eb50-43b4-98d0-2b9771161619" />
+              <option value="b32841ec-424b-46e4-af25-b31a5ca4ae51" />
+              <option value="8589889d-a532-45c6-9ffe-0671c2d32583" />
+              <option value="4f53b359-f3df-449a-ab3e-d112d5df446a" />
+              <option value="e2907e39-fda1-4832-99ff-fb7407d64db3" />
+              <option value="0e6a533b-db2a-4977-8228-bfeaa867eef9" />
             </set>
           </value>
         </entry>
@@ -25,6 +31,11 @@
       <entry key="bf5061b4-a1e9-4600-a273-ea8e51b2ce89">
         <set>
           <option value="file://$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/MainActivity.kt" />
+          <option value="file://$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/ReportOption.kt" />
+          <option value="file://$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/MainScreen.kt" />
+          <option value="file://$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/PanicButton.kt" />
+          <option value="file://$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/MainViewModel.kt" />
+          <option value="file://$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/NotificationSender.kt" />
         </set>
       </entry>
     </pendingWorkingSetItems>
diff --git a/.idea/copilotDiffState.xml b/.idea/copilotDiffState.xml
deleted file mode 100644
index a2b9b33..0000000
--- a/.idea/copilotDiffState.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CopilotDiffPersistence">
-    <option name="pendingDiffs">
-      <map>
-        <entry key="$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/MainActivity.kt">
-          <value>
-            <PendingDiffInfo>
-              <option name="filePath" value="$PROJECT_DIR$/app/src/main/java/id/ac/ubharajaya/panicbutton/MainActivity.kt" />
-              <option name="originalContent" value="package id.ac.ubharajaya.panicbutton&#10;&#10;import android.os.Bundle&#10;import androidx.activity.ComponentActivity&#10;import androidx.activity.compose.setContent&#10;import androidx.compose.animation.core.tween&#10;import androidx.compose.animation.core.animateDpAsState&#10;import androidx.compose.animation.core.animateFloatAsState&#10;import androidx.compose.foundation.background&#10;import androidx.compose.foundation.clickable&#10;import androidx.compose.foundation.interaction.MutableInteractionSource&#10;import androidx.compose.foundation.interaction.collectIsPressedAsState&#10;import androidx.compose.foundation.layout.*&#10;import androidx.compose.foundation.selection.toggleable&#10;import androidx.compose.foundation.shape.CircleShape&#10;import androidx.compose.foundation.shape.RoundedCornerShape&#10;import androidx.compose.material3.*&#10;import androidx.compose.runtime.*&#10;import androidx.compose.ui.Alignment&#10;import androidx.compose.ui.Modifier&#10;import androidx.compose.ui.draw.scale&#10;import androidx.compose.ui.draw.shadow&#10;import androidx.compose.ui.graphics.Brush&#10;import androidx.compose.ui.graphics.Color&#10;import androidx.compose.ui.text.font.FontWeight&#10;import androidx.compose.ui.unit.dp&#10;import androidx.compose.ui.unit.sp&#10;import androidx.compose.ui.window.Dialog&#10;import okhttp3.MediaType.Companion.toMediaType&#10;import okhttp3.OkHttpClient&#10;import okhttp3.Request&#10;import okhttp3.RequestBody.Companion.toRequestBody&#10;&#10;class MainActivity : ComponentActivity() {&#10;    override fun onCreate(savedInstanceState: Bundle?) {&#10;        super.onCreate(savedInstanceState)&#10;        setContent {&#10;            MyApp()&#10;        }&#10;    }&#10;}&#10;&#10;&#10;@Composable&#10;fun MyApp() {&#10;    // dialogMessage akan menampung hasil callback dari sendNotification; null = tidak tampil&#10;    var dialogMessage by remember { mutableStateOf&lt;String?&gt;(null) }&#10;&#10;    // Report options (checkbox-style)&#10;    val reportOptions = listOf(&quot;Kebakaran&quot;, &quot;Banjir&quot;, &quot;Gempa Bumi&quot;, &quot;Huru Hara/Demostrasi&quot;, &quot;Lainnya&quot;)&#10;    val checkedMap = remember { mutableStateMapOf&lt;String, Boolean&gt;().apply { reportOptions.forEach { put(it, false) } } }&#10;    var otherNote by remember { mutableStateOf(&quot;&quot;) }&#10;&#10;    // UI&#10;    Column(&#10;        modifier = Modifier&#10;            .fillMaxSize()&#10;            .padding(16.dp),&#10;        verticalArrangement = Arrangement.Center,&#10;        horizontalAlignment = Alignment.CenterHorizontally&#10;    ) {&#10;        // Checklist area similar to the wireframe&#10;        Surface(&#10;            tonalElevation = 2.dp,&#10;            shape = RoundedCornerShape(8.dp),&#10;            modifier = Modifier&#10;                .fillMaxWidth()&#10;                .padding(horizontal = 24.dp)&#10;        ) {&#10;            Column(modifier = Modifier.padding(12.dp)) {&#10;                Text(text = &quot;Terjadi Kondisi Darurat&quot;, fontWeight = FontWeight.SemiBold)&#10;                Spacer(modifier = Modifier.height(8.dp))&#10;&#10;                // Each option as a row with checkbox&#10;                reportOptions.forEach { option -&gt;&#10;                    Row(&#10;                        verticalAlignment = Alignment.CenterVertically,&#10;                        modifier = Modifier&#10;                            .fillMaxWidth()&#10;                            .padding(vertical = 4.dp)&#10;                            .toggleable(&#10;                                value = checkedMap[option] ?: false,&#10;                                onValueChange = { checked -&gt; checkedMap[option] = checked }&#10;                            )&#10;                    ) {&#10;                        Checkbox(&#10;                            checked = checkedMap[option] ?: false,&#10;                            onCheckedChange = { checked -&gt; checkedMap[option] = checked }&#10;                        )&#10;                        Spacer(modifier = Modifier.width(8.dp))&#10;                        Text(text = option)&#10;                    }&#10;                }&#10;&#10;                // Additional notes field — show always (wireframe shows a note field)&#10;                Spacer(modifier = Modifier.height(8.dp))&#10;                OutlinedTextField(&#10;                    value = otherNote,&#10;                    onValueChange = { otherNote = it },&#10;                    label = { Text(&quot;Catatan tambahan (opsional)&quot;) },&#10;                    placeholder = { Text(&quot;Catatan tambahan ...&quot;) },&#10;                    modifier = Modifier&#10;                        .fillMaxWidth()&#10;                        .padding(top = 8.dp)&#10;                )&#10;&#10;                Spacer(modifier = Modifier.height(8.dp))&#10;&#10;                // small hint when Lainnya is checked but note empty&#10;                if ((checkedMap[&quot;Lainnya&quot;] == true) &amp;&amp; otherNote.isBlank()) {&#10;                    Text(&#10;                        text = &quot;Catatan wajib jika Anda memilih 'Lainnya'&quot;,&#10;                        color = Color(0xFFB71C1C),&#10;                        style = MaterialTheme.typography.bodySmall,&#10;                        modifier = Modifier.padding(top = 6.dp)&#10;                    )&#10;                }&#10;            }&#10;        }&#10;&#10;        Spacer(modifier = Modifier.height(18.dp))&#10;&#10;        // Keep the existing nice PanicButton unchanged&#10;        PanicButton(onClick = {&#10;            // Validation: at least one option selected&#10;            val selected = reportOptions.filter { checkedMap[it] == true }&#10;            if (selected.isEmpty()) {&#10;                dialogMessage = &quot;Pilih minimal satu jenis laporan sebelum mengirim.&quot;&#10;                return@PanicButton&#10;            }&#10;            if (selected.contains(&quot;Lainnya&quot;) &amp;&amp; otherNote.isBlank()) {&#10;                dialogMessage = &quot;Untuk opsi 'Lainnya', harap tambahkan catatan yang menjelaskan keadaan.&quot;&#10;                return@PanicButton&#10;            }&#10;&#10;            // build message: list selected options and the note&#10;            val message = buildString {&#10;                append(&quot;Jenis Laporan: &quot;)&#10;                append(selected.joinToString(&quot;, &quot;))&#10;                append(&quot;\n&quot;)&#10;                append(&quot;Keterangan: &quot;)&#10;                // Include the note regardless of the selected options; if blank write '-'&#10;                if (otherNote.isNotBlank()) append(otherNote.trim()) else append(&quot;-&quot;)&#10;                append(&quot;\n&quot;)&#10;                append(&quot;Pengirim: Rakha adi saputro 202310715083&quot;)&#10;            }&#10;&#10;            sendNotification(message) { response -&gt; dialogMessage = response }&#10;        })&#10;&#10;        Spacer(modifier = Modifier.height(16.dp))&#10;&#10;        // dialog hasil&#10;        if (dialogMessage != null) {&#10;            Dialog(onDismissRequest = { dialogMessage = null }) {&#10;                Box(&#10;                    modifier = Modifier&#10;                        .fillMaxSize()&#10;                        .padding(24.dp),&#10;                    contentAlignment = Alignment.Center&#10;                ) {&#10;                    Surface(&#10;                        shape = RoundedCornerShape(12.dp),&#10;                        color = Color.White,&#10;                        tonalElevation = 8.dp,&#10;                        modifier = Modifier.wrapContentWidth()&#10;                    ) {&#10;                        Column(&#10;                            modifier = Modifier&#10;                                .padding(0.dp)&#10;                                .widthIn(min = 280.dp),&#10;                            horizontalAlignment = Alignment.CenterHorizontally&#10;                        ) {&#10;                            // header&#10;                            Box(&#10;                                modifier = Modifier&#10;                                    .fillMaxWidth()&#10;                                    .background(color = Color(0xFFB71C1C))&#10;                                    .padding(vertical = 12.dp),&#10;                                contentAlignment = Alignment.Center&#10;                            ) {&#10;                                Text(&#10;                                    text = &quot;Notifikasi&quot;,&#10;                                    color = Color.White,&#10;                                    fontWeight = FontWeight.Bold,&#10;                                    fontSize = 18.sp&#10;                                )&#10;                            }&#10;&#10;                            Spacer(modifier = Modifier.height(12.dp))&#10;&#10;                            // message&#10;                            Text(&#10;                                text = dialogMessage ?: &quot;&quot;,&#10;                                color = Color.Black,&#10;                                modifier = Modifier.padding(horizontal = 16.dp)&#10;                            )&#10;&#10;                            Spacer(modifier = Modifier.height(20.dp))&#10;&#10;                            // action&#10;                            Box(&#10;                                modifier = Modifier&#10;                                    .fillMaxWidth()&#10;                                    .padding(horizontal = 16.dp, vertical = 12.dp),&#10;                                contentAlignment = Alignment.Center&#10;                            ) {&#10;                                Button(&#10;                                    onClick = { dialogMessage = null },&#10;                                    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFB71C1C))&#10;                                ) {&#10;                                    Text(text = &quot;OK&quot;, color = Color.White)&#10;                                }&#10;                            }&#10;                        }&#10;                    }&#10;                }&#10;            }&#10;        }&#10;    }&#10;}&#10;&#10;&#10;// New: 3D-styled PanicButton with press animation and glossy highlight&#10;@Composable&#10;fun PanicButton(&#10;    onClick: () -&gt; Unit,&#10;    modifier: Modifier = Modifier&#10;) {&#10;    // theme colors&#10;    val panicColor = Color(0xFFB71C1C)&#10;    val darkShade = Color(0xFF7F0F0F)&#10;    val lightAccent = Color(0xFFFF8A80)&#10;&#10;    // interaction for press-state&#10;    val interactionSource = remember { MutableInteractionSource() }&#10;    val isPressed by interactionSource.collectIsPressedAsState()&#10;&#10;    // animations: scale down and lower elevation when pressed&#10;    val scaleAnim by animateFloatAsState(targetValue = if (isPressed) 0.96f else 1f, animationSpec = tween(120))&#10;    val elevationAnim by animateDpAsState(targetValue = if (isPressed) 6.dp else 18.dp, animationSpec = tween(120))&#10;&#10;    // vertical gradient to simulate 3D lighting&#10;    val gradient = Brush.verticalGradient(listOf(lightAccent, panicColor, darkShade))&#10;&#10;    Column(&#10;        horizontalAlignment = Alignment.CenterHorizontally,&#10;        verticalArrangement = Arrangement.Center,&#10;        modifier = modifier&#10;    ) {&#10;        Box(contentAlignment = Alignment.Center) {&#10;            // soft outer shadow (ground shadow)&#10;            Box(&#10;                modifier = Modifier&#10;                    .size(210.dp)&#10;                    .shadow(elevation = elevationAnim, shape = CircleShape)&#10;                    .background(color = Color.Black.copy(alpha = 0.12f), shape = CircleShape)&#10;            )&#10;&#10;            // main 3D button&#10;            Box(&#10;                contentAlignment = Alignment.Center,&#10;                modifier = Modifier&#10;                    .size(170.dp)&#10;                    .scale(scaleAnim)&#10;                    .shadow(elevation = elevationAnim, shape = CircleShape)&#10;                    .background(brush = gradient, shape = CircleShape)&#10;                    .clickable(indication = null, interactionSource = interactionSource) {&#10;                        onClick()&#10;                    }&#10;            ) {&#10;                // glossy highlight (small white circle offset to top-left)&#10;                Box(&#10;                    modifier = Modifier&#10;                        .size(70.dp)&#10;                        .offset(x = (-24).dp, y = (-28).dp)&#10;                        .background(color = Color.White.copy(alpha = 0.16f), shape = CircleShape)&#10;                )&#10;&#10;                // central exclamation icon&#10;                Text(&#10;                    text = &quot;!&quot;,&#10;                    color = Color.White,&#10;                    fontSize = 72.sp,&#10;                    fontWeight = FontWeight.ExtraBold&#10;                )&#10;&#10;                // subtle inner rim to enhance 3D edge&#10;                Box(&#10;                    modifier = Modifier&#10;                        .matchParentSize()&#10;                        .padding(6.dp)&#10;                        .background(color = Color.Transparent, shape = CircleShape)&#10;                )&#10;            }&#10;        }&#10;    }&#10;}&#10;&#10;&#10;// Fungsi untuk mengirimkan HTTP request (mengikuti format pesan yang lebih rapi)&#10;fun sendNotification(message: String, onResult: (String) -&gt; Unit) {&#10;    val client = OkHttpClient()&#10;    val url = &quot;https://ntfy.ubharajaya.ac.id/panic-button&quot; // Ganti &lt;your-topic&gt; dengan topik Anda&#10;&#10;&#10;&#10;    val requestBody = message.toRequestBody(&#10;        &quot;text/plain&quot;.toMediaType()&#10;    )&#10;&#10;&#10;    val request = Request.Builder()&#10;        .url(url)&#10;        .addHeader(&quot;Title&quot;, &quot;Alert&quot;)&#10;        .addHeader(&quot;Priority&quot;, &quot;urgent&quot;)&#10;        .addHeader(&quot;Tags&quot;, &quot;alert warning,rotating_light&quot;)&#10;        .post(requestBody)&#10;        .build()&#10;&#10;&#10;&#10;&#10;    // Eksekusi request di thread terpisah&#10;    Thread {&#10;        try {&#10;            val response = client.newCall(request).execute()&#10;            if (response.isSuccessful) {&#10;                onResult(&quot;Notifikasi berhasil dikirim!&quot;)&#10;            } else {&#10;                onResult(&quot;Gagal mengirim notifikasi: ${response.code}&quot;)&#10;            }&#10;        } catch (e: Exception) {&#10;            onResult(&quot;Error: ${e.message}&quot;)&#10;        }&#10;    }.start()&#10;}&#10;" />
-              <option name="updatedContent" value="package id.ac.ubharajaya.panicbutton&#10;&#10;import android.os.Bundle&#10;import androidx.activity.ComponentActivity&#10;import androidx.activity.compose.setContent&#10;import androidx.compose.animation.core.tween&#10;import androidx.compose.animation.core.animateDpAsState&#10;import androidx.compose.animation.core.animateFloatAsState&#10;import androidx.compose.foundation.background&#10;import androidx.compose.foundation.clickable&#10;import androidx.compose.foundation.interaction.MutableInteractionSource&#10;import androidx.compose.foundation.interaction.collectIsPressedAsState&#10;import androidx.compose.foundation.layout.*&#10;import androidx.compose.foundation.selection.toggleable&#10;import androidx.compose.foundation.shape.CircleShape&#10;import androidx.compose.foundation.shape.RoundedCornerShape&#10;import androidx.compose.material3.*&#10;import androidx.compose.runtime.*&#10;import androidx.compose.ui.Alignment&#10;import androidx.compose.ui.Modifier&#10;import androidx.compose.ui.draw.scale&#10;import androidx.compose.ui.draw.shadow&#10;import androidx.compose.ui.graphics.Brush&#10;import androidx.compose.ui.graphics.Color&#10;import androidx.compose.ui.text.font.FontWeight&#10;import androidx.compose.ui.unit.dp&#10;import androidx.compose.ui.unit.sp&#10;import androidx.compose.ui.window.Dialog&#10;import okhttp3.MediaType.Companion.toMediaType&#10;import okhttp3.OkHttpClient&#10;import okhttp3.Request&#10;import okhttp3.RequestBody.Companion.toRequestBody&#10;&#10;class MainActivity : ComponentActivity() {&#10;    override fun onCreate(savedInstanceState: Bundle?) {&#10;        super.onCreate(savedInstanceState)&#10;        setContent {&#10;            MyApp()&#10;        }&#10;    }&#10;}&#10;&#10;&#10;@Composable&#10;fun MyApp() {&#10;    // dialogMessage akan menampung hasil callback dari sendNotification; null = tidak tampil&#10;    var dialogMessage by remember { mutableStateOf&lt;String?&gt;(null) }&#10;&#10;    // theme color for panic&#10;    val panicColor = Color(0xFFB71C1C)&#10;&#10;    // Report options (checkbox-style) with icons (emoji from ntfy emoji list)&#10;    val reportOptions = listOf(&#10;        &quot;Kebakaran&quot; to &quot;&quot;,&#10;        &quot;Banjir&quot; to &quot;&quot;,&#10;        &quot;Gempa Bumi&quot; to &quot;&quot;,&#10;        &quot;Huru Hara/Demostrasi&quot; to &quot;&quot;,&#10;        &quot;Lainnya&quot; to &quot;&quot;&#10;    )&#10;    val checkedMap = remember { mutableStateMapOf&lt;String, Boolean&gt;().apply { reportOptions.forEach { put(it.first, false) } } }&#10;    var otherNote by remember { mutableStateOf(&quot;&quot;) }&#10;&#10;    // UI&#10;    Column(&#10;        modifier = Modifier&#10;            .fillMaxSize()&#10;            .padding(18.dp),&#10;        verticalArrangement = Arrangement.Center,&#10;        horizontalAlignment = Alignment.CenterHorizontally&#10;    ) {&#10;        // Checklist area styled as card&#10;        Surface(&#10;            color = Color(0xFFFFEBEE), // soft red/pink background to match panic theme&#10;            tonalElevation = 4.dp,&#10;            shape = RoundedCornerShape(10.dp),&#10;            modifier = Modifier&#10;                .fillMaxWidth(0.92f)&#10;                .padding(horizontal = 12.dp)&#10;        ) {&#10;            Column(modifier = Modifier.padding(14.dp)) {&#10;                Text(&#10;                    text = &quot;Terjadi Kondisi Darurat&quot;,&#10;                    fontWeight = FontWeight.SemiBold,&#10;                    fontSize = 18.sp,&#10;                    color = panicColor&#10;                )&#10;&#10;                Spacer(modifier = Modifier.height(10.dp))&#10;&#10;                // Each option as a row with icon, label and checkbox aligned nicely&#10;                reportOptions.forEach { (label, icon) -&gt;&#10;                    Row(&#10;                        verticalAlignment = Alignment.CenterVertically,&#10;                        modifier = Modifier&#10;                            .fillMaxWidth()&#10;                            .padding(vertical = 6.dp)&#10;                            .toggleable(&#10;                                value = checkedMap[label] ?: false,&#10;                                onValueChange = { checked -&gt; checkedMap[label] = checked }&#10;                            )&#10;                    ) {&#10;                        // icon circle&#10;                        Box(&#10;                            contentAlignment = Alignment.Center,&#10;                            modifier = Modifier&#10;                                .size(34.dp)&#10;                                .background(color = Color.White.copy(alpha = 0.9f), shape = CircleShape)&#10;                                .shadow(1.dp, shape = CircleShape)&#10;                        ) {&#10;                            Text(text = icon, fontSize = 18.sp)&#10;                        }&#10;&#10;                        Spacer(modifier = Modifier.width(12.dp))&#10;&#10;                        Column(modifier = Modifier.weight(1f)) {&#10;                            Text(text = label, fontSize = 16.sp)&#10;                        }&#10;&#10;                        Checkbox(&#10;                            checked = checkedMap[label] ?: false,&#10;                            onCheckedChange = { checked -&gt; checkedMap[label] = checked },&#10;                            colors = CheckboxDefaults.colors(&#10;                                checkedColor = panicColor,&#10;                                uncheckedColor = Color.DarkGray&#10;                            )&#10;                        )&#10;                    }&#10;                }&#10;&#10;                Spacer(modifier = Modifier.height(8.dp))&#10;&#10;                OutlinedTextField(&#10;                    value = otherNote,&#10;                    onValueChange = { otherNote = it },&#10;                    label = { Text(&quot;Catatan tambahan (opsional)&quot;) },&#10;                    placeholder = { Text(&quot;Catatan tambahan ...&quot;) },&#10;                    modifier = Modifier&#10;                        .fillMaxWidth()&#10;                        .heightIn(min = 56.dp, max = 140.dp),&#10;                    maxLines = 4&#10;                )&#10;&#10;                Spacer(modifier = Modifier.height(8.dp))&#10;&#10;                // small hint when Lainnya is checked but note empty&#10;                if ((checkedMap[&quot;Lainnya&quot;] == true) &amp;&amp; otherNote.isBlank()) {&#10;                    Text(&#10;                        text = &quot;Catatan wajib jika Anda memilih 'Lainnya'&quot;,&#10;                        color = panicColor,&#10;                        style = MaterialTheme.typography.bodySmall,&#10;                        modifier = Modifier.padding(top = 6.dp)&#10;                    )&#10;                }&#10;            }&#10;        }&#10;&#10;        Spacer(modifier = Modifier.height(20.dp))&#10;&#10;        // Keep the existing nice PanicButton unchanged (slightly smaller spacing)&#10;        PanicButton(onClick = {&#10;            // Validation: at least one option selected&#10;            val selected = reportOptions.map { it.first }.filter { checkedMap[it] == true }&#10;            if (selected.isEmpty()) {&#10;                dialogMessage = &quot;Pilih minimal satu jenis laporan sebelum mengirim.&quot;&#10;                return@PanicButton&#10;            }&#10;            if (selected.contains(&quot;Lainnya&quot;) &amp;&amp; otherNote.isBlank()) {&#10;                dialogMessage = &quot;Untuk opsi 'Lainnya', harap tambahkan catatan yang menjelaskan keadaan.&quot;&#10;                return@PanicButton&#10;            }&#10;&#10;            // build message: list selected options and the note&#10;            val message = buildString {&#10;                append(&quot;Jenis Laporan: &quot;)&#10;                append(selected.joinToString(&quot;, &quot;))&#10;                append(&quot;\n&quot;)&#10;                append(&quot;Keterangan: &quot;)&#10;                if (otherNote.isNotBlank()) append(otherNote.trim()) else append(&quot;-&quot;)&#10;                append(&quot;\n&quot;)&#10;                append(&quot;Pengirim: Rakha adi saputro 202310715083&quot;)&#10;            }&#10;&#10;            sendNotification(message) { response -&gt; dialogMessage = response }&#10;        })&#10;&#10;        Spacer(modifier = Modifier.height(14.dp))&#10;&#10;        // dialog hasil&#10;        if (dialogMessage != null) {&#10;            Dialog(onDismissRequest = { dialogMessage = null }) {&#10;                Box(&#10;                    modifier = Modifier&#10;                        .fillMaxSize()&#10;                        .padding(24.dp),&#10;                    contentAlignment = Alignment.Center&#10;                ) {&#10;                    Surface(&#10;                        shape = RoundedCornerShape(12.dp),&#10;                        color = Color.White,&#10;                        tonalElevation = 8.dp,&#10;                        modifier = Modifier.wrapContentWidth()&#10;                    ) {&#10;                        Column(&#10;                            modifier = Modifier&#10;                                .padding(0.dp)&#10;                                .widthIn(min = 280.dp),&#10;                            horizontalAlignment = Alignment.CenterHorizontally&#10;                        ) {&#10;                            // header&#10;                            Box(&#10;                                modifier = Modifier&#10;                                    .fillMaxWidth()&#10;                                    .background(color = panicColor)&#10;                                    .padding(vertical = 12.dp),&#10;                                contentAlignment = Alignment.Center&#10;                            ) {&#10;                                Text(&#10;                                    text = &quot;Notifikasi&quot;,&#10;                                    color = Color.White,&#10;                                    fontWeight = FontWeight.Bold,&#10;                                    fontSize = 18.sp&#10;                                )&#10;                            }&#10;&#10;                            Spacer(modifier = Modifier.height(12.dp))&#10;&#10;                            // message&#10;                            Text(&#10;                                text = dialogMessage ?: &quot;&quot;,&#10;                                color = Color.Black,&#10;                                modifier = Modifier.padding(horizontal = 16.dp)&#10;                            )&#10;&#10;                            Spacer(modifier = Modifier.height(20.dp))&#10;&#10;                            // action&#10;                            Box(&#10;                                modifier = Modifier&#10;                                    .fillMaxWidth()&#10;                                    .padding(horizontal = 16.dp, vertical = 12.dp),&#10;                                contentAlignment = Alignment.Center&#10;                            ) {&#10;                                Button(&#10;                                    onClick = { dialogMessage = null },&#10;                                    colors = ButtonDefaults.buttonColors(containerColor = panicColor)&#10;                                ) {&#10;                                    Text(text = &quot;OK&quot;, color = Color.White)&#10;                                }&#10;                            }&#10;                        }&#10;                    }&#10;                }&#10;            }&#10;        }&#10;    }&#10;}&#10;&#10;&#10;// New: 3D-styled PanicButton with press animation and glossy highlight&#10;@Composable&#10;fun PanicButton(&#10;    onClick: () -&gt; Unit,&#10;    modifier: Modifier = Modifier&#10;) {&#10;    // theme colors&#10;    val panicColor = Color(0xFFB71C1C)&#10;    val darkShade = Color(0xFF7F0F0F)&#10;    val lightAccent = Color(0xFFFF8A80)&#10;&#10;    // interaction for press-state&#10;    val interactionSource = remember { MutableInteractionSource() }&#10;    val isPressed by interactionSource.collectIsPressedAsState()&#10;&#10;    // animations: scale down and lower elevation when pressed&#10;    val scaleAnim by animateFloatAsState(targetValue = if (isPressed) 0.96f else 1f, animationSpec = tween(120))&#10;    val elevationAnim by animateDpAsState(targetValue = if (isPressed) 6.dp else 18.dp, animationSpec = tween(120))&#10;&#10;    // vertical gradient to simulate 3D lighting&#10;    val gradient = Brush.verticalGradient(listOf(lightAccent, panicColor, darkShade))&#10;&#10;    Column(&#10;        horizontalAlignment = Alignment.CenterHorizontally,&#10;        verticalArrangement = Arrangement.Center,&#10;        modifier = modifier&#10;    ) {&#10;        Box(contentAlignment = Alignment.Center) {&#10;            // soft outer shadow (ground shadow)&#10;            Box(&#10;                modifier = Modifier&#10;                    .size(210.dp)&#10;                    .shadow(elevation = elevationAnim, shape = CircleShape)&#10;                    .background(color = Color.Black.copy(alpha = 0.12f), shape = CircleShape)&#10;            )&#10;&#10;            // main 3D button&#10;            Box(&#10;                contentAlignment = Alignment.Center,&#10;                modifier = Modifier&#10;                    .size(170.dp)&#10;                    .scale(scaleAnim)&#10;                    .shadow(elevation = elevationAnim, shape = CircleShape)&#10;                    .background(brush = gradient, shape = CircleShape)&#10;                    .clickable(indication = null, interactionSource = interactionSource) {&#10;                        onClick()&#10;                    }&#10;            ) {&#10;                // glossy highlight (small white circle offset to top-left)&#10;                Box(&#10;                    modifier = Modifier&#10;                        .size(70.dp)&#10;                        .offset(x = (-24).dp, y = (-28).dp)&#10;                        .background(color = Color.White.copy(alpha = 0.16f), shape = CircleShape)&#10;                )&#10;&#10;                // central exclamation icon&#10;                Text(&#10;                    text = &quot;!&quot;,&#10;                    color = Color.White,&#10;                    fontSize = 72.sp,&#10;                    fontWeight = FontWeight.ExtraBold&#10;                )&#10;&#10;                // subtle inner rim to enhance 3D edge&#10;                Box(&#10;                    modifier = Modifier&#10;                        .matchParentSize()&#10;                        .padding(6.dp)&#10;                        .background(color = Color.Transparent, shape = CircleShape)&#10;                )&#10;            }&#10;        }&#10;    }&#10;}&#10;&#10;&#10;// Fungsi untuk mengirimkan HTTP request (mengikuti format pesan yang lebih rapi)&#10;fun sendNotification(message: String, onResult: (String) -&gt; Unit) {&#10;    val client = OkHttpClient()&#10;    val url = &quot;https://ntfy.ubharajaya.ac.id/panic-button&quot; // Ganti &lt;your-topic&gt; dengan topik Anda&#10;&#10;&#10;&#10;    val requestBody = message.toRequestBody(&#10;        &quot;text/plain&quot;.toMediaType()&#10;    )&#10;&#10;&#10;    val request = Request.Builder()&#10;        .url(url)&#10;        .addHeader(&quot;Title&quot;, &quot;Alert&quot;)&#10;        .addHeader(&quot;Priority&quot;, &quot;urgent&quot;)&#10;        .addHeader(&quot;Tags&quot;, &quot;alert warning,rotating_light&quot;)&#10;        .post(requestBody)&#10;        .build()&#10;&#10;&#10;&#10;&#10;    // Eksekusi request di thread terpisah&#10;    Thread {&#10;        try {&#10;            val response = client.newCall(request).execute()&#10;            if (response.isSuccessful) {&#10;                onResult(&quot;Notifikasi berhasil dikirim!&quot;)&#10;            } else {&#10;                onResult(&quot;Gagal mengirim notifikasi: ${response.code}&quot;)&#10;            }&#10;        } catch (e: Exception) {&#10;            onResult(&quot;Error: ${e.message}&quot;)&#10;        }&#10;    }.start()&#10;}" />
-            </PendingDiffInfo>
-          </value>
-        </entry>
-      </map>
-    </option>
-  </component>
-</project>
\ No newline at end of file
diff --git a/app/src/main/java/id/ac/ubharajaya/panicbutton/MainActivity.kt b/app/src/main/java/id/ac/ubharajaya/panicbutton/MainActivity.kt
index 9ff81ac..be4d47b 100644
--- a/app/src/main/java/id/ac/ubharajaya/panicbutton/MainActivity.kt
+++ b/app/src/main/java/id/ac/ubharajaya/panicbutton/MainActivity.kt
@@ -3,370 +3,18 @@ package id.ac.ubharajaya.panicbutton
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsPressedAsState
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.selection.toggleable
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.scale
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.window.Dialog
-import okhttp3.MediaType.Companion.toMediaType
-import okhttp3.OkHttpClient
-import okhttp3.Request
-import okhttp3.RequestBody.Companion.toRequestBody
+import androidx.activity.viewModels
+import androidx.compose.material3.MaterialTheme
 
 class MainActivity : ComponentActivity() {
+    private val viewModel: MainViewModel by viewModels()
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            MyApp()
-        }
-    }
-}
-
-
-@Composable
-fun MyApp() {
-    // dialogMessage akan menampung hasil callback dari sendNotification; null = tidak tampil
-    var dialogMessage by remember { mutableStateOf<String?>(null) }
-
-    // theme color for panic
-    val panicColor = Color(0xFFB71C1C)
-
-    // Report options (checkbox-style) with icons (emoji from ntfy emoji list)
-    val reportOptions = listOf(
-        "Kebakaran" to "🔥",
-        "Banjir" to "🌊",
-        "Gempa Bumi" to "🌍",
-        "Huru Hara/Demostrasi" to "📣",
-        "Lainnya" to "📝"
-    )
-    val checkedMap = remember { mutableStateMapOf<String, Boolean>().apply { reportOptions.forEach { put(it.first, false) } } }
-    var otherNote by remember { mutableStateOf("") }
-
-    // UI
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(18.dp),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
-    ) {
-        // Checklist area styled as card
-        Surface(
-            color = Color(0xFFFFEBEE), // soft red/pink background to match panic theme
-            tonalElevation = 4.dp,
-            shape = RoundedCornerShape(10.dp),
-            modifier = Modifier
-                .fillMaxWidth(0.92f)
-                .padding(horizontal = 12.dp)
-        ) {
-            Column(modifier = Modifier.padding(14.dp)) {
-                Text(
-                    text = "Terjadi Kondisi Darurat",
-                    fontWeight = FontWeight.SemiBold,
-                    fontSize = 18.sp,
-                    color = panicColor
-                )
-
-                Spacer(modifier = Modifier.height(10.dp))
-
-                // Each option as a row with icon, label and checkbox aligned nicely
-                reportOptions.forEach { (label, icon) ->
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically,
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(vertical = 6.dp)
-                            .toggleable(
-                                value = checkedMap[label] ?: false,
-                                onValueChange = { checked -> checkedMap[label] = checked }
-                            )
-                    ) {
-                        // icon circle
-                        Box(
-                            contentAlignment = Alignment.Center,
-                            modifier = Modifier
-                                .size(34.dp)
-                                .background(color = Color.White.copy(alpha = 0.9f), shape = CircleShape)
-                                .shadow(1.dp, shape = CircleShape)
-                        ) {
-                            Text(text = icon, fontSize = 18.sp)
-                        }
-
-                        Spacer(modifier = Modifier.width(12.dp))
-
-                        Column(modifier = Modifier.weight(1f)) {
-                            Text(text = label, fontSize = 16.sp)
-                        }
-
-                        Checkbox(
-                            checked = checkedMap[label] ?: false,
-                            onCheckedChange = { checked -> checkedMap[label] = checked },
-                            colors = CheckboxDefaults.colors(
-                                checkedColor = panicColor,
-                                uncheckedColor = Color.DarkGray
-                            )
-                        )
-                    }
-                }
-
-                Spacer(modifier = Modifier.height(8.dp))
-
-                OutlinedTextField(
-                    value = otherNote,
-                    onValueChange = { otherNote = it },
-                    label = { Text("Catatan tambahan (opsional)") },
-                    placeholder = { Text("Catatan tambahan ...") },
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .heightIn(min = 56.dp, max = 140.dp),
-                    maxLines = 4
-                )
-
-                Spacer(modifier = Modifier.height(8.dp))
-
-                // small hint when Lainnya is checked but note empty
-                if ((checkedMap["Lainnya"] == true) && otherNote.isBlank()) {
-                    Text(
-                        text = "Catatan wajib jika Anda memilih 'Lainnya'",
-                        color = panicColor,
-                        style = MaterialTheme.typography.bodySmall,
-                        modifier = Modifier.padding(top = 6.dp)
-                    )
-                }
-            }
-        }
-
-        Spacer(modifier = Modifier.height(20.dp))
-
-        // Keep the existing nice PanicButton unchanged (slightly smaller spacing)
-        PanicButton(onClick = {
-            // Validation: at least one option selected
-            val selected = reportOptions.map { it.first }.filter { checkedMap[it] == true }
-            if (selected.isEmpty()) {
-                dialogMessage = "Pilih minimal satu jenis laporan sebelum mengirim."
-                return@PanicButton
-            }
-            if (selected.contains("Lainnya") && otherNote.isBlank()) {
-                dialogMessage = "Untuk opsi 'Lainnya', harap tambahkan catatan yang menjelaskan keadaan."
-                return@PanicButton
-            }
-
-            // build message: list selected options and the note
-            val message = buildString {
-                append("Jenis Laporan: ")
-                append(selected.joinToString(", "))
-                append("\n")
-                append("Keterangan: ")
-                if (otherNote.isNotBlank()) append(otherNote.trim()) else append("-")
-                append("\n")
-                append("Pengirim: Rakha adi saputro 202310715083")
-            }
-
-            sendNotification(message) { response -> dialogMessage = response }
-        })
-
-        Spacer(modifier = Modifier.height(14.dp))
-
-        // dialog hasil
-        if (dialogMessage != null) {
-            Dialog(onDismissRequest = { dialogMessage = null }) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .padding(24.dp),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Surface(
-                        shape = RoundedCornerShape(12.dp),
-                        color = Color.White,
-                        tonalElevation = 8.dp,
-                        modifier = Modifier.wrapContentWidth()
-                    ) {
-                        Column(
-                            modifier = Modifier
-                                .padding(0.dp)
-                                .widthIn(min = 280.dp),
-                            horizontalAlignment = Alignment.CenterHorizontally
-                        ) {
-                            // header
-                            Box(
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .background(color = panicColor)
-                                    .padding(vertical = 12.dp),
-                                contentAlignment = Alignment.Center
-                            ) {
-                                Text(
-                                    text = "Notifikasi",
-                                    color = Color.White,
-                                    fontWeight = FontWeight.Bold,
-                                    fontSize = 18.sp
-                                )
-                            }
-
-                            Spacer(modifier = Modifier.height(12.dp))
-
-                            // message
-                            Text(
-                                text = dialogMessage ?: "",
-                                color = Color.Black,
-                                modifier = Modifier.padding(horizontal = 16.dp)
-                            )
-
-                            Spacer(modifier = Modifier.height(20.dp))
-
-                            // action
-                            Box(
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .padding(horizontal = 16.dp, vertical = 12.dp),
-                                contentAlignment = Alignment.Center
-                            ) {
-                                Button(
-                                    onClick = { dialogMessage = null },
-                                    colors = ButtonDefaults.buttonColors(containerColor = panicColor)
-                                ) {
-                                    Text(text = "OK", color = Color.White)
-                                }
-                            }
-                        }
-                    }
-                }
+            MaterialTheme {
+                MainScreen(viewModel)
             }
         }
     }
 }
-
-
-// New: 3D-styled PanicButton with press animation and glossy highlight
-@Composable
-fun PanicButton(
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier
-) {
-    // theme colors
-    val panicColor = Color(0xFFB71C1C)
-    val darkShade = Color(0xFF7F0F0F)
-    val lightAccent = Color(0xFFFF8A80)
-
-    // interaction for press-state
-    val interactionSource = remember { MutableInteractionSource() }
-    val isPressed by interactionSource.collectIsPressedAsState()
-
-    // animations: scale down and lower elevation when pressed
-    val scaleAnim by animateFloatAsState(targetValue = if (isPressed) 0.96f else 1f, animationSpec = tween(120))
-    val elevationAnim by animateDpAsState(targetValue = if (isPressed) 6.dp else 18.dp, animationSpec = tween(120))
-
-    // vertical gradient to simulate 3D lighting
-    val gradient = Brush.verticalGradient(listOf(lightAccent, panicColor, darkShade))
-
-    Column(
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center,
-        modifier = modifier
-    ) {
-        Box(contentAlignment = Alignment.Center) {
-            // soft outer shadow (ground shadow)
-            Box(
-                modifier = Modifier
-                    .size(210.dp)
-                    .shadow(elevation = elevationAnim, shape = CircleShape)
-                    .background(color = Color.Black.copy(alpha = 0.12f), shape = CircleShape)
-            )
-
-            // main 3D button
-            Box(
-                contentAlignment = Alignment.Center,
-                modifier = Modifier
-                    .size(170.dp)
-                    .scale(scaleAnim)
-                    .shadow(elevation = elevationAnim, shape = CircleShape)
-                    .background(brush = gradient, shape = CircleShape)
-                    .clickable(indication = null, interactionSource = interactionSource) {
-                        onClick()
-                    }
-            ) {
-                // glossy highlight (small white circle offset to top-left)
-                Box(
-                    modifier = Modifier
-                        .size(70.dp)
-                        .offset(x = (-24).dp, y = (-28).dp)
-                        .background(color = Color.White.copy(alpha = 0.16f), shape = CircleShape)
-                )
-
-                // central exclamation icon
-                Text(
-                    text = "!",
-                    color = Color.White,
-                    fontSize = 72.sp,
-                    fontWeight = FontWeight.ExtraBold
-                )
-
-                // subtle inner rim to enhance 3D edge
-                Box(
-                    modifier = Modifier
-                        .matchParentSize()
-                        .padding(6.dp)
-                        .background(color = Color.Transparent, shape = CircleShape)
-                )
-            }
-        }
-    }
-}
-
-
-// Fungsi untuk mengirimkan HTTP request (mengikuti format pesan yang lebih rapi)
-fun sendNotification(message: String, onResult: (String) -> Unit) {
-    val client = OkHttpClient()
-    val url = "https://ntfy.ubharajaya.ac.id/panic-button" // Ganti <your-topic> dengan topik Anda
-
-
-
-    val requestBody = message.toRequestBody(
-        "text/plain".toMediaType()
-    )
-
-
-    val request = Request.Builder()
-        .url(url)
-        .addHeader("Title", "Alert")
-        .addHeader("Priority", "urgent")
-        .addHeader("Tags", "alert warning,rotating_light")
-        .post(requestBody)
-        .build()
-
-
-
-
-    // Eksekusi request di thread terpisah
-    Thread {
-        try {
-            val response = client.newCall(request).execute()
-            if (response.isSuccessful) {
-                onResult("Notifikasi berhasil dikirim!")
-            } else {
-                onResult("Gagal mengirim notifikasi: ${response.code}")
-            }
-        } catch (e: Exception) {
-            onResult("Error: ${e.message}")
-        }
-    }.start()
-}
diff --git a/app/src/main/java/id/ac/ubharajaya/panicbutton/MainScreen.kt b/app/src/main/java/id/ac/ubharajaya/panicbutton/MainScreen.kt
new file mode 100644
index 0000000..d86479c
--- /dev/null
+++ b/app/src/main/java/id/ac/ubharajaya/panicbutton/MainScreen.kt
@@ -0,0 +1,100 @@
+package id.ac.ubharajaya.panicbutton
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun MainScreen(viewModel: MainViewModel) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(18.dp),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Surface(
+            color = MaterialTheme.colorScheme.surfaceVariant,
+            tonalElevation = 4.dp,
+            shape = RoundedCornerShape(10.dp),
+            modifier = Modifier
+                .fillMaxWidth(0.92f)
+                .padding(horizontal = 12.dp)
+        ) {
+            Column(modifier = Modifier.padding(14.dp)) {
+                Text(text = "Jenis Kondisi Darurat", fontSize = 18.sp, color = MaterialTheme.colorScheme.error)
+
+                Spacer(modifier = Modifier.height(10.dp))
+
+                // list options directly from viewModel
+                for (opt in viewModel.options) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(vertical = 6.dp)
+                    ) {
+                        Box(
+                            modifier = Modifier
+                                .size(34.dp)
+                                .background(color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f), shape = CircleShape),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Text(text = opt.icon)
+                        }
+
+                        Spacer(modifier = Modifier.width(12.dp))
+
+                        Text(text = opt.label, modifier = Modifier.weight(1f))
+
+                        val checked = viewModel.isChecked(opt.label)
+                        Checkbox(
+                            checked = checked,
+                            onCheckedChange = { checkedValue -> viewModel.setChecked(opt.label, checkedValue) }
+                        )
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                OutlinedTextField(
+                    value = viewModel.otherNote,
+                    onValueChange = { newValue -> viewModel.otherNote = newValue },
+                    label = { Text("Catatan tambahan (opsional)") },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .heightIn(min = 56.dp, max = 140.dp)
+                )
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                if (viewModel.isChecked("Lainnya") && viewModel.otherNote.isBlank()) {
+                    Text("Catatan wajib jika Anda memilih 'Lainnya'", color = MaterialTheme.colorScheme.error)
+                }
+            }
+        }
+
+        Spacer(modifier = Modifier.height(20.dp))
+
+        PanicButton(onClick = { viewModel.sendAlert() })
+
+        Spacer(modifier = Modifier.height(14.dp))
+
+        val dialog = viewModel.dialogMessage
+        if (!dialog.isNullOrBlank()) {
+            AlertDialog(
+                onDismissRequest = { viewModel.clearDialog() },
+                confirmButton = { TextButton(onClick = { viewModel.clearDialog() }) { Text("OK") } },
+                title = { Text("Notifikasi") },
+                text = { Text(dialog) }
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/id/ac/ubharajaya/panicbutton/MainViewModel.kt b/app/src/main/java/id/ac/ubharajaya/panicbutton/MainViewModel.kt
new file mode 100644
index 0000000..66a32dc
--- /dev/null
+++ b/app/src/main/java/id/ac/ubharajaya/panicbutton/MainViewModel.kt
@@ -0,0 +1,69 @@
+package id.ac.ubharajaya.panicbutton
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
+
+class MainViewModel : ViewModel() {
+    val options = listOf(
+        ReportOption("Kebakaran", "🔥"),
+        ReportOption("Banjir", "🌊"),
+        ReportOption("Gempa Bumi", "🌍"),
+        ReportOption("Huru Hara/Demonstrasi", "📣"),
+        ReportOption("Lainnya", "📝")
+    )
+
+    // simple state holders
+    var checkedMap by mutableStateOf(options.associate { it.label to false }.toMutableMap())
+        private set
+
+    var otherNote by mutableStateOf("")
+
+    var dialogMessage by mutableStateOf<String?>(null)
+
+    fun isChecked(label: String): Boolean = checkedMap[label] ?: false
+    fun setChecked(label: String, checked: Boolean) { toggleOption(label, checked) }
+
+    fun toggleOption(label: String, checked: Boolean) {
+        val copy = checkedMap.toMutableMap()
+        copy[label] = checked
+        checkedMap = copy
+    }
+
+    fun sendAlert(senderName: String = "Rakha adi saputro 202310715083") {
+        val selected = checkedMap.filterValues { it }.keys.toList()
+        if (selected.isEmpty()) {
+            dialogMessage = "Pilih minimal satu jenis laporan sebelum mengirim."
+            return
+        }
+        if (selected.contains("Lainnya") && otherNote.isBlank()) {
+            dialogMessage = "Untuk opsi 'Lainnya', harap tambahkan catatan yang menjelaskan keadaan."
+            return
+        }
+
+        val message = buildString {
+            append("Jenis Laporan: ")
+            append(selected.joinToString(", "))
+            append("\nKeterangan: ")
+            append(if (otherNote.isBlank()) "-" else otherNote.trim())
+            append("\nPengirim: ")
+            append(senderName)
+        }
+
+        viewModelScope.launch {
+            try {
+                val result = NotificationSender.sendNotification(message)
+                dialogMessage = result
+            } catch (e: Exception) {
+                dialogMessage = "Error: ${e.message}"
+            }
+        }
+    }
+
+    fun clearDialog() {
+        dialogMessage = null
+    }
+}
diff --git a/app/src/main/java/id/ac/ubharajaya/panicbutton/NotificationSender.kt b/app/src/main/java/id/ac/ubharajaya/panicbutton/NotificationSender.kt
new file mode 100644
index 0000000..2c9ddee
--- /dev/null
+++ b/app/src/main/java/id/ac/ubharajaya/panicbutton/NotificationSender.kt
@@ -0,0 +1,29 @@
+package id.ac.ubharajaya.panicbutton
+
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import okhttp3.MediaType.Companion.toMediaType
+import okhttp3.OkHttpClient
+import okhttp3.Request
+import okhttp3.RequestBody.Companion.toRequestBody
+
+object NotificationSender {
+    private val client = OkHttpClient()
+    private const val url = "https://ntfy.ubharajaya.ac.id/panic-button"
+
+    suspend fun sendNotification(message: String): String = withContext(Dispatchers.IO) {
+        val body = message.toRequestBody("text/plain".toMediaType())
+        val request = Request.Builder()
+            .url(url)
+            .addHeader("Title", "Alert")
+            .addHeader("Priority", "urgent")
+            .addHeader("Tags", "alert warning,rotating_light")
+            .post(body)
+            .build()
+
+        client.newCall(request).execute().use { resp ->
+            if (resp.isSuccessful) "Notifikasi berhasil dikirim!" else "Gagal mengirim notifikasi: ${resp.code}"
+        }
+    }
+}
+
diff --git a/app/src/main/java/id/ac/ubharajaya/panicbutton/PanicButton.kt b/app/src/main/java/id/ac/ubharajaya/panicbutton/PanicButton.kt
new file mode 100644
index 0000000..4cc8846
--- /dev/null
+++ b/app/src/main/java/id/ac/ubharajaya/panicbutton/PanicButton.kt
@@ -0,0 +1,56 @@
+package id.ac.ubharajaya.panicbutton
+
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun PanicButton(onClick: () -> Unit) {
+    val panicColor = Color(0xFFB71C1C)
+    val darkShade = Color(0xFF7F0F0F)
+    val lightAccent = Color(0xFFFF8A80)
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressedState = interactionSource.collectIsPressedAsState()
+    val isPressed = isPressedState.value
+    val scaleAnim = animateFloatAsState(targetValue = if (isPressed) 0.96f else 1f, animationSpec = tween(120)).value
+    val elevationAnim = animateDpAsState(targetValue = if (isPressed) 6.dp else 18.dp, animationSpec = tween(120)).value
+    val gradient = Brush.verticalGradient(listOf(lightAccent, panicColor, darkShade))
+
+    Box(contentAlignment = Alignment.Center) {
+        Box(
+            modifier = Modifier
+                .size(210.dp)
+                .shadow(elevation = elevationAnim, shape = CircleShape)
+                .background(color = Color.Black.copy(alpha = 0.12f), shape = CircleShape)
+        )
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = Modifier
+                .size(170.dp)
+                .scale(scaleAnim)
+                .shadow(elevation = elevationAnim, shape = CircleShape)
+                .background(brush = gradient, shape = CircleShape)
+                .clickable(indication = null, interactionSource = interactionSource) { onClick() }
+        ) {
+            Box(modifier = Modifier.size(70.dp).offset(x = (-24).dp, y = (-28).dp).background(color = Color.White.copy(alpha = 0.16f), shape = CircleShape))
+            Text("!", color = Color.White, fontSize = 72.sp)
+        }
+    }
+}
diff --git a/app/src/main/java/id/ac/ubharajaya/panicbutton/ReportOption.kt b/app/src/main/java/id/ac/ubharajaya/panicbutton/ReportOption.kt
new file mode 100644
index 0000000..8271a45
--- /dev/null
+++ b/app/src/main/java/id/ac/ubharajaya/panicbutton/ReportOption.kt
@@ -0,0 +1,3 @@
+package id.ac.ubharajaya.panicbutton
+
+data class ReportOption(val label: String, val icon: String)