AddUi done

Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt

@@ -2,21 +2,16 @@ package at.xaxa.ledger.ui
 
 import android.icu.text.SimpleDateFormat
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.gestures.awaitEachGesture
-import androidx.compose.foundation.gestures.awaitFirstDown
-import androidx.compose.foundation.gestures.waitForUpOrCancellation
 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.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.layout.wrapContentWidth
@@ -29,12 +24,12 @@ import androidx.compose.material3.DatePicker
 import androidx.compose.material3.DatePickerDialog
 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.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TextField
 import androidx.compose.material3.rememberDatePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -46,18 +41,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.PointerEventPass
-import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.intl.Locale
 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.em
 import androidx.compose.ui.unit.sp
-import java.time.LocalDate
 import java.util.Date
+import java.util.Locale
 
 // region Header Card
 @Composable
@@ -67,7 +59,6 @@ fun HeaderCard(modifier: Modifier = Modifier, balance: String) {
         color = Color(0xfff9f9f9),
         border = BorderStroke(1.dp, Color(0xffc6c6c6)),
         modifier = modifier
-            .padding(16.dp, 0.dp)
             .shadow(
                 elevation = 8.dp,
                 shape = RoundedCornerShape(12.dp),
@@ -136,7 +127,6 @@ fun HorizontalCard(modifier: Modifier = Modifier, name: String, date: String, am
         color = Color(0xfff9f9f9),
         border = BorderStroke(1.dp, Color(0xffc6c6c6)),
         modifier = modifier
-            .padding(16.dp, 0.dp)
             .clip(shape = RoundedCornerShape(12.dp))
     ) {
         Row(
@@ -204,7 +194,9 @@ private fun HorizontalCardPreview() {
 }
 // endregion
 
-// region Button Success
+// region Buttons
+
+//Success
 @Composable
 fun ButtonSuccess(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
    CustomButton(modifier, text, onClick, Color(0xff61a483))
@@ -215,9 +207,8 @@ fun ButtonSuccess(modifier: Modifier = Modifier, text: String, onClick: () -> Un
 private fun ButtonSuccessPreview() {
     ButtonSuccess(Modifier, "Success", onClick = { println("success") })
 }
-// endregion
 
-// region Button Danger
+//Danger
 @Composable
 fun ButtonDanger(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
     CustomButton(modifier, text, onClick, Color(0xffc14d4d))
@@ -228,10 +219,7 @@ fun ButtonDanger(modifier: Modifier = Modifier, text: String, onClick: () -> Uni
 private fun ButtonDangerPreview() {
     ButtonDanger(Modifier, "Danger", onClick = { println("success") })
 }
-// endregion
 
-
-//Color(0xff61a483)
 @Composable
 private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: () -> Unit, color: Color){
     Button(
@@ -240,7 +228,6 @@ private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: (
         colors = ButtonDefaults.buttonColors(containerColor = color),
         contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
         modifier = modifier
-            .padding(16.dp, 0.dp)
             .shadow(
                 elevation = 8.dp,
                 shape = RoundedCornerShape(12.dp),
@@ -273,60 +260,71 @@ private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: (
     }
 }
 
+// endregion
 
+// region Docked Date Picker
 
-
+@OptIn(ExperimentalMaterial3Api::class)
-
-
 @Composable
-fun DatePicker(
+fun DatePickerDocked() {
-    onDateSelected: (LocalDate) -> Unit,
+    var showDatePicker by remember { mutableStateOf(false) }
-    onDismiss: () -> Unit
+    val datePickerState = rememberDatePickerState()
-) {
+    val selectedDate = datePickerState.selectedDateMillis?.let {
-    var selectedDate by remember { mutableStateOf(LocalDate.now()) }
+        convertMillisToDate(it)
+    } ?: ""
 
-    Column(
+    Box(
-        modifier = Modifier
+        modifier = Modifier.fillMaxWidth()
-            .fillMaxWidth()
     ) {
-        DatePickerDialog(
+        OutlinedTextField(
-            onDateSelected = { date ->
+            value = selectedDate,
-                selectedDate = date
+            onValueChange = { },
+            label = { Text("Date") },
+            readOnly = true,
+            trailingIcon = {
+                IconButton(onClick = { showDatePicker = !showDatePicker }) {
+                    Icon(
+                        imageVector = Icons.Default.DateRange,
+                        contentDescription = "Select date"
+                    )
+                }
             },
-            onDismiss = onDismiss
-        )
-        Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(top = 16.dp),
+        )
-            horizontalArrangement = Arrangement.End
+
-        ) {
+        if (showDatePicker) {
-            TextButton(onClick = onDismiss) {
+            DatePickerDialog(
-                Text("Cancel")
+                onDismissRequest = { showDatePicker = false },
-            }
+                confirmButton = {
-            Spacer(modifier = Modifier.width(8.dp))
+                    TextButton(
-            TextButton(onClick = { onDateSelected(selectedDate) }) {
+                        onClick = {
-                Text("OK")
+                            showDatePicker = false
+                        }
+                    ) {
+                        Text("OK")
+                    }
+                },
+                dismissButton = {
+                    TextButton(
+                        onClick = { showDatePicker = false }
+                    ) {
+                        Text("Cancel")
+                    }
+                }
+            ) {
+                DatePicker(
+                    state = datePickerState,
+                    showModeToggle = false
+                )
             }
         }
     }
 }
 
-@Composable
+fun convertMillisToDate(millis: Long): String {
-fun DatePickerDialog(
+    val formatter = SimpleDateFormat("DD.MM.yyyy", Locale.getDefault())
-    onDateSelected: (LocalDate) -> Unit,
+    return formatter.format(Date(millis))
-    onDismiss: () -> Unit
-) {
-    // Implement your date picker logic here
-    // For simplicity, we'll just use a simple date picker
-    var selectedDate by remember { mutableStateOf(LocalDate.now()) }
-
-    // You can use a library like `androidx.compose.material3.DatePicker` or a custom implementation
-    // For now, we'll just use a simple text input for demonstration purposes
-    OutlinedTextField(
-        value = selectedDate.toString(),
-        onValueChange = { },
-        label = { Text("Date") },
-        modifier = Modifier.fillMaxWidth()
-    )
 }
+
+// endregion

Ledger/app/src/main/java/at/xaxa/ledger/ui/add/AddUI.kt

@@ -1,5 +1,6 @@
 package at.xaxa.ledger.ui.add
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -10,83 +11,97 @@ import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
 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.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import at.xaxa.ledger.ui.AppViewModelProvider
-import at.xaxa.ledger.ui.DatePicker
+import at.xaxa.ledger.ui.ButtonSuccess
+import at.xaxa.ledger.ui.DatePickerDocked
 import at.xaxa.ledger.ui.home.HomeViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun Add(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit, HomeViewModel : HomeViewModel = viewModel(factory = AppViewModelProvider.Factory)) {
+    var name by remember { mutableStateOf("") }
     var spending by remember { mutableStateOf("") }
 
     var expanded by remember { mutableStateOf(false) }
     var selectedItem by remember { mutableStateOf("") }
     val categories = listOf("Option 1", "Option 2", "Option 3")
 
-
     Column(
         modifier = modifier.fillMaxSize()
-            .padding(16.dp)
+            .padding(16.dp, 0.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        OutlinedTextField(
+        Column(
-            value = spending,
+            Modifier.weight(1f)
-            onValueChange = { spending = it },
-            label = { Text("Spending") },
-            modifier = Modifier
-                .fillMaxWidth()
-        )
-        OutlinedTextField(
-            value = spending,
-            onValueChange = { spending = it },
-            label = { Text("Spending") },
-            modifier = Modifier
-                .fillMaxWidth()
-        )
-
-        ExposedDropdownMenuBox(
-            expanded = expanded,
-            onExpandedChange = { expanded = it }
         ) {
-            // TextField to display the selected item and trigger the dropdown
             OutlinedTextField(
-                value = selectedItem,
+                value = name,
-                onValueChange = {},
+                onValueChange = { name = it },
-                label = { Text("Category") },
+                label = { Text("Name") },
-                readOnly = true,
+                modifier = Modifier
-                trailingIcon = {
+                    .fillMaxWidth()
-                    ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
+            )
-                },
+            OutlinedTextField(
+                value = spending,
+                onValueChange = { spending = it },
+                label = { Text("Spending") },
                 modifier = Modifier
-                    .menuAnchor()
                     .fillMaxWidth()
             )
 
-            // Dropdown menu
+            ExposedDropdownMenuBox(
-            ExposedDropdownMenu(
                 expanded = expanded,
-                onDismissRequest = { expanded = false }
+                onExpandedChange = { expanded = it }
             ) {
-                categories.forEach { item ->
+                // TextField to display the selected item and trigger the dropdown
-                    DropdownMenuItem(
+                OutlinedTextField(
-                        text = { Text(text = item) },
+                    value = selectedItem,
-                        onClick = {
+                    onValueChange = {},
-                            selectedItem = item
+                    label = { Text("Category") },
-                            expanded = false
+                    readOnly = true,
-                        }
+                    trailingIcon = {
-                    )
+                        ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
+                    },
+                    modifier = Modifier
+                        .menuAnchor()
+                        .fillMaxWidth()
+                )
+
+                // Dropdown menu
+                ExposedDropdownMenu(
+                    expanded = expanded,
+                    onDismissRequest = { expanded = false }
+                ) {
+                    categories.forEach { item ->
+                        DropdownMenuItem(
+                            text = { Text(text = item) },
+                            onClick = {
+                                selectedItem = item
+                                expanded = false
+                            }
+                        )
+                    }
                 }
             }
+
+            DatePickerDocked()
         }
 
-        DatePicker(onDateSelected = { date -> println("Selected date in milliseconds: $date") }, onDismiss = { println("Dismissed") })
+        Box(
+            modifier = Modifier
+                .fillMaxWidth(),
+            contentAlignment = Alignment.Center
+        ) {
+            ButtonSuccess(modifier = Modifier, "Add Transaction", onClick = { print("test") })
+        }
     }
 }

Ledger/app/src/main/java/at/xaxa/ledger/ui/home/HomeUI.kt

@@ -26,7 +26,9 @@ fun Home(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit, onButtonClic
     val state by HomeViewModel.entryUIState.entry.collectAsState(initial = emptyList())
 
     Column(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp, 0.dp),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         val items = (1..20).toList()