add ui

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

@@ -1,38 +1,63 @@
 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
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.DateRange
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 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
+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.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
 
 // region Header Card
 @Composable
@@ -247,3 +272,61 @@ private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: (
         }
     }
 }
+
+
+
+
+
+
+@Composable
+fun DatePicker(
+    onDateSelected: (LocalDate) -> Unit,
+    onDismiss: () -> Unit
+) {
+    var selectedDate by remember { mutableStateOf(LocalDate.now()) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        DatePickerDialog(
+            onDateSelected = { date ->
+                selectedDate = date
+            },
+            onDismiss = onDismiss
+        )
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 16.dp),
+            horizontalArrangement = Arrangement.End
+        ) {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
+            }
+            Spacer(modifier = Modifier.width(8.dp))
+            TextButton(onClick = { onDateSelected(selectedDate) }) {
+                Text("OK")
+            }
+        }
+    }
+}
+
+@Composable
+fun DatePickerDialog(
+    onDateSelected: (LocalDate) -> Unit,
+    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()
+    )
+}

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

@@ -4,8 +4,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3Api
+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
@@ -15,20 +20,73 @@ 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.home.HomeViewModel
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun Add(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit, HomeViewModel : HomeViewModel = viewModel(factory = AppViewModelProvider.Factory)) {
     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)
     ) {
         OutlinedTextField(
             value = spending,
             onValueChange = { spending = it },
             label = { Text("Spending") },
-            modifier = Modifier.fillMaxWidth().padding(16.dp)
+            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,
+                onValueChange = {},
+                label = { Text("Category") },
+                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
+                        }
+                    )
+                }
+            }
+        }
+
+        DatePicker(onDateSelected = { date -> println("Selected date in milliseconds: $date") }, onDismiss = { println("Dismissed") })
     }
 }