Odwzoruj listę kursów ze Stitch

app/build.gradle.kts

@@ -12,8 +12,8 @@ android {
         applicationId = "pl.firmatpp.kierowca"
         minSdk = 26
         targetSdk = 35
-        versionCode = 2
-        versionName = "1.0.1"
+        versionCode = 3
+        versionName = "1.0.2"
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
 
         buildConfigField("String", "API_BASE_URL", "\"https://api-intranet.firmatpp.pl/api/\"")

app/src/main/java/pl/firmatpp/kierowca/ui/DriverApp.kt

@@ -13,6 +13,7 @@ import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.PickVisualMediaRequest
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.background
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -27,6 +28,7 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -40,16 +42,21 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.AddPhotoAlternate
 import androidx.compose.material.icons.outlined.ArrowBack
 import androidx.compose.material.icons.outlined.CameraAlt
+import androidx.compose.material.icons.outlined.CalendarToday
 import androidx.compose.material.icons.outlined.LocalShipping
 import androidx.compose.material.icons.outlined.Logout
+import androidx.compose.material.icons.outlined.Menu
+import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material.icons.outlined.Phone
 import androidx.compose.material.icons.outlined.Refresh
+import androidx.compose.material.icons.outlined.TaskAlt
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -68,6 +75,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontFamily
@@ -83,6 +91,9 @@ import com.google.android.gms.auth.api.phone.SmsRetriever
 import com.google.android.gms.common.api.CommonStatusCodes
 import com.google.android.gms.common.api.Status
 import java.io.File
+import java.time.LocalDate
+import java.time.format.DateTimeFormatter
+import java.util.Locale
 import pl.firmatpp.kierowca.data.model.DriverRouteDto
 import pl.firmatpp.kierowca.data.model.RoutePhotoDto
 import pl.firmatpp.kierowca.domain.OtpCodeExtractor
@@ -177,30 +188,34 @@ private fun RoutesScreen(
     onLogout: () -> Unit,
 ) {
     Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Dzisiejsze kursy") },
-                actions = {
-                    IconButton(onClick = onRefresh) { Icon(Icons.Outlined.Refresh, contentDescription = "Odswiez") }
-                    IconButton(onClick = onLogout) { Icon(Icons.Outlined.Logout, contentDescription = "Wyloguj") }
-                },
-                colors = TopAppBarDefaults.topAppBarColors(containerColor = TppColors.Surface),
-            )
-        },
+        topBar = { StitchHeader(onRefresh = onRefresh, onLogout = onLogout) },
+        bottomBar = { StitchBottomBar(onRefresh = onRefresh, onLogout = onLogout) },
         containerColor = TppColors.Surface,
     ) { padding ->
         LazyColumn(
             Modifier.fillMaxSize().padding(padding),
-            contentPadding = PaddingValues(16.dp),
-            verticalArrangement = Arrangement.spacedBy(16.dp),
+            contentPadding = PaddingValues(start = 16.dp, top = 24.dp, end = 16.dp, bottom = 20.dp),
+            verticalArrangement = Arrangement.spacedBy(18.dp),
         ) {
             item {
-                Text("Kierowca: ${state.driver?.displayName.orEmpty()}", color = TppColors.Muted)
+                Row(
+                    Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        "Dzisiejsze Kursy",
+                        style = MaterialTheme.typography.headlineLarge,
+                        fontWeight = FontWeight.Bold,
+                        color = TppColors.Ink,
+                    )
+                    DateChip()
+                }
             }
             if (state.routes.isEmpty()) {
                 item { EmptyState("Brak kursow na dzisiaj") }
             } else {
-                items(state.routes, key = { it.id }) { route -> RouteCard(route, onRoute) }
+                items(state.routes, key = { it.id }) { route -> StitchRouteCard(route, onRoute) }
             }
             item { ErrorText(state.error) }
         }
@@ -208,25 +223,177 @@ private fun RoutesScreen(
 }
 
 @Composable
