keypad fixed for void trace screen

app/src/main/java/com/mob/utsmyanmar/ui/sale_void/VoidTraceScreen.kt

@@ -1,7 +1,6 @@
 package com.mob.utsmyanmar.ui.sale_void
 
 import android.util.Log
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -32,12 +31,11 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
+import com.mob.utsmyanmar.ui.components.NumericKeypad
 import com.mob.utsmyanmar.ui.components.appbar.AppBar
 import com.mob.utsmyanmar.ui.theme.Color
 import com.mob.utsmyanmar.viewmodel.SharedViewModel
@@ -45,6 +43,13 @@ import com.utsmyanmar.paylibs.model.PayDetail
 import com.utsmyanmar.paylibs.utils.iso_utils.TransactionsType
 import sunmi.sunmiui.utils.LogUtil
 
+private val traceKeys = listOf(
+    listOf("1", "2", "3"),
+    listOf("4", "5", "6"),
+    listOf("7", "8", "9"),
+    listOf("", "0", "00")
+)
+
 @Composable
 fun VoidTraceScreen(
     sharedViewModel: SharedViewModel,
@@ -131,15 +136,16 @@ fun VoidTraceScreen(
             )
         }
     ) { paddingValues ->
-        Box(
+        Column(
             modifier = Modifier
-                .fillMaxSize()
                 .padding(paddingValues)
+                .fillMaxSize()
+                .padding(16.dp)
         ) {
-            Column(
+            Box(
                 modifier = Modifier
                     .fillMaxSize()
-                    .padding(horizontal = 16.dp)
+                    .weight(2f)
             ) {
                 Text(
                     text = headerMessage,
@@ -147,49 +153,79 @@ fun VoidTraceScreen(
                     style = MaterialTheme.typography.bodyMedium
                 )
 
-                Spacer(modifier = Modifier.height(28.dp))
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Text(
+                        text = "Trace Number",
+                        color = Color.Gray,
+                        style = MaterialTheme.typography.labelSmall
+                    )
 
-                Text(
+                    Spacer(modifier = Modifier.height(8.dp))
-                    text = "Trace Number",
-                    color = Color.Gray,
-                    style = MaterialTheme.typography.labelSmall,
-                    modifier = Modifier.align(Alignment.CenterHorizontally)
-                )
 
-                Spacer(modifier = Modifier.height(8.dp))
+                    Text(
+                        text = displayTraceNumber,
+                        color = Color.LegacyRed,
+                        style = MaterialTheme.typography.displayLarge
+                    )
 
-                Text(
+                    Spacer(modifier = Modifier.height(8.dp))
-                    text = displayTraceNumber,
-                    color = Color.LegacyRed,
-                    style = MaterialTheme.typography.displayLarge,
-                    modifier = Modifier.align(Alignment.CenterHorizontally)
-                )
 
-                Spacer(modifier = Modifier.height(8.dp))
+                    Text(
+                        text = "Enter 6-digit trace number",
+                        color = Color.Gray,
+                        style = MaterialTheme.typography.labelSmall
+                    )
+                }
 
-                Text(
+                Card(
-                    text = "Enter 6-digit trace number",
+                    modifier = Modifier
-                    color = Color.Gray,
+                        .align(Alignment.CenterEnd)
-                    style = MaterialTheme.typography.labelSmall,
+                        .clickable(enabled = traceNumber.isNotEmpty()) {
-                    modifier = Modifier.align(Alignment.CenterHorizontally)
+                            traceNumber = traceNumber.dropLast(1)
-                )
+                        },
+                    shape = RoundedCornerShape(18.dp),
+                    colors = CardDefaults.cardColors(containerColor = Color.White),
+                    elevation = CardDefaults.cardElevation(defaultElevation = 6.dp)
+                ) {
+                    androidx.compose.material3.Icon(
+                        imageVector = Icons.Rounded.Backspace,
+                        contentDescription = "Delete",
+                        tint = if (traceNumber.isNotEmpty()) Color.LegacyRed else Color.Gray,
+                        modifier = Modifier.padding(horizontal = 14.dp, vertical = 12.dp)
+                    )
+                }
+            }
 
-                Spacer(modifier = Modifier.height(24.dp))
+            Column(
-
+                modifier = Modifier
-                TraceNumberKeypad(
+                    .fillMaxWidth()
-                    onNumberClick = { value ->
+                    .weight(3f),
+                verticalArrangement = Arrangement.Bottom
+            ) {
+                NumericKeypad(
+                    keys = traceKeys,
+                    modifier = Modifier.fillMaxSize(),
+                    onKeyClick = { value ->
                         if (traceNumber.length < 6) {
                             traceNumber = (traceNumber + value).take(6)
                         }
                     }
                 )
+            }
 
-                Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.height(16.dp))
 
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(0.5f)
+            ) {
                 Row(
-                    modifier = Modifier
+                    modifier = Modifier.fillMaxWidth(),
-                        .fillMaxWidth()
-                        .padding(bottom = 18.dp),
                     horizontalArrangement = Arrangement.spacedBy(12.dp)
                 ) {
                     Button(
@@ -226,95 +262,6 @@ fun VoidTraceScreen(
                     }
                 }
             }
-
-            Card(
-                modifier = Modifier
-                    .align(Alignment.TopEnd)
-                    .padding(top = 110.dp, end = 16.dp)
-                    .clickable(enabled = traceNumber.isNotEmpty()) {
-                        traceNumber = traceNumber.dropLast(1)
-                    },
-                shape = RoundedCornerShape(18.dp),
-                colors = CardDefaults.cardColors(containerColor = Color.White),
-                elevation = CardDefaults.cardElevation(defaultElevation = 6.dp)
-            ) {
-                androidx.compose.material3.Icon(
-                    imageVector = Icons.Rounded.Backspace,
-                    contentDescription = "Delete",
-                    tint = if (traceNumber.isNotEmpty()) Color.LegacyRed else Color.Gray,
-                    modifier = Modifier.padding(horizontal = 14.dp, vertical = 12.dp)
-                )
-            }
         }
     }
 }
-
-@Composable
-private fun TraceNumberKeypad(
-    onNumberClick: (String) -> Unit
-) {
-    val keys = listOf(
-        listOf("1", "2", "3"),
-        listOf("4", "5", "6"),
-        listOf("7", "8", "9"),
-        listOf("", "0", "00")
-    )
-
-    Column(
-        modifier = Modifier.fillMaxWidth(),
-        verticalArrangement = Arrangement.spacedBy(6.dp)
-    ) {
-        keys.forEach { row ->
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(6.dp)
-            ) {
-                row.forEach { key ->
-                    if (key.isBlank()) {
-                        Spacer(
-                            modifier = Modifier
-                                .weight(1f)
-                                .height(66.dp)
-                        )
-                    } else {
-                        TraceKeypadButton(
-                            text = key,
-                            modifier = Modifier.weight(1f),
-                            onClick = { onNumberClick(key) }
-                        )
-                    }
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun TraceKeypadButton(
-    text: String,
-    modifier: Modifier = Modifier,
-    onClick: () -> Unit
-) {
-    Box(
-        modifier = modifier
-            .height(66.dp)
-            .shadow(
-                elevation = 2.dp,
-                shape = RoundedCornerShape(8.dp),
-                clip = false
-            )
-            .background(
-                color = Color.White,
-                shape = RoundedCornerShape(8.dp)
-            )
-            .clickable { onClick() },
-        contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = text,
-            color = Color.LegacyRed,
-            style = MaterialTheme.typography.headlineLarge,
-            textAlign = TextAlign.Center
-        )
-    }
-}