prepare billing page

app/src/main/java/eu/m724/vastapp/activity/dashboard/screen/Billing.kt

@@ -1,12 +1,70 @@
 package eu.m724.vastapp.activity.dashboard.screen
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
+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.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import eu.m724.vastapp.R
 import eu.m724.vastapp.activity.dashboard.DashboardViewModel
 
-class Billing {
-}
-
 @Composable
 fun BillingScreen(dashboardViewModel: DashboardViewModel) {
+    val uiState by dashboardViewModel.uiState.collectAsState()
+
+    val user by remember(uiState) { derivedStateOf { uiState.user } }
+
+    Column(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Spacer(
+            modifier = Modifier.height(30.dp)
+        )
+
+        Card(
+            modifier = Modifier.width(160.dp)
+        ) {
+            Row(
+                modifier = Modifier.padding(16.dp, 8.dp).height(IntrinsicSize.Min)
+            ) {
+                Icon(
+                    modifier = Modifier.fillMaxHeight().aspectRatio(1f),
+                    painter = painterResource(id = R.drawable.baseline_monetization_on_24),
+                    contentDescription = "Balance"
+                )
+                Spacer(modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+                )
+                Text(
+                    text = "$%.2f".format(user.credit),
+                    fontSize = 24.sp,
+                    color = balanceColor(user.credit, user.balanceThreshold)
+                )
+            }
+        }
+
+
 
+    }
 }