Improved UI and enhanced expense creation

Updated the UI across all screens (Login, Dashboard, Account Selection, Expense Details, and Creation) with a more modern, card-based design and improved layouts.

Expense creation now includes:
- Real-time split validation to ensure shares match the total amount.
- An "Equal Split" shortcut for quick allocation.
- Support for optional descriptions and multiple file attachments.
- Strict save validation.

The `MainActivity` now supports edge-to-edge display, and the `AccountDao` includes a new query to fetch accounts by ID. Added `material-icons-extended` dependency for enhanced iconography.
This commit is contained in:
2026-03-04 16:38:40 +01:00
parent 69e0344261
commit 463e1a013f
12 changed files with 793 additions and 284 deletions

View File

@@ -61,6 +61,7 @@ dependencies {
//Manually added
implementation("androidx.datastore:datastore-preferences:1.2.0")
implementation("androidx.compose.material:material-icons-extended:1.6.0")
val room_version = "2.8.4"
implementation("androidx.room:room-runtime:$room_version")

View File

@@ -4,6 +4,7 @@ import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.BackHandler
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -21,6 +22,7 @@ import de.miaurizius.shap_planner.viewmodels.MainViewModel
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
enableEdgeToEdge()
super.onCreate(savedInstanceState)
val prefs = UserPreferences(this)

View File

@@ -25,6 +25,9 @@ interface AccountDao {
@Query("SELECT * FROM accounts")
fun getAllAccounts(): Flow<List<Account>>
@Query("SELECT * FROM accounts WHERE id = :userId")
fun getAccountById(userId: UUID): Flow<Account?>
@Insert(onConflict = OnConflictStrategy.REPLACE)
suspend fun insertAccount(account: Account)

View File

@@ -1,6 +1,5 @@
package de.miaurizius.shap_planner.repository
import de.miaurizius.shap_planner.entities.Expense
import de.miaurizius.shap_planner.entities.ExpenseShare
import de.miaurizius.shap_planner.entities.ExpenseShareDao
import de.miaurizius.shap_planner.network.APIService

View File

@@ -1,7 +1,5 @@
package de.miaurizius.shap_planner.ui
import androidx.activity.compose.BackHandler
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -55,7 +53,7 @@ fun AppContent(
account = selectedAccount!!,
viewModel = creationViewModel,
onBack = { showAddExpenseScreen = false },
onSaved = { showAddExpenseScreen = false }
onSaved = { showAddExpenseScreen = false },
)
}
selectedExpense != null -> {

View File

@@ -1,10 +1,10 @@
package de.miaurizius.shap_planner.ui.screens
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
@@ -13,59 +13,176 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
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.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import de.miaurizius.shap_planner.entities.Account
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AccountSelectionScreen(accounts: List<Account>, onAccountClick: (Account) -> Unit, onAddAccountClick: () -> Unit) {
LazyColumn(
fun AccountSelectionScreen(
accounts: List<Account>,
onAccountClick: (Account) -> Unit,
onAddAccountClick: () -> Unit
) {
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = { Text("ShAp-Planner", fontWeight = FontWeight.Black) }
)
},
bottomBar = {
Surface(
modifier = Modifier.fillMaxWidth(),
tonalElevation = 2.dp
) {
Button(
onClick = onAddAccountClick,
modifier = Modifier
.fillMaxWidth()
.padding(20.dp)
.navigationBarsPadding()
.height(56.dp),
shape = MaterialTheme.shapes.medium
) {
Icon(Icons.Default.Add, contentDescription = null)
Spacer(modifier = Modifier.width(8.dp))
Text("Add New Account", style = MaterialTheme.typography.titleMedium)
}
}
}
) { padding ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
.statusBarsPadding()
.navigationBarsPadding(),
verticalArrangement = Arrangement.spacedBy(12.dp)
.padding(padding)
.padding(horizontal = 20.dp)
) {
Spacer(modifier = Modifier.height(16.dp))
Text(
text = "Welcome back!",
style = MaterialTheme.typography.headlineLarge,
fontWeight = FontWeight.Bold
)
Text(
text = "Select an account to continue",
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.secondary,
modifier = Modifier.padding(bottom = 16.dp)
)
LazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(12.dp),
contentPadding = PaddingValues(bottom = 16.dp)
) {
if (accounts.isEmpty()) {
item {
Text("Choose an account", style = MaterialTheme.typography.headlineSmall)
Box(
modifier = Modifier.fillParentMaxHeight(0.6f).fillMaxWidth(),
contentAlignment = Alignment.Center
) {
Text(
"No accounts yet.\nTap 'Add New Account' to start.",
textAlign = TextAlign.Center,
color = Color.Gray
)
}
}
}
items(accounts) { account ->
Card(modifier = Modifier.fillMaxWidth().clickable{ onAccountClick(account) }) {
Row(modifier = Modifier.padding(16.dp), verticalAlignment = Alignment.CenterVertically) {
Box(modifier = Modifier.size(40.dp).background(Color.Gray, shape = CircleShape))
Spacer(modifier = Modifier.width(16.dp))
Column {
Text(text = account.name, fontWeight = FontWeight.Bold)
Text(text = account.wgName, style = MaterialTheme.typography.bodyMedium)
AccountItem(account = account, onClick = { onAccountClick(account) })
}
}
}
}
item {
Spacer(modifier = Modifier.height(8.dp))
Button(
onClick = onAddAccountClick,
modifier = Modifier.fillMaxWidth()
) {
Text("Add account")
}
}
}
}
@Composable
fun AccountItem(account: Account, onClick: () -> Unit) {
ElevatedCard(
modifier = Modifier
.fillMaxWidth()
.clickable { onClick() },
shape = MaterialTheme.shapes.large,
colors = CardDefaults.elevatedCardColors(
containerColor = MaterialTheme.colorScheme.surface
)
) {
Row(
modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
// Stylized Avatar with Initial
Surface(
modifier = Modifier.size(52.dp),
shape = CircleShape,
color = MaterialTheme.colorScheme.primaryContainer
) {
Box(contentAlignment = Alignment.Center) {
Text(
text = account.name.take(1).uppercase(),
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold,
color = MaterialTheme.colorScheme.onPrimaryContainer
)
}
}
Spacer(modifier = Modifier.width(16.dp))
Column(modifier = Modifier.weight(1f)) {
Text(
text = account.name,
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold
)
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(
Icons.Default.Home,
contentDescription = null,
modifier = Modifier.size(14.dp),
tint = MaterialTheme.colorScheme.secondary
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = account.wgName,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.secondary
)
}
}
// Trailing Chevron
Icon(
Icons.AutoMirrored.Filled.KeyboardArrowRight,
contentDescription = null,
tint = MaterialTheme.colorScheme.outline
)
}
}
}