-private fun RouteCard(route: DriverRouteDto, onRoute: (String) -> Unit) {
+private fun StitchHeader(onRefresh: () -> Unit, onLogout: () -> Unit) {
+    Column(Modifier.fillMaxWidth().background(Color.White)) {
+        Row(
+            Modifier.fillMaxWidth().height(104.dp).padding(horizontal = 24.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            IconButton(onClick = onRefresh) {
+                Icon(Icons.Outlined.Menu, contentDescription = "Menu", tint = TppColors.Muted, modifier = Modifier.size(32.dp))
+            }
+            TppWordmark()
+            IconButton(onClick = onLogout) {
+                Icon(Icons.Outlined.Person, contentDescription = "Profil", tint = TppColors.Muted, modifier = Modifier.size(32.dp))
+            }
+        }
+        HorizontalDivider(color = TppColors.Outline.copy(alpha = 0.8f), thickness = 2.dp)
+    }
+}
+
+@Composable
+private fun TppWordmark() {
+    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+        Column(verticalArrangement = Arrangement.spacedBy(3.dp)) {
+            repeat(3) {
+                Box(Modifier.width(28.dp).height(4.dp).background(TppColors.Forest))
+            }
+        }
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Text("FIRMA", color = TppColors.LogoLeaf, fontFamily = FontFamily.Monospace, fontWeight = FontWeight.Bold)
+            Text("TPP", color = TppColors.Ink, style = MaterialTheme.typography.headlineLarge, fontWeight = FontWeight.Black)
+        }
+    }
+}
+
+@Composable
+private fun DateChip() {
+    val formatter = remember { DateTimeFormatter.ofPattern("d MMM", Locale("pl", "PL")) }
+    val label = remember { LocalDate.now().format(formatter).replace(".", "").replaceFirstChar { it.uppercase() } }
+    Row(
+        modifier = Modifier.background(TppColors.Panel, RoundedCornerShape(12.dp)).padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        Icon(Icons.Outlined.CalendarToday, contentDescription = null, tint = TppColors.Forest)
+        Text(label, fontFamily = FontFamily.Monospace, color = TppColors.Muted, fontWeight = FontWeight.SemiBold)
+    }
+}
+
+@Composable
+private fun StitchRouteCard(route: DriverRouteDto, onRoute: (String) -> Unit) {
     val display = RouteDisplayMapper.toCard(route)
+    val stripColor = routeStatusColor(route.status)
     Card(
-        modifier = Modifier.fillMaxWidth().clickable { onRoute(route.id) },
+        modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(containerColor = Color.White),
         shape = RoundedCornerShape(8.dp),
-        border = CardDefaults.outlinedCardBorder(),
+        border = BorderStroke(1.dp, TppColors.Outline),
     ) {
         Row(Modifier.fillMaxWidth().height(IntrinsicSize.Min)) {
-            Box(Modifier.fillMaxHeight().width(5.dp).background(TppColors.Forest))
-            Column(Modifier.padding(18.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
-                Text(display.time, fontFamily = FontFamily.Monospace, color = TppColors.Navy, fontWeight = FontWeight.Bold)
-                Text("${display.origin} -> ${display.destination}", style = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold)
-                Text(display.contractLabel, fontFamily = FontFamily.Monospace, color = TppColors.Muted)
-                Text(listOf(display.status, display.distanceLabel).filter { it.isNotBlank() }.joinToString(" / "), color = TppColors.Muted)
+            Box(
+                Modifier
+                    .fillMaxHeight()
+                    .width(8.dp)
+                    .background(stripColor, RoundedCornerShape(topStart = 8.dp, bottomStart = 8.dp)),
+            )
+            Column(Modifier.fillMaxWidth()) {
+                Column(Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp, bottom = 20.dp)) {
+                    Row(
+                        Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        StatusChip(route.status, stripColor)
+                        Text(
+                            "Kontrakt: #${display.contractLabel.trimStart('#')}",
+                            fontFamily = FontFamily.Monospace,
+                            color = TppColors.Ink,
+                            fontWeight = FontWeight.SemiBold,
+                        )
+                    }
+                    Spacer(Modifier.height(26.dp))
+                    RouteTimeline(display.origin, display.destination)
+                }
+                HorizontalDivider(color = TppColors.Outline.copy(alpha = 0.55f))
+                Button(
+                    onClick = { onRoute(route.id) },
+                    modifier = Modifier.fillMaxWidth().padding(16.dp).height(56.dp),
+                    colors = ButtonDefaults.buttonColors(containerColor = stripColor),
+                    shape = RoundedCornerShape(4.dp),
+                ) {
+                    Text("Szczegóły  →", fontFamily = FontFamily.Monospace, fontWeight = FontWeight.Bold)
                 }
             }
         }
     }
+}
+
+@Composable
+private fun StatusChip(status: String, color: Color) {
+    Text(
+        status.ifBlank { "NOWY" }.uppercase(Locale("pl", "PL")),
+        modifier = Modifier
+            .background(color.copy(alpha = 0.18f), RoundedCornerShape(3.dp))
+            .padding(horizontal = 14.dp, vertical = 8.dp),
+        color = color,
+        fontFamily = FontFamily.Monospace,
+        fontWeight = FontWeight.Bold,
+    )
+}
+
+@Composable
+private fun RouteTimeline(origin: String, destination: String) {
+    Row(horizontalArrangement = Arrangement.spacedBy(14.dp)) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Box(Modifier.size(18.dp).background(Color.White, RoundedCornerShape(50)).padding(3.dp)) {
+                Box(Modifier.fillMaxSize().background(TppColors.Forest, RoundedCornerShape(50)))
+            }
+            Box(Modifier.width(3.dp).height(64.dp).background(TppColors.Outline.copy(alpha = 0.8f)))
+            Box(Modifier.size(18.dp).background(TppColors.Navy, RoundedCornerShape(50)))
+        }
+        Column(verticalArrangement = Arrangement.spacedBy(30.dp)) {
+            Column {
+                Text("SKĄD", color = TppColors.Muted, fontFamily = FontFamily.Monospace, fontWeight = FontWeight.Bold)
+                Text(origin, style = MaterialTheme.typography.titleLarge, color = TppColors.Ink, fontWeight = FontWeight.Bold)
+            }
+            Column {
+                Text("DOKĄD", color = TppColors.Muted, fontFamily = FontFamily.Monospace, fontWeight = FontWeight.Bold)
+                Text(destination, style = MaterialTheme.typography.titleLarge, color = TppColors.Ink, fontWeight = FontWeight.Bold)
+            }
+        }
+    }
+}
+
+@Composable
+private fun StitchBottomBar(onRefresh: () -> Unit, onLogout: () -> Unit) {
+    Column(Modifier.fillMaxWidth().background(Color.White)) {
+        HorizontalDivider(color = TppColors.Outline.copy(alpha = 0.9f), thickness = 2.dp)
+        Row(
+            Modifier.fillMaxWidth().height(82.dp),
+            horizontalArrangement = Arrangement.SpaceEvenly,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            BottomNavItem("Zlecenia", Icons.Outlined.TaskAlt, active = true, onClick = onRefresh)
+            BottomNavItem("Trasy", Icons.Outlined.LocalShipping, active = false, onClick = onRefresh)
+            BottomNavItem("Profil", Icons.Outlined.Person, active = false, onClick = onLogout)
+        }
+    }
+}
+
+@Composable
+private fun BottomNavItem(label: String, icon: ImageVector, active: Boolean, onClick: () -> Unit) {
+    Column(
+        modifier = Modifier.heightIn(min = 64.dp).clickable(onClick = onClick).padding(horizontal = 18.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Icon(icon, contentDescription = label, tint = if (active) TppColors.Forest else TppColors.Muted)
+        Spacer(Modifier.height(6.dp))
+        Text(label, color = if (active) TppColors.Forest else TppColors.Muted, fontFamily = FontFamily.Monospace)
+    }
+}
+
+private fun routeStatusColor(status: String): Color {
+    val normalized = status.uppercase(Locale("pl", "PL"))
+    return when {
+        "NOW" in normalized -> TppColors.Navy
+        "ZAK" in normalized || "GOT" in normalized -> TppColors.Forest
+        "TRAK" in normalized || "START" in normalized -> Color(0xFFF5B800)
+        else -> TppColors.Forest
+    }
+}
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable