added amount screen

.idea/deploymentTargetSelector.xml

@@ -4,6 +4,13 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
+        <DropdownSelection timestamp="2026-05-07T16:25:07.233027800Z">
+          <Target type="DEFAULT_BOOT">
+            <handle>
+              <DeviceId pluginId="PhysicalDevice" identifier="serial=PB0219AQ60954" />
+            </handle>
+          </Target>
+        </DropdownSelection>
         <DialogSelection />
       </SelectionState>
     </selectionStates>

app/build.gradle.kts

@@ -42,6 +42,7 @@ android {
 dependencies {
     implementation(platform(libs.androidx.compose.bom))
     implementation(libs.androidx.activity.compose)
+    implementation(libs.androidx.compose.foundation)
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.ui)
     implementation(libs.androidx.compose.ui.graphics)

app/src/main/java/com/mob/ustmm/ui/amount/AmountScreen.kt

@@ -0,0 +1,313 @@
+package com.mob.ustmm.ui.amount
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mob.ustmm.R
+import com.mob.ustmm.ui.theme.MOBPOSTheme
+import com.mob.ustmm.ui.theme.Primary
+import com.mob.ustmm.ui.theme.White
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AmountScreen(
+    action: String,
+    onBackClick: () -> Unit,
+    onCancelClick: () -> Unit = {},
+    onNextClick: (String) -> Unit = {}
+) {
+
+    var amount by remember { mutableStateOf("0") }
+
+    val config = LocalConfiguration.current
+    val isSmallScreen = config.screenHeightDp < 700
+
+    Scaffold(
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = {
+                    Text(
+                        text = action.uppercase(),
+                        color = White,
+                        fontSize = 16.sp,
+                        fontWeight = FontWeight.SemiBold
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = onBackClick) {
+                        Icon(
+                            painter = painterResource(R.drawable.ic_left_arrow),
+                            contentDescription = "Back",
+                            modifier = Modifier.size(24.dp),
+                            tint = White
+                        )
+                    }
+                },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = Primary
+                )
+            )
+        },
+        containerColor = White
+    ) { paddingValues ->
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+                .background(White)
+                .verticalScroll(rememberScrollState())
+                .padding(horizontal = if (isSmallScreen) 20.dp else 24.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceBetween
+        ) {
+
+            Spacer(
+                modifier = Modifier.height(
+                    16.dp
+                )
+            )
+
+            AmountBox(
+                amount = amount,
+                height = if (isSmallScreen) 115.dp else 142.dp
+            )
+
+            Spacer(
+                modifier = Modifier.height(
+                    100.dp
+                )
+            )
+
+            Keypad(
+                buttonHeight = if (isSmallScreen) 60.dp else 74.dp,
+                buttonSpacing = if (isSmallScreen) 8.dp else 12.dp,
+                onKeyClick = { key ->
+
+                    amount = when (key) {
+
+                        "del" -> {
+                            if (amount.length <= 1) {
+                                "0"
+                            } else {
+                                amount.dropLast(1)
+                            }
+                        }
+
+                        "." -> {
+                            if (amount.contains(".")) {
+                                amount
+                            } else {
+                                "$amount."
+                            }
+                        }
+
+                        else -> {
+                            if (amount == "0") {
+                                key
+                            } else {
+                                amount + key
+                            }
+                        }
+                    }
+                }
+            )
+
+            Spacer(
+                modifier = Modifier.height(
+                    if (isSmallScreen) 14.dp else 18.dp
+                )
+            )
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(14.dp)
+            ) {
+
+                Button(
+                    onClick = onCancelClick,
+                    modifier = Modifier
+                        .weight(1f)
+                        .height(if (isSmallScreen) 58.dp else 68.dp),
+                    shape = RoundedCornerShape(18.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = White,
+                        contentColor = Primary
+                    ),
+                    border = ButtonDefaults.outlinedButtonBorder
+                ) {
+                    Text(
+                        text = "Cancel",
+                        fontSize = if (isSmallScreen) 18.sp else 20.sp,
+                        fontWeight = FontWeight.Bold
+                    )
+                }
+
+                Button(
+                    onClick = {
+                        onNextClick(amount)
+                    },
+                    modifier = Modifier
+                        .weight(1f)
+                        .height(if (isSmallScreen) 58.dp else 68.dp),
+                    shape = RoundedCornerShape(18.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = Primary,
+                        contentColor = White
+                    )
+                ) {
+                    Text(
+                        text = "Next",
+                        fontSize = if (isSmallScreen) 18.sp else 20.sp,
+                        fontWeight = FontWeight.Bold
+                    )
+                }
+            }
+
+            Spacer(modifier = Modifier.height(12.dp))
+        }
+    }
+}
+
+@Composable
+private fun AmountBox(
+    amount: String,
+    height: Dp
+) {
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(height)
+            .background(
+                color = Primary,
+                shape = RoundedCornerShape(20.dp)
+            )
+            .padding(horizontal = 24.dp),
+        contentAlignment = Alignment.CenterEnd
+    ) {
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+
+            Text(
+                text = amount,
+                color = White,
+                fontSize = 26.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            Spacer(modifier = Modifier.width(14.dp))
+
+            Box(
+                modifier = Modifier
+                    .background(
+                        color = White,
+                        shape = RoundedCornerShape(10.dp)
+                    )
+                    .padding(
+                        horizontal = 16.dp,
+                        vertical = 6.dp
+                    )
+            ) {
+
+                Text(
+                    text = "MMK",
+                    color = Primary,
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.Bold
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun Keypad(
+    buttonHeight: Dp,
+    buttonSpacing: Dp,
+    onKeyClick: (String) -> Unit
+) {
+
+    val keys = listOf(
+        listOf("1", "2", "3"),
+        listOf("4", "5", "6"),
+        listOf("7", "8", "9"),
+        listOf(".", "0", "del")
+    )
+
+    Column(
+        verticalArrangement = Arrangement.spacedBy(buttonSpacing)
+    ) {
+
+        keys.forEach { row ->
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+
+                row.forEach { key ->
+
+                    Button(
+                        onClick = {
+                            onKeyClick(key)
+                        },
+                        modifier = Modifier
+                            .weight(1f)
+                            .height(buttonHeight),
+                        shape = RoundedCornerShape(18.dp),
+                        colors = ButtonDefaults.buttonColors(
+                            containerColor = Primary,
+                            contentColor = White
+                        ),
+                        contentPadding = PaddingValues(0.dp)
+                    ) {
+
+                        Text(
+                            text = key,
+                            fontSize = if (buttonHeight < 70.dp) 20.sp else 22.sp,
+                            fontWeight = FontWeight.Bold
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true, showSystemUi = false)
+@Composable
+private fun AmountScreenPreview() {
+
+    MOBPOSTheme {
+
+        AmountScreen(
+            action = "Amount",
+            onBackClick = {}
+        )
+    }
+}

app/src/main/java/com/mob/ustmm/ui/components/SquareButton.kt

@@ -0,0 +1,95 @@
+package com.mob.ustmm.ui.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.*
+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.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mob.ustmm.R
+import com.mob.ustmm.ui.theme.MOBPOSTheme
+import com.mob.ustmm.ui.theme.Primary
+import com.mob.ustmm.ui.theme.White
+
+@Composable
+fun SquareButton(
+    title: String,
+    icon: Int,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    containerColor: Color = White,
+    contentColor: Color = Primary,
+    iconTint: Color = contentColor,
+    disabledContainerColor: Color = White,
+    disabledContentColor: Color = Primary,
+    border: BorderStroke? = null,
+    shape: Shape = RoundedCornerShape(20.dp),
+    onClick: () -> Unit
+) {
+    Button(
+        onClick = onClick,
+        enabled = enabled,
+        modifier = modifier
+            .height(180.dp),
+        shape = shape,
+        border = border,
+        colors = ButtonDefaults.buttonColors(
+            containerColor = containerColor,
+            contentColor = contentColor,
+            disabledContainerColor = disabledContainerColor,
+            disabledContentColor = disabledContentColor
+        ),
+        contentPadding = PaddingValues(12.dp)
+    ) {
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Icon(
+                painter = painterResource(icon),
+                contentDescription = title,
+                tint = if (enabled) iconTint else disabledContentColor,
+                modifier = Modifier.size(60.dp)
+            )
+
+            Spacer(modifier = Modifier.height(10.dp))
+
+            Text(
+                text = title,
+                fontSize = 24.sp,
+                fontWeight = FontWeight.SemiBold,
+                textAlign = TextAlign.Center,
+                maxLines = 1
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SquareButtonPreview() {
+    MOBPOSTheme {
+        SquareButton(
+            title = "Sale",
+            icon = R.drawable.ic_menu,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            containerColor = White,
+            contentColor = White,
+            iconTint = Primary,
+            border = null,
+            onClick = {}
+        )
+    }
+}

app/src/main/java/com/mob/ustmm/ui/dashboard/BottomDashboardButton.kt

@@ -1,62 +0,0 @@
-package com.mob.ustmm.ui.dashboard
-
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.SegmentedButtonDefaults.Icon
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun BottomDashboardButton(
-    text: String,
-    icon: Int,
-    modifier: Modifier = Modifier,
-    enabled: Boolean = true,
-    onClick: () -> Unit
-) {
-    Button(
-        onClick = onClick,
-        enabled = enabled,
-        modifier = modifier
-            .padding(8.dp)
-            .height(81.dp),
-        shape = RoundedCornerShape(12.dp),
-        colors = ButtonDefaults.buttonColors(
-            containerColor = Color.Yellow,
-            contentColor = Color.White,
-            disabledContainerColor = Color.Gray,
-            disabledContentColor = Color.White
-        ),
-        contentPadding = PaddingValues(12.dp)
-    ) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center
-        ) {
-//            Icon(
-//                painter = painterResource(id = icon),
-//                contentDescription = null,
-//                tint = Color.White
-//            )
-
-            Spacer(modifier = Modifier.height(4.dp))
-
-            Text(
-                text = text,
-                fontSize = 17.sp
-            )
-        }
-    }
-}

app/src/main/java/com/mob/ustmm/ui/dashboard/DashboardMenuButton.kt

@@ -1,64 +0,0 @@
-package com.mob.ustmm.ui.dashboard
-
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun DashboardMenuButton(
-    text: String,
-    icon: Int,
-    modifier: Modifier = Modifier,
-    enabled: Boolean = true,
-    onClick: () -> Unit
-) {
-    Button(
-        onClick = onClick,
-        enabled = enabled,
-        modifier = modifier
-            .padding(8.dp)
-            .height(81.dp),
-        shape = RoundedCornerShape(8.dp),
-        colors = ButtonDefaults.buttonColors(
-            containerColor = Color.White,
-            contentColor = Color.Yellow,
-            disabledContainerColor = Color.LightGray,
-            disabledContentColor = Color.Gray
-        ),
-        border = BorderStroke(1.dp, Color.Black),
-        contentPadding = PaddingValues(8.dp)
-    ) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center
-        ) {
-            Icon(
-                painter = painterResource(id = icon),
-                contentDescription = null
-            )
-
-            Spacer(modifier = Modifier.height(4.dp))
-
-            Text(
-                text = text,
-                fontSize = 14.sp
-            )
-        }
-    }
-}

app/src/main/java/com/mob/ustmm/ui/dashboard/DashboardScreen.kt

@@ -4,25 +4,21 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.pager.HorizontalPager
-import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.ui.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.mob.ustmm.R
+import com.mob.ustmm.ui.components.SquareButton
+import com.mob.ustmm.ui.theme.MOBPOSTheme
 import com.mob.ustmm.ui.theme.*
-import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -30,6 +26,7 @@ import kotlinx.coroutines.launch
 fun DashboardScreen(
     settlementEnabled: Boolean,
     wavePayEnabled: Boolean,
+    onAmountClick: (String) -> Unit,
     onTransactionClick: () -> Unit,
     onSettlementClick: () -> Unit,
     onHistoryClick: () -> Unit,
@@ -40,27 +37,6 @@ fun DashboardScreen(
     val scope = rememberCoroutineScope()
 
 
-    val images = listOf(
-        R.drawable.box_christmas_delivery_gift_package_present_svgrepo_com,
-        R.drawable.buy_ecommerce_finance_payment_pos_shop_svgrepo_com,
-        R.drawable.appointment_calendar_date_event_month_plan_svgrepo_com
-    )
-    val startPage = Int.MAX_VALUE / 2;
-    
-    val pagerState = rememberPagerState(
-        initialPage = startPage,
-        pageCount = { Int.MAX_VALUE }
-    )
-
-    LaunchedEffect(Unit) {
-        while(true){
-            delay(3000)
-            pagerState.animateScrollToPage(
-                pagerState.currentPage + 1
-            )
-        }
-    }
-
     ModalNavigationDrawer(
         drawerState = drawerState,
         drawerContent = {
@@ -139,7 +115,6 @@ fun DashboardScreen(
             topBar = {
                 CenterAlignedTopAppBar(
                     title = {
-                        
                         Text(text = "Dashboard", color = White, fontWeight = FontWeight.SemiBold)
                     },
                     navigationIcon = {
@@ -150,7 +125,11 @@ fun DashboardScreen(
                                 }
                             }
                         ) {
-                            Icon(painter = painterResource(R.drawable.ic_menu), contentDescription = "Menu Icon", tint = White)
+                            Icon(
+                                painter = painterResource(R.drawable.ic_menu),
+                                contentDescription = "Menu Icon",
+                                tint = White
+                            )
                         }
                     },
                     colors = TopAppBarDefaults.topAppBarColors(
@@ -160,18 +139,114 @@ fun DashboardScreen(
             }
         ) { paddingValues ->
             Column(
-                modifier = Modifier.fillMaxSize().padding(paddingValues).background(White)
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues)
+                    .background(White)
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(20.dp),
+                    contentAlignment = Alignment.Center
                 ) {
-                HorizontalPager(state = pagerState) { page -> 
-                    val index = page % images.size;
                     Image(
-                        painter = painterResource(images[index]),
-                        contentDescription = "Banner images",
-                        modifier = Modifier.fillMaxSize(),
-                        contentScale = ContentScale.Crop
+                        painter = painterResource(R.drawable.logo_mob),
+                        contentDescription = "Mob logo"
+                    )
+                }
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            color = Primary,
+                            shape = RoundedCornerShape(
+                                topStart = 16.dp,
+                                topEnd = 16.dp,
+                                bottomStart = 0.dp,
+                                bottomEnd = 0.dp
+                            )
+                        )
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(16.dp),
+                        verticalArrangement = Arrangement.spacedBy(12.dp)
+                    ) {
+                        Row(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalArrangement = Arrangement.spacedBy(12.dp)
+                        ) {
+                            SquareButton(
+                                title = "Sale",
+                                icon = R.drawable.ic_sale,
+                                modifier = Modifier.weight(1f),
+                                containerColor = White,
+                                contentColor = Primary,
+                                iconTint = Primary,
+                                border = null,
+                                onClick = { onAmountClick("Sale") },
+                            )
+                            SquareButton(
+                                title = "Sign On",
+                                icon = R.drawable.ic_menu,
+                                modifier = Modifier.weight(1f),
+                                containerColor = White,
+                                contentColor = Primary,
+                                iconTint = Primary,
+                                border = null,
+                                onClick = { onAmountClick("Sign On") }
+                            )
+                        }
+
+                        Row(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalArrangement = Arrangement.spacedBy(12.dp)
+                        ) {
+                            SquareButton(
+                                title = "Settlement",
+                                icon = R.drawable.ic_menu,
+                                modifier = Modifier.weight(1f),
+                                enabled = settlementEnabled,
+                                containerColor = White,
+                                contentColor = Primary,
+                                iconTint = Primary,
+                                border = null,
+                                onClick = onSettlementClick
+                            )
+                            SquareButton(
+                                title = "Others",
+                                icon = R.drawable.ic_menu,
+                                modifier = Modifier.weight(1f),
+                                containerColor = White,
+                                contentColor = Primary,
+                                iconTint = Primary,
+                                border = null,
+                                onClick = onCardClick
                             )
                         }
                     }
                 }
             }
         }
+    }
+}
+
+@Preview(showBackground = true, showSystemUi = true)
+@Composable
+private fun DashboardScreenPreview() {
+    MOBPOSTheme {
+        DashboardScreen(
+            settlementEnabled = true,
+            wavePayEnabled = true,
+            onAmountClick = {},
+            onTransactionClick = {},
+            onSettlementClick = {},
+            onHistoryClick = {},
+            onCardClick = {},
+            onWavePayClick = {}
+        )
+    }
+}

app/src/main/java/com/mob/ustmm/ui/navigation/AppNavGraph.kt

@@ -1,13 +1,14 @@
 package com.mob.ustmm.ui.navigation
 
-
 import androidx.compose.runtime.Composable
+import androidx.navigation.NavHostController
+import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
-import androidx.navigation.NavHostController
+import androidx.navigation.navArgument
+import com.mob.ustmm.ui.amount.AmountScreen
 import com.mob.ustmm.ui.dashboard.DashboardScreen
 
-
 @Composable
 fun AppNavGraph(
     navController: NavHostController
@@ -20,6 +21,9 @@ import com.mob.ustmm.ui.dashboard.DashboardScreen
             DashboardScreen(
                 settlementEnabled = true,
                 wavePayEnabled = true,
+                onAmountClick = { action ->
+                    navController.navigate(Routes.Amount.createRoute(action))
+                },
                 onTransactionClick = {},
                 onSettlementClick = {},
                 onHistoryClick = {},
@@ -28,5 +32,18 @@ import com.mob.ustmm.ui.dashboard.DashboardScreen
             )
         }
 
+        composable(
+            route = Routes.Amount.route,
+            arguments = listOf(
+                navArgument("action") {
+                    type = NavType.StringType
+                }
+            )
+        ) { backStackEntry ->
+            AmountScreen(
+                action = backStackEntry.arguments?.getString("action").orEmpty(),
+                onBackClick = { navController.popBackStack() }
+            )
+        }
     }
 }

app/src/main/java/com/mob/ustmm/ui/navigation/Routes.kt

@@ -2,4 +2,7 @@ package com.mob.ustmm.ui.navigation
 
 sealed class Routes(val route: String) {
     data object Dashboard : Routes("dashboard")
+    data object Amount : Routes("amount/{action}") {
+        fun createRoute(action: String): String = "amount/$action"
+    }
 }

app/src/main/res/drawable/ic_left_arrow.xml

@@ -0,0 +1,24 @@
+<!--
+  ~ Copyright (C) 2026 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="800dp"
+    android:height="800dp"
+    android:viewportWidth="492"
+    android:viewportHeight="492">
+  <path
+      android:pathData="M198.61,246.1L382.66,62.04c5.07,-5.06 7.86,-11.82 7.86,-19.02c0,-7.21 -2.79,-13.97 -7.86,-19.03l-16.13,-16.12C361.48,2.79 354.71,0 347.5,0s-13.96,2.79 -19.03,7.86L109.33,227.01c-5.08,5.08 -7.87,11.87 -7.85,19.08c-0.02,7.25 2.76,14.03 7.85,19.11l218.94,218.93c5.06,5.07 11.82,7.86 19.03,7.86c7.21,0 13.96,-2.79 19.03,-7.86l16.12,-16.12c10.49,-10.49 10.49,-27.57 0,-38.06L198.61,246.1z"
+      android:fillColor="#000000"/>
+</vector>

app/src/main/res/drawable/ic_sale.xml

@@ -0,0 +1,24 @@
+<!--
+  ~ Copyright (C) 2026 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="50dp"
+    android:height="61dp"
+    android:viewportWidth="50"
+    android:viewportHeight="61">
+  <path
+      android:pathData="M12.5,18.228C11.125,18.228 9.948,17.633 8.97,16.445C7.992,15.256 7.502,13.825 7.5,12.152V6.076C7.5,4.405 7.99,2.975 8.97,1.786C9.95,0.597 11.127,0.002 12.5,0H37.5C38.875,0 40.053,0.595 41.033,1.786C42.013,2.977 42.502,4.407 42.5,6.076V12.152C42.5,13.823 42.011,15.254 41.033,16.445C40.054,17.635 38.877,18.23 37.5,18.228H12.5ZM12.5,12.152H37.5V6.076H12.5V12.152ZM5,60.759C3.625,60.759 2.448,60.165 1.47,58.976C0.492,57.787 0.002,56.356 0,54.683V51.646H50V54.683C50,56.354 49.511,57.785 48.533,58.976C47.554,60.167 46.377,60.762 45,60.759H5ZM0,48.608L8.688,24.835C9.104,23.722 9.729,22.849 10.563,22.217C11.396,21.585 12.292,21.268 13.25,21.266H36.75C37.708,21.266 38.604,21.583 39.438,22.217C40.271,22.851 40.896,23.723 41.313,24.835L50,48.608H0ZM16.25,42.532H18.75C19.083,42.532 19.375,42.38 19.625,42.076C19.875,41.772 20,41.418 20,41.013C20,40.608 19.875,40.253 19.625,39.949C19.375,39.646 19.083,39.494 18.75,39.494H16.25C15.917,39.494 15.625,39.646 15.375,39.949C15.125,40.253 15,40.608 15,41.013C15,41.418 15.125,41.772 15.375,42.076C15.625,42.38 15.917,42.532 16.25,42.532ZM16.25,36.456H18.75C19.083,36.456 19.375,36.304 19.625,36C19.875,35.696 20,35.342 20,34.937C20,34.532 19.875,34.177 19.625,33.873C19.375,33.57 19.083,33.418 18.75,33.418H16.25C15.917,33.418 15.625,33.57 15.375,33.873C15.125,34.177 15,34.532 15,34.937C15,35.342 15.125,35.696 15.375,36C15.625,36.304 15.917,36.456 16.25,36.456ZM16.25,30.38H18.75C19.083,30.38 19.375,30.228 19.625,29.924C19.875,29.62 20,29.266 20,28.861C20,28.456 19.875,28.101 19.625,27.798C19.375,27.494 19.083,27.342 18.75,27.342H16.25C15.917,27.342 15.625,27.494 15.375,27.798C15.125,28.101 15,28.456 15,28.861C15,29.266 15.125,29.62 15.375,29.924C15.625,30.228 15.917,30.38 16.25,30.38ZM23.75,42.532H26.25C26.583,42.532 26.875,42.38 27.125,42.076C27.375,41.772 27.5,41.418 27.5,41.013C27.5,40.608 27.375,40.253 27.125,39.949C26.875,39.646 26.583,39.494 26.25,39.494H23.75C23.417,39.494 23.125,39.646 22.875,39.949C22.625,40.253 22.5,40.608 22.5,41.013C22.5,41.418 22.625,41.772 22.875,42.076C23.125,42.38 23.417,42.532 23.75,42.532ZM23.75,36.456H26.25C26.583,36.456 26.875,36.304 27.125,36C27.375,35.696 27.5,35.342 27.5,34.937C27.5,34.532 27.375,34.177 27.125,33.873C26.875,33.57 26.583,33.418 26.25,33.418H23.75C23.417,33.418 23.125,33.57 22.875,33.873C22.625,34.177 22.5,34.532 22.5,34.937C22.5,35.342 22.625,35.696 22.875,36C23.125,36.304 23.417,36.456 23.75,36.456ZM23.75,30.38H26.25C26.583,30.38 26.875,30.228 27.125,29.924C27.375,29.62 27.5,29.266 27.5,28.861C27.5,28.456 27.375,28.101 27.125,27.798C26.875,27.494 26.583,27.342 26.25,27.342H23.75C23.417,27.342 23.125,27.494 22.875,27.798C22.625,28.101 22.5,28.456 22.5,28.861C22.5,29.266 22.625,29.62 22.875,29.924C23.125,30.228 23.417,30.38 23.75,30.38ZM31.25,42.532H33.75C34.083,42.532 34.375,42.38 34.625,42.076C34.875,41.772 35,41.418 35,41.013C35,40.608 34.875,40.253 34.625,39.949C34.375,39.646 34.083,39.494 33.75,39.494H31.25C30.917,39.494 30.625,39.646 30.375,39.949C30.125,40.253 30,40.608 30,41.013C30,41.418 30.125,41.772 30.375,42.076C30.625,42.38 30.917,42.532 31.25,42.532ZM31.25,36.456H33.75C34.083,36.456 34.375,36.304 34.625,36C34.875,35.696 35,35.342 35,34.937C35,34.532 34.875,34.177 34.625,33.873C34.375,33.57 34.083,33.418 33.75,33.418H31.25C30.917,33.418 30.625,33.57 30.375,33.873C30.125,34.177 30,34.532 30,34.937C30,35.342 30.125,35.696 30.375,36C30.625,36.304 30.917,36.456 31.25,36.456ZM31.25,30.38H33.75C34.083,30.38 34.375,30.228 34.625,29.924C34.875,29.62 35,29.266 35,28.861C35,28.456 34.875,28.101 34.625,27.798C34.375,27.494 34.083,27.342 33.75,27.342H31.25C30.917,27.342 30.625,27.494 30.375,27.798C30.125,28.101 30,28.456 30,28.861C30,29.266 30.125,29.62 30.375,29.924C30.625,30.228 30.917,30.38 31.25,30.38Z"
+      android:fillColor="#CA2027"/>
+</vector>

gradle/libs.versions.toml

@@ -10,6 +10,7 @@ kotlin = "2.2.10"
 composeBom = "2026.02.01"
 navigationCompose = "2.9.8"
 hilt = "2.57.1"
+foundation = "1.11.1"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -29,6 +30,7 @@ androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-te
 androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
 hilt-android = { group = "com.google.dagger", name = "hilt-android", version.ref = "hilt" }
 hilt-compiler = { group = "com.google.dagger", name = "hilt-compiler", version.ref = "hilt" }
+androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "foundation" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }