feat(home): add empty state and account creation flow

core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repository/UserAuthRepository.kt

@@ -11,18 +11,12 @@ package org.mifos.mobile.core.data.repository
 
 import org.mifos.mobile.core.common.DataState
 import org.mifos.mobile.core.model.entity.User
+import org.mifos.mobile.core.model.entity.register.RegisterPayload
 
 interface UserAuthRepository {
 
     suspend fun registerUser(
-        accountNumber: String?,
-        authenticationMode: String?,
-        email: String?,
-        firstName: String?,
-        lastName: String?,
-        mobileNumber: String?,
-        password: String?,
-        username: String?,
+        registerPayload: RegisterPayload,
     ): DataState<String>
 
     suspend fun login(username: String, password: String): DataState<User>

core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repositoryImpl/UserAuthRepositoryImp.kt

@@ -31,25 +31,8 @@ class UserAuthRepositoryImp(
 ) : UserAuthRepository {
 
     override suspend fun registerUser(
-        accountNumber: String?,
-        authenticationMode: String?,
-        email: String?,
-        firstName: String?,
-        lastName: String?,
-        mobileNumber: String?,
-        password: String?,
-        username: String?,
+        registerPayload: RegisterPayload,
     ): DataState<String> {
-        val registerPayload = RegisterPayload(
-            accountNumber = accountNumber,
-            authenticationMode = authenticationMode,
-            email = email,
-            firstName = firstName,
-            lastName = lastName,
-            mobileNumber = mobileNumber,
-            password = password,
-            username = username,
-        )
         return withContext(ioDispatcher) {
             try {
                 val response = dataManager.registrationApi.registerUser(registerPayload)

core/designsystem/src/commonMain/kotlin/org/mifos/mobile/core/designsystem/icon/MifosIcons.kt

@@ -54,7 +54,10 @@ import androidx.compose.material.icons.rounded.Home
 import androidx.compose.material.icons.rounded.SwapHoriz
 import androidx.compose.ui.graphics.vector.ImageVector
 import fluent.ui.system.icons.FluentIcons
+import fluent.ui.system.icons.colored.AddCircle
 import fluent.ui.system.icons.colored.Alert
+import fluent.ui.system.icons.colored.CoinMultiple
+import fluent.ui.system.icons.colored.Savings
 import fluent.ui.system.icons.colored.Warning
 import fluent.ui.system.icons.filled.AppRecent
 import fluent.ui.system.icons.filled.ArchiveSettings
@@ -192,7 +195,9 @@ object MifosIcons {
     val SearchNew = FluentIcons.Regular.Search
 
     val SavingsAccount = FluentIcons.Filled.Wallet
+    val SavingsAccountColor = FluentIcons.Colored.Savings
     val LoanAccount = FluentIcons.Filled.CoinMultiple
+    val LoanAccountColor = FluentIcons.Colored.CoinMultiple
     val ShareAccount = FluentIcons.Filled.DataWhisker
     val ApplyForLoan = FluentIcons.Filled.Receipt
     val ApplyForSavings = FluentIcons.Filled.Savings
@@ -255,4 +260,6 @@ object MifosIcons {
     val Signature = FluentIcons.Regular.DrawShape
     val Camera = FluentIcons.Regular.Camera
     val Attach = FluentIcons.Regular.Attach
+
+    val AddColor = FluentIcons.Colored.AddCircle
 }

core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/entity/register/RegisterPayload.kt

@@ -18,6 +18,8 @@ data class RegisterPayload(
 
     val firstName: String? = null,
 
+    val middleName: String? = null,
+
     val lastName: String? = null,
 
     val email: String? = null,

core/ui/src/commonMain/composeResources/values/strings.xml

@@ -120,6 +120,11 @@
     <string name="pay_from">Pay from</string>
     <string name="available_balance_formatted">Available Balance - %1$s</string>
 
+    <string name="feature_dashboard_welcome_back">Welcome back to Mifos</string>
+    <string name="feature_dashboard_no_accounts_title">No Accounts Yet</string>
+    <string name="feature_dashboard_no_accounts_description">Start your financial journey by opening your first account with us.</string>
+    <string name="feature_dashboard_open_account">Open Account</string>
+
     <string name="feature_savings_filter">Filters</string>
     <string name="feature_savings_reset">Reset</string>
     <string name="feature_savings_apply">Apply</string>

core/ui/src/commonMain/kotlin/org/mifos/mobile/core/ui/component/MifosDashboardCard.kt

@@ -16,6 +16,8 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -24,25 +26,35 @@ 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.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import mifos_mobile.core.ui.generated.resources.Res
+import mifos_mobile.core.ui.generated.resources.feature_dashboard_no_accounts_description
+import mifos_mobile.core.ui.generated.resources.feature_dashboard_no_accounts_title
+import mifos_mobile.core.ui.generated.resources.feature_dashboard_open_account
 import mifos_mobile.core.ui.generated.resources.ic_icon_dashboard
 import mifos_mobile.core.ui.generated.resources.powered_by
 import org.jetbrains.compose.resources.StringResource
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.mifos.mobile.core.designsystem.component.CardVariant
 import org.mifos.mobile.core.designsystem.component.MifosButton
+import org.mifos.mobile.core.designsystem.component.MifosCustomCard
 import org.mifos.mobile.core.designsystem.icon.MifosIcons
 import org.mifos.mobile.core.designsystem.theme.AppColors
 import org.mifos.mobile.core.designsystem.theme.DesignToken
@@ -54,8 +66,6 @@ import org.mifos.mobile.core.designsystem.theme.MifosTypography
 fun MifosDashboardCard(
     isVisible: Boolean,
     modifier: Modifier = Modifier,
-    isLoanApplied: Boolean = true,
-    onLoanApplyClick: () -> Unit = {},
     isSingleLine: Boolean = false,
     loanAccount: StringResource? = null,
     loanAmount: String? = null,
@@ -77,95 +87,147 @@ fun MifosDashboardCard(
             contentDescription = null,
             contentScale = ContentScale.Crop,
         )
-        if (isLoanApplied) {
-            Row(
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(DesignToken.padding.small),
+            horizontalArrangement = Arrangement.spacedBy(
+                DesignToken.spacing.medium,
+                Alignment.End,
+            ),
+        ) {
+            Column(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(DesignToken.padding.small),
-                horizontalArrangement = Arrangement.spacedBy(
-                    DesignToken.spacing.medium,
-                    Alignment.End,
-                ),
+                    .fillMaxSize()
+                    .padding(DesignToken.padding.medium),
+                verticalArrangement = Arrangement.SpaceBetween,
             ) {
-                Column(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .padding(DesignToken.padding.medium),
-                    verticalArrangement = Arrangement.SpaceBetween,
-                ) {
-                    if (loanAccount != null) {
-                        Column {
-                            Text(
-                                text = stringResource(loanAccount),
-                                style = MifosTypography.bodySmall,
+                if (loanAccount != null) {
+                    Column {
+                        Text(
+                            text = stringResource(loanAccount),
+                            style = MifosTypography.bodySmall,
 //                            color = MaterialTheme.colorScheme.secondary.copy(alpha = 0.7f),
-                                color = AppColors.customWhite.copy(alpha = 0.5f),
+                            color = AppColors.customWhite.copy(alpha = 0.5f),
+                        )
+                        AnimatedContent(
+                            targetState = isVisible,
+                            transitionSpec = {
+                                fadeIn(tween(300)) togetherWith fadeOut(tween(300))
+                            },
+                            label = "Loan Amount Animation",
+                        ) { visible ->
+                            Text(
+                                text = if (visible) "$loanAmount" else "$currency •••••••••",
+                                style = MifosTypography.titleMediumEmphasized,
+                                color = AppColors.customWhite,
                             )
-                            AnimatedContent(
-                                targetState = isVisible,
-                                transitionSpec = {
-                                    fadeIn(tween(300)) togetherWith fadeOut(tween(300))
-                                },
-                                label = "Loan Amount Animation",
-                            ) { visible ->
-                                Text(
-                                    text = if (visible) "$loanAmount" else "$currency •••••••••",
-                                    style = MifosTypography.titleMediumEmphasized,
-                                    color = AppColors.customWhite,
-                                )
-                            }
                         }
                     }
+                }
 
-                    if (savingsAccount != null) {
-                        Column {
-                            Text(
-                                text = stringResource(savingsAccount),
-                                style = MifosTypography.bodySmall,
+                if (savingsAccount != null) {
+                    Column {
+                        Text(
+                            text = stringResource(savingsAccount),
+                            style = MifosTypography.bodySmall,
 //                            color = MaterialTheme.colorScheme.secondary,
-                                color = AppColors.customWhite.copy(alpha = 0.5f),
+                            color = AppColors.customWhite.copy(alpha = 0.5f),
+                        )
+                        AnimatedContent(
+                            targetState = isVisible,
+                            transitionSpec = {
+                                fadeIn(tween(300)) togetherWith fadeOut(tween(300))
+                            },
+                            label = "Savings Amount Animation",
+                        ) { visible ->
+                            Text(
+                                text = if (visible) "$savingsAmount" else "$currency •••••••••",
+                                style = MifosTypography.titleMediumEmphasized,
+                                color = AppColors.customWhite,
                             )
-                            AnimatedContent(
-                                targetState = isVisible,
-                                transitionSpec = {
-                                    fadeIn(tween(300)) togetherWith fadeOut(tween(300))
-                                },
-                                label = "Savings Amount Animation",
-                            ) { visible ->
-                                Text(
-                                    text = if (visible) "$savingsAmount" else "$currency •••••••••",
-                                    style = MifosTypography.titleMediumEmphasized,
-                                    color = AppColors.customWhite,
-                                )
-                            }
                         }
                     }
                 }
             }
+        }
 
-            IconButton(
-                onClick = onVisibilityToggle,
-                modifier = Modifier
-                    .align(Alignment.BottomEnd)
-                    .padding(12.dp),
-            ) {
-                Icon(
-                    imageVector = if (isVisible) MifosIcons.Eye else MifosIcons.EyeOff,
-                    contentDescription = "Toggle Visibility",
-                    tint = Color.White,
+        IconButton(
+            onClick = onVisibilityToggle,
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(12.dp),
+        ) {
+            Icon(
+                imageVector = if (isVisible) MifosIcons.Eye else MifosIcons.EyeOff,
+                contentDescription = "Toggle Visibility",
+                tint = Color.White,
+            )
+        }
+    }
+}
+
+@Composable
+fun MifosAccountApplyDashboard(
+    onOpenAccountClick: () -> Unit,
+) {
+    MifosCustomCard(
+        modifier = Modifier
+            .padding(horizontal = DesignToken.padding.largeIncreased)
+            .border(
+                0.5.dp,
+                MaterialTheme.colorScheme.primary,
+                DesignToken.shapes.medium,
+            ),
+        variant = CardVariant.OUTLINED,
+        enabled = false,
+        onClick = onOpenAccountClick,
+        colors = CardDefaults.cardColors(
+            containerColor = Color.Transparent,
+            contentColor = MaterialTheme.colorScheme.onSurface,
+        ),
+    ) {
+        Column(
+            modifier = Modifier
+                .background(
+                    MaterialTheme.colorScheme.onSurface.copy(alpha = 0.01f),
                 )
-            }
-        } else {
+                .fillMaxWidth()
+                .padding(DesignToken.padding.extraLarge),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(DesignToken.spacing.medium),
+        ) {
+            Icon(
+                imageVector = MifosIcons.AddColor,
+                contentDescription = null,
+                tint = Color.Unspecified,
+                modifier = Modifier.size(DesignToken.sizes.iconExtraLarge),
+            )
+
+            Text(
+                text = stringResource(Res.string.feature_dashboard_no_accounts_title),
+                style = MifosTypography.titleMediumEmphasized,
+                color = MaterialTheme.colorScheme.onSurface,
+                textAlign = TextAlign.Center,
+            )
+
+            Text(
+                text = stringResource(Res.string.feature_dashboard_no_accounts_description),
+                style = MifosTypography.bodySmall,
+                color = MaterialTheme.colorScheme.secondary,
+                textAlign = TextAlign.Center,
+            )
+
             MifosButton(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .height(DesignToken.sizes.buttonHeight)
-                    .align(Alignment.Center),
-                onClick = onLoanApplyClick,
-                content = {
+                    .wrapContentWidth()
+                    .height(DesignToken.sizes.avatarMedium),
+                onClick = onOpenAccountClick,
+                shape = DesignToken.shapes.circle,
+                text = {
                     Text(
-                        text = "Apply Loan",
-                        style = MifosTypography.titleMedium,
+                        text = stringResource(Res.string.feature_dashboard_open_account),
+                        style = MifosTypography.titleSmallEmphasized,
                     )
                 },
             )
@@ -219,9 +281,8 @@ private fun MifosDashboardCard() {
                 onVisibilityToggle = {},
             )
 
-            MifosDashboardCard(
-                isLoanApplied = false,
-                isVisible = true,
+            MifosAccountApplyDashboard(
+                onOpenAccountClick = {},
             )
         }
     }