design: client details screen design

core/designsystem/src/main/java/com/mifos/core/designsystem/component/MifosCard.kt

@@ -0,0 +1,186 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
+package com.mifos.core.designsystem.component
+
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+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.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mifos.core.designsystem.R
+import com.mifos.core.designsystem.theme.Black
+import com.mifos.core.designsystem.theme.BlueSecondary
+import com.mifos.core.designsystem.theme.DarkGray
+import com.mifos.core.designsystem.theme.White
+
+@Composable
+fun MifosAccountExpendableCard(accountType: String) {
+
+    var expendableState by remember { mutableStateOf(false) }
+    val rotateState by animateFloatAsState(
+        targetValue = if (expendableState) 180f else 0f,
+        label = ""
+    )
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(8.dp)
+            .animateContentSize(
+                animationSpec = tween(
+                    durationMillis = 300,
+                    easing = LinearOutSlowInEasing
+                )
+            ),
+        shape = RoundedCornerShape(22.dp),
+        colors = CardDefaults.cardColors(BlueSecondary)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(10.dp),
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    modifier = Modifier
+                        .weight(1f)
+                        .padding(start = 8.dp),
+                    text = accountType,
+                    style = TextStyle(
+                        fontSize = 18.sp,
+                        fontWeight = FontWeight.Normal,
+                        fontStyle = FontStyle.Normal,
+                        fontFamily = FontFamily(Font(R.font.outfit_regular))
+                    ),
+                    color = Black,
+                    textAlign = TextAlign.Start
+                )
+                IconButton(
+                    modifier = Modifier
+                        .size(24.dp),
+                    onClick = { expendableState = !expendableState }) {
+                    Icon(
+                        modifier = Modifier.rotate(rotateState),
+                        imageVector = Icons.Default.KeyboardArrowDown, contentDescription = null
+                    )
+                }
+            }
+
+            if (expendableState) {
+
+                Spacer(modifier = Modifier.height(10.dp))
+                MifosAccountsLazyColumn()
+            }
+        }
+    }
+}
+
+
+@Composable
+fun MifosAccountsLazyColumn() {
+
+    val array = listOf("first", "second", "third", "fourth")
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(8.dp),
+        shape = RoundedCornerShape(22.dp),
+        colors = CardDefaults.cardColors(White)
+    ) {
+        LazyColumn(
+            modifier = Modifier
+                .height((array.size * 48).dp)
+                .padding(6.dp)
+        ) {
+            items(array) {
+                Row(
+                    modifier = Modifier.padding(5.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Canvas(modifier = Modifier
+                        .size(20.dp)
+                        .padding(4.dp), onDraw = {
+                        drawCircle(color = Color.Yellow)
+                    })
+                    Column(
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(start = 4.dp)
+                    ) {
+                        Text(
+                            text = "Office",
+                            style = TextStyle(
+                                fontSize = 16.sp,
+                                fontWeight = FontWeight.Normal,
+                                fontStyle = FontStyle.Normal,
+                                fontFamily = FontFamily(Font(R.font.outfit_regular))
+                            ),
+                            color = Black,
+                            textAlign = TextAlign.Start
+                        )
+                        Text(
+                            text = "Office Number",
+                            style = TextStyle(
+                                fontSize = 14.sp,
+                                fontWeight = FontWeight.Normal,
+                                fontStyle = FontStyle.Normal,
+                                fontFamily = FontFamily(Font(R.font.outfit_light))
+                            ),
+                            color = DarkGray,
+                            textAlign = TextAlign.Start
+                        )
+                    }
+                    Text(
+                        text = "0.0",
+                        style = TextStyle(
+                            fontSize = 16.sp,
+                            fontWeight = FontWeight.Normal,
+                            fontStyle = FontStyle.Normal,
+                            fontFamily = FontFamily(Font(R.font.outfit_regular))
+                        ),
+                        color = Black,
+                        textAlign = TextAlign.Start
+                    )
+                }
+            }
+        }
+    }
+}

core/designsystem/src/main/java/com/mifos/core/designsystem/component/MifosMenuDropdown.kt

@@ -0,0 +1,26 @@
+package com.mifos.core.designsystem.component
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mifos.core.designsystem.R
+
+@Composable
+fun MifosMenuDropDownItem(option: String, onClick: () -> Unit) {
+    DropdownMenuItem(text = {
+        Text(
+            modifier = Modifier.padding(6.dp),
+            text = option, style = TextStyle(
+                fontSize = 17.sp,
+                fontFamily = FontFamily(Font(R.font.outfit_regular))
+            )
+        )
+    }, onClick = { onClick() })
+}

core/designsystem/src/main/java/com/mifos/core/designsystem/component/MifosTextField.kt

@@ -0,0 +1,68 @@
+package com.mifos.core.designsystem.component
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+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.vector.ImageVector
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.mifos.core.designsystem.R
+import com.mifos.core.designsystem.theme.Black
+import com.mifos.core.designsystem.theme.DarkGray
+
+@Composable
+fun MifosClientDetailsText(icon: ImageVector, field: String, value: String) {
+
+    Row(
+        modifier = Modifier
+            .padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 8.dp)
+            .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            modifier = Modifier.size(18.dp),
+            imageVector = icon,
+            contentDescription = null,
+            tint = DarkGray
+        )
+        Text(
+            modifier = Modifier
+                .weight(1f)
+                .padding(start = 16.dp),
+            text = field,
+            style = TextStyle(
+                fontSize = 18.sp,
+                fontWeight = FontWeight.Normal,
+                fontStyle = FontStyle.Normal,
+                fontFamily = FontFamily(Font(R.font.outfit_regular))
+            ),
+            color = Black,
+            textAlign = TextAlign.Start
+        )
+        Text(
+
+            text = value,
+            style = TextStyle(
+                fontSize = 18.sp,
+                fontWeight = FontWeight.Normal,
+                fontStyle = FontStyle.Normal,
+                fontFamily = FontFamily(Font(R.font.outfit_regular))
+            ),
+            color = DarkGray,
+            textAlign = TextAlign.Start
+        )
+    }
+
+}