View File

@@ -1,7 +1,6 @@
package de.miaurizius.shap_planner.ui.screens
import android.annotation.SuppressLint
import androidx.activity.compose.BackHandler
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
@@ -13,25 +12,30 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Button
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import de.miaurizius.shap_planner.entities.Account
@@ -43,98 +47,89 @@ import de.miaurizius.shap_planner.viewmodels.MainViewModel
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DashboardScreen(
// Data and regarding Methods
account: Account,
onExpenseClick: (Expense) -> Unit,
onAddExpenseClick: () -> Unit,
// Default Methods
mainViewModel: MainViewModel,
onBack: () -> Unit,
onDelete: () -> Unit,
sessionState: SessionState,
onValidate: () -> Unit,
onSessionInvalid: () -> Unit) {
onSessionInvalid: () -> Unit
) {
val expenseResource by mainViewModel.expenseResource.collectAsState()
LaunchedEffect(Unit) { onValidate() }
LaunchedEffect(account) { mainViewModel.loadExpenses(account, forceRefresh = false) }
when (sessionState) {
SessionState.Loading -> {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
CircularProgressIndicator()
}
if (sessionState == SessionState.Invalid) {
LaunchedEffect(Unit) { onSessionInvalid() }
return
}
SessionState.Valid -> {
BackHandler {
onBack()
Scaffold(
topBar = {
TopAppBar(
title = {
Column {
Text(account.wgName, style = MaterialTheme.typography.titleLarge)
Text("Household", style = MaterialTheme.typography.labelSmall)
}
Scaffold(floatingActionButton = {
},
actions = {
IconButton(onClick = onBack) {
Icon(Icons.Default.Refresh, "Switch")
}
IconButton(onClick = onDelete) {
Icon(Icons.Default.Delete, "Delete", tint = MaterialTheme.colorScheme.error)
}
}
)
},
floatingActionButton = {
androidx.compose.material3.FloatingActionButton(
onClick = onAddExpenseClick,
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary
) {
Text("+", style = MaterialTheme.typography.headlineSmall)
Icon(Icons.Default.Add, "Neu")
}
}) { paddingValues ->
}
) { paddingValues ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues)
.padding(16.dp)
.statusBarsPadding()
.navigationBarsPadding()
.background(MaterialTheme.colorScheme.surface)
) {
// Header
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Column {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = "Hello, ${account.name}!",
style = MaterialTheme.typography.headlineMedium
style = MaterialTheme.typography.headlineMedium,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(16.dp))
SummaryCard(expenses = expenseResource.data ?: emptyList())
}
Text(
text = "Household: ${account.wgName}",
style = MaterialTheme.typography.bodyLarge,
color = Color.Gray
text = "Latest expenses",
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
color = MaterialTheme.colorScheme.secondary
)
}
Button(onClick = onBack) {
Text("Switch")
}
}
Spacer(modifier = Modifier.height(5.dp))
Button(onClick = onDelete) {
Text("Delete")
}
Spacer(modifier = Modifier.height(10.dp))
Text("Costs", style = MaterialTheme.typography.titleLarge)
Spacer(modifier = Modifier.height(8.dp))
if(expenseResource is Resource.Loading && expenseResource.data?.isEmpty() == true) {
CircularProgressIndicator(modifier = Modifier.align(Alignment.CenterHorizontally))
}
if(expenseResource is Resource.Error) {
Text("Error: ${expenseResource.message}", color = Color.Red)
Box(modifier = Modifier.fillMaxSize()) {
if (expenseResource is Resource.Loading && expenseResource.data?.isEmpty() == true) {
CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
}
LazyColumn(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.surfaceVariant, shape = MaterialTheme.shapes.medium),
contentPadding = PaddingValues(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
items(expenseResource.data ?: emptyList()) { expense ->
ExpenseItem(expense = expense, onClick = { onExpenseClick(expense) })
@@ -143,15 +138,25 @@ fun DashboardScreen(
}
}
}
}
SessionState.Invalid -> {
LaunchedEffect(Unit) {
onSessionInvalid()
}
}
is SessionState.Error -> {
Text("Server error")
@SuppressLint("DefaultLocale")
@Composable
fun SummaryCard(expenses: List<Expense>) {
val total = expenses.sumOf { it.amount } / 100.0
androidx.compose.material3.Card(
modifier = Modifier.fillMaxWidth(),
colors = androidx.compose.material3.CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.primaryContainer
)
) {
Column(modifier = Modifier.padding(20.dp)) {
Text("Total expenditure", style = MaterialTheme.typography.labelMedium)
Text(
text = String.format("%.2f €", total),
style = MaterialTheme.typography.displaySmall,
fontWeight = FontWeight.Black
)
}
}
}
@@ -159,14 +164,54 @@ fun DashboardScreen(
@SuppressLint("DefaultLocale")
@Composable
fun ExpenseItem(expense: Expense, onClick: () -> Unit) {
Surface(modifier = Modifier
androidx.compose.material3.ElevatedCard(
modifier = Modifier
.fillMaxWidth()
.clickable{onClick()},
shape = MaterialTheme.shapes.small,
color = MaterialTheme.colorScheme.surface) {
Row(modifier = Modifier.padding(16.dp), horizontalArrangement = Arrangement.SpaceBetween) {
Text(text = expense.title, style = MaterialTheme.typography.bodyLarge)
Text(text = String.format("%.2f€", expense.amount / 100.0), style = MaterialTheme.typography.bodyLarge, fontWeight = FontWeight.Bold)
.clickable { onClick() },
shape = MaterialTheme.shapes.medium,
colors = androidx.compose.material3.CardDefaults.elevatedCardColors(
containerColor = MaterialTheme.colorScheme.surface
)
) {
Row(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Surface(
shape = androidx.compose.foundation.shape.CircleShape,
color = MaterialTheme.colorScheme.primaryContainer,
modifier = Modifier.size(40.dp)
) {
Box(contentAlignment = Alignment.Center) {
Text(
text = expense.title.take(1).uppercase(),
style = MaterialTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.onPrimaryContainer
)
}
}
Spacer(modifier = Modifier.width(16.dp))
Column {
Text(
text = expense.title,
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold
)
}
}
Text(
text = String.format("%.2f €", expense.amount / 100.0),
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.ExtraBold,
color = MaterialTheme.colorScheme.primary
)
}
}
}

View File

@@ -1,17 +1,28 @@
package de.miaurizius.shap_planner.ui.screens
import android.annotation.SuppressLint
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Description
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import de.miaurizius.shap_planner.entities.Account
import de.miaurizius.shap_planner.viewmodels.ExpenseCreationViewModel
import java.util.UUID
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@SuppressLint("DefaultLocale")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ExpenseCreationScreen(
account: Account,
@@ -20,68 +31,219 @@ fun ExpenseCreationScreen(
onBack: () -> Unit
) {
var title by remember { mutableStateOf("") }
var amountStr by remember { mutableStateOf("") }
var description by remember { mutableStateOf("") }
var totalAmountStr by remember { mutableStateOf("") }
val attachmentUris = remember { mutableStateListOf<android.net.Uri>() }
val userShares = remember { mutableStateMapOf<java.util.UUID, String>() }
val users by viewModel.users.collectAsState()
val selectedUsers = remember { mutableStateListOf<UUID>() }
// Real-time calculation logic
val totalCents = (totalAmountStr.replace(",", ".").toDoubleOrNull() ?: 0.0) * 100
val distributedCents = userShares.values.sumOf {
(it.replace(",", ".").toDoubleOrNull() ?: 0.0) * 100
}.toLong()
val diff = totalCents.toLong() - distributedCents
val isAmountMatched = totalCents > 0 && diff == 0L
// File Picker for multiple files (Images & PDFs)
val launcher = androidx.activity.compose.rememberLauncherForActivityResult(
contract = androidx.activity.result.contract.ActivityResultContracts.GetMultipleContents()
) { uris ->
attachmentUris.addAll(uris)
}
LaunchedEffect(Unit) { viewModel.loadUsers() }
Scaffold(
topBar = {
TopAppBar(title = { Text("New Expense") })
TopAppBar(
title = { Text("New Expense") },
navigationIcon = { IconButton(onClick = onBack) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
} }
)
}
) { padding ->
Column(modifier = Modifier.padding(padding).padding(16.dp)) {
LazyColumn(
modifier = Modifier.fillMaxSize().padding(padding).padding(horizontal = 16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
// Header Info
item {
Spacer(modifier = Modifier.height(8.dp))
ElevatedCard(modifier = Modifier.fillMaxWidth()) {
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = title,
onValueChange = { title = it },
label = { Text("What was bought?") },
label = { Text("Title *") },
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(8.dp))
Spacer(modifier = Modifier.height(12.dp))
OutlinedTextField(
value = amountStr,
onValueChange = { amountStr = it },
label = { Text("Amount in €") },
value = totalAmountStr,
onValueChange = { totalAmountStr = it },
label = { Text("Total Amount (€) *") },
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
modifier = Modifier.fillMaxWidth()
)
}
}
}
// Optional Description & Multi-File Attachments
item {
Text("Additional Info", style = MaterialTheme.typography.titleMedium)
ElevatedCard(modifier = Modifier.fillMaxWidth()) {
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = description,
onValueChange = { description = it },
label = { Text("Description (Optional)") },
modifier = Modifier.fillMaxWidth(),
minLines = 2
)
Spacer(modifier = Modifier.height(16.dp))
Text("Who participated?", style = MaterialTheme.typography.titleMedium)
FlowRow(modifier = Modifier.padding(vertical = 8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
users.forEach { user ->
FilterChip(
selected = selectedUsers.contains(user.id),
onClick = {
if (selectedUsers.contains(user.id)) selectedUsers.remove(user.id)
else selectedUsers.add(user.id)
},
label = { Text(user.name) }
Text("Attachments (${attachmentUris.size})", style = MaterialTheme.typography.labelLarge)
attachmentUris.forEach { uri ->
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(Icons.Default.Description, "File", modifier = Modifier.size(20.dp))
Text(" Document attached", modifier = Modifier.weight(1f), style = MaterialTheme.typography.bodySmall)
IconButton(onClick = { attachmentUris.remove(uri) }) {
Icon(Icons.Default.Delete, "Remove", tint = Color.Red)
}
}
}
Button(onClick = { launcher.launch("*/*") }) {
Text("Select Files (Images, PDF)")
}
}
}
}
// Split Details & Validation Message
item {
Column {
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically) {
Text("Split Details *", style = MaterialTheme.typography.titleMedium)
TextButton(onClick = {
if (totalCents > 0) {
val share = String.format("%.2f", (totalCents / users.size) / 100.0)
users.forEach { userShares[it.id] = share }
}
}) { Text("Split Equally") }
}
// VALIDATION MESSAGE
if (totalCents > 0) {
val statusText = when {
diff > 0 -> "Remaining: ${String.format("%.2f", diff / 100.0)}"
diff < 0 -> "Over-allocated: ${String.format("%.2f", Math.abs(diff) / 100.0)}"
else -> "Amount matched! ✓"
}
val statusColor = if (diff == 0L) Color(0xFF2E7D32) else MaterialTheme.colorScheme.error
Surface(
color = statusColor.copy(alpha = 0.1f),
shape = MaterialTheme.shapes.small,
modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp)
) {
Text(
text = statusText,
color = statusColor,
modifier = Modifier.padding(8.dp),
style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}
}
}
}
Spacer(modifier = Modifier.weight(1f))
items(users) { user ->
UserShareInputItem(
userName = user.name,
amount = userShares[user.id] ?: "",
onAmountChange = { userShares[user.id] = it }
)
}
// Save Actions
item {
Button(
onClick = {
val cents = (amountStr.replace(",", ".").toDoubleOrNull() ?: 0.0) * 100
viewModel.saveExpense(account, title, cents.toInt(), selectedUsers.toList())
viewModel.saveExpense(
account = account,
title = title,
description = description,
amountCents = totalCents.toInt(),
shares = userShares.mapValues { (it.value.replace(",",".").toDoubleOrNull() ?: 0.0).toInt() * 100 }.filter { it.value > 0 },
attachments = attachmentUris.map { it.toString() }
)
onSaved()
},
modifier = Modifier.fillMaxWidth(),
enabled = title.isNotBlank() && amountStr.isNotBlank() && selectedUsers.isNotEmpty()
modifier = Modifier.fillMaxWidth().height(56.dp),
enabled = title.isNotBlank() && isAmountMatched // STRICT VALIDATION
) {
Text("Save")
Text("Save Expense")
}
if (totalAmountStr.isNotBlank() && !isAmountMatched) {
Text(
"Sum of shares must equal total amount to save.",
style = MaterialTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.error,
modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
textAlign = TextAlign.Center
)
}
TextButton(onClick = onBack, modifier = Modifier.fillMaxWidth()) {
Text("Cancel")
}
Spacer(modifier = Modifier.height(32.dp))
}
}
}
}
@Composable
fun UserShareInputItem(userName: String, amount: String, onAmountChange: (String) -> Unit) {
Card(
modifier = Modifier.fillMaxWidth(),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.3f))
) {
Row(
modifier = Modifier.padding(12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Surface(
shape = androidx.compose.foundation.shape.CircleShape,
color = MaterialTheme.colorScheme.primaryContainer,
modifier = Modifier.size(32.dp)
) {
Box(contentAlignment = Alignment.Center) {
Text(userName.take(1).uppercase(), style = MaterialTheme.typography.bodySmall)
}
}
Spacer(modifier = Modifier.width(12.dp))
Text(userName, modifier = Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
OutlinedTextField(
value = amount,
onValueChange = onAmountChange,
modifier = Modifier.width(100.dp),
placeholder = { Text("0.00") },
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
singleLine = true,
textStyle = MaterialTheme.typography.bodyMedium.copy(textAlign = TextAlign.End)
)
Spacer(modifier = Modifier.width(4.dp))
Text("")
}
}
}

View File

@@ -2,24 +2,26 @@ package de.miaurizius.shap_planner.ui.screens
import android.annotation.SuppressLint
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Card
import androidx.compose.material3.DividerDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
@@ -54,32 +56,81 @@ fun ExpenseDetailScreen(
Scaffold(
topBar = {
TopAppBar(
title = { Text(expense.title) },
navigationIcon = { IconButton(onClick = onBack) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
} }
title = { Text("Expense Details") },
navigationIcon = {
IconButton(onClick = onBack) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
}
}
)
}
) { padding ->
Column(modifier = Modifier.padding(padding).padding(16.dp)) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(padding)
.padding(16.dp)
) {
// Hero Section: Amount & Title
Column(
modifier = Modifier.fillMaxWidth().padding(bottom = 24.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = String.format("%.2f€", expense.amount / 100.0),
text = "Total Amount",
style = MaterialTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.secondary
)
Text(
text = String.format("%.2f €", expense.amount / 100.0),
style = MaterialTheme.typography.displayMedium,
fontWeight = FontWeight.Bold,
fontWeight = FontWeight.Black,
color = MaterialTheme.colorScheme.primary
)
Text(expense.description, style = MaterialTheme.typography.bodyLarge)
Text(
text = expense.title,
style = MaterialTheme.typography.headlineSmall,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}
Spacer(modifier = Modifier.height(24.dp))
HorizontalDivider(Modifier, DividerDefaults.Thickness, DividerDefaults.color)
Spacer(modifier = Modifier.height(16.dp))
// Description Card (only shown if not empty)
if (expense.description.isNotBlank()) {
androidx.compose.material3.ElevatedCard(
modifier = Modifier.fillMaxWidth().padding(bottom = 24.dp),
colors = androidx.compose.material3.CardDefaults.elevatedCardColors(
containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
)
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = "Description",
style = MaterialTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.primary
)
Spacer(modifier = Modifier.height(4.dp))
Text(text = expense.description, style = MaterialTheme.typography.bodyLarge)
}
}
}
Text("Cost Allocation", style = MaterialTheme.typography.titleLarge)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "Cost Distribution",
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(bottom = 12.dp)
)
LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
LazyColumn(
verticalArrangement = Arrangement.spacedBy(12.dp),
modifier = Modifier.fillMaxSize()
) {
items(shares) { item ->
ShareItem(item.user?.name ?: "Unknown User", item.share.share_cents)
ShareItem(
name = item.user?.name ?: "Unknown User",
amountCents = item.share.share_cents
)
}
}
}
@@ -89,20 +140,49 @@ fun ExpenseDetailScreen(
@SuppressLint("DefaultLocale")
@Composable
fun ShareItem(name: String, amountCents: Int) {
Card(modifier = Modifier
.fillMaxWidth()
.padding(vertical = 4.dp)
androidx.compose.material3.OutlinedCard(
modifier = Modifier.fillMaxWidth(),
shape = MaterialTheme.shapes.medium,
colors = androidx.compose.material3.CardDefaults.outlinedCardColors(
containerColor = MaterialTheme.colorScheme.surface
)
) {
Row(
modifier = Modifier.fillMaxWidth().padding(16.dp),
modifier = Modifier
.fillMaxWidth()
.padding(12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(name, fontWeight = FontWeight.Medium, modifier = Modifier.weight(1f))
// User Avatar Circle
Surface(
shape = androidx.compose.foundation.shape.CircleShape,
color = MaterialTheme.colorScheme.secondaryContainer,
modifier = Modifier.size(36.dp)
) {
Box(contentAlignment = Alignment.Center) {
Text(
text = String.format("%.2f€", amountCents / 100.0),
color = if (amountCents > 0) Color(0xFF4CAF50) else Color.Gray,
text = name.take(1).uppercase(),
style = MaterialTheme.typography.bodyMedium,
fontWeight = FontWeight.Bold,
style = MaterialTheme.typography.bodyLarge
color = MaterialTheme.colorScheme.onSecondaryContainer
)
}
}
Spacer(modifier = Modifier.width(12.dp))
Text(
text = name,
style = MaterialTheme.typography.bodyLarge,
fontWeight = FontWeight.Medium,
modifier = Modifier.weight(1f)
)
Text(
text = String.format("%.2f €", amountCents / 100.0),
style = MaterialTheme.typography.bodyLarge,
fontWeight = FontWeight.Bold,
color = if (amountCents > 0) Color(0xFF2E7D32) else Color.Gray
)
}
}

View File

@@ -3,70 +3,174 @@ package de.miaurizius.shap_planner.ui.screens
import androidx.activity.compose.BackHandler
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Cloud
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.material.icons.filled.VpnKey
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LoginScreen(onLogin: (String, String, String) -> Unit, onBack: (() -> Unit)? = null) {
fun LoginScreen(
onLogin: (String, String, String) -> Unit,
onBack: (() -> Unit)? = null
) {
if (onBack != null) {
BackHandler {
onBack()
}
BackHandler { onBack() }
}
var serverUrl by remember { mutableStateOf("") }
var username by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
var passwordVisible by remember { mutableStateOf(false) }
Column(modifier = Modifier.padding(16.dp).statusBarsPadding().navigationBarsPadding()) {
Text("Bitte anmelden")
Spacer(modifier = Modifier.height(8.dp))
Scaffold(
topBar = {
TopAppBar(
title = { Text("Add Account", fontWeight = FontWeight.Bold) },
navigationIcon = {
if (onBack != null) {
IconButton(onClick = onBack) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
}
}
}
)
}
) { padding ->
Column(
modifier = Modifier
.fillMaxSize()
.padding(padding)
.padding(24.dp)
.verticalScroll(rememberScrollState()), // Scrollbar, falls die Tastatur den Platz wegnimmt
horizontalAlignment = Alignment.CenterHorizontally
) {
// App Icon or Welcome Text
Icon(
imageVector = Icons.Default.Lock,
contentDescription = null,
modifier = Modifier.size(64.dp),
tint = MaterialTheme.colorScheme.primary
)
//Home-Server
TextField(
Text(
text = "Connect to Server",
style = MaterialTheme.typography.headlineMedium,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(top = 16.dp)
)
Text(
text = "Enter your credentials to link your account",
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.secondary,
textAlign = TextAlign.Center,
modifier = Modifier.padding(bottom = 32.dp)
)
// Server URL Field
OutlinedTextField(
value = serverUrl,
onValueChange = { serverUrl = it },
label = { Text("Server-Domain") }
label = { Text("Server URL") },
placeholder = { Text("your-server.com") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
leadingIcon = { Icon(Icons.Default.Cloud, contentDescription = null) },
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Uri, imeAction = ImeAction.Next)
)
Spacer(modifier = Modifier.height(8.dp))
//Username
TextField(
Spacer(modifier = Modifier.height(16.dp))
// Username Field
OutlinedTextField(
value = username,
onValueChange = { username = it },
label = { Text("Nutzername") }
label = { Text("Username") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
leadingIcon = { Icon(Icons.Default.Person, contentDescription = null) },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
)
Spacer(modifier = Modifier.height(8.dp))
//Password
TextField(
Spacer(modifier = Modifier.height(16.dp))
// Password Field
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("Passwort") }
label = { Text("Password") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
leadingIcon = { Icon(Icons.Default.VpnKey, contentDescription = null) },
visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Done
),
trailingIcon = {
val image = if (passwordVisible) Icons.Default.Visibility else Icons.Default.VisibilityOff
IconButton(onClick = { passwordVisible = !passwordVisible }) {
Icon(imageVector = image, contentDescription = "Toggle password visibility")
}
}
)
Spacer(modifier = Modifier.height(8.dp))
Button(onClick = { if(serverUrl.isNotEmpty() && username.isNotEmpty() && password.isNotEmpty()) onLogin(
serverUrl,
username,
password
) }) {
Text("Login")
Spacer(modifier = Modifier.height(32.dp))
// Login Button
Button(
onClick = { onLogin(serverUrl, username, password) },
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
enabled = serverUrl.isNotBlank() && username.isNotBlank() && password.isNotBlank(),
shape = MaterialTheme.shapes.medium
) {
Text("Connect Account", style = MaterialTheme.typography.titleMedium)
}
if (onBack != null) {
TextButton(onClick = onBack, modifier = Modifier.padding(top = 8.dp)) {
Text("Cancel", color = MaterialTheme.colorScheme.secondary)
}
}
}
}
}

View File

@@ -30,35 +30,37 @@ class ExpenseCreationViewModel(
}
}
fun saveExpense(account: Account, title: String, amountCents: Int, selectedUserIds: List<UUID>) {
viewModelScope.launch {
val expenseId = UUID.randomUUID() //TODO: Backend has to generate UUID
val newExpense = Expense(
id = expenseId,
payer_id = account.id,
amount = amountCents,
title = title,
description = "",
attachments = null,
created_at = (System.currentTimeMillis() / 1000).toInt(),
last_updated_at = 0
)
expenseDao.insertExpense(newExpense)
val shareAmount = amountCents / selectedUserIds.size
selectedUserIds.forEach { userId ->
shareDao.insertShare(
ExpenseShare(
UUID.randomUUID(), //TODO: Backend has to generate UUID
expenseId,
userId,
shareAmount
)
)
}
// API Calls
}
fun saveExpense(
account: Account,
title: String,
description: String,
amountCents: Int,
shares: Map<UUID, Int>,
attachments: List<String>
) {
// viewModelScope.launch {
// val expenseId = UUID.randomUUID()
// val newExpense = Expense(
// id = expenseId,
// payer_id = account.id,
// amount = amountCents,
// title = title,
// description = description,
// attachments = if (attachments.isEmpty()) null else attachments,
// created_at = (System.currentTimeMillis() / 1000).toInt(),
// last_updated_at = 0
// )
//
// expenseDao.insertExpense(newExpense)
//
// shares.forEach { (userId, shareCents) ->
// shareDao.insertShare(
// ExpenseShare(UUID.randomUUID(), expenseId, userId, shareCents)
// )
// }
//
// // API POST Request
//
// }
}
}

View File

@@ -82,10 +82,6 @@ class MainViewModel(
sessionState = SessionState.Valid
// Fetch data
// loadExpenses(account)
println("All data fetched")
return@launch
} else {
sessionState = SessionState.Invalid