feat(app): create SchoolSupplyCard view

app/src/main/kotlin/com/intelligentbackpack/app/ui/common/SchoolSupplyCard.kt

@@ -0,0 +1,68 @@
+package com.intelligentbackpack.app.ui.common
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Card
+import androidx.compose.material3.Divider
+import androidx.compose.material3.ExperimentalMaterial3Api
+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.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.intelligentbackpack.app.ui.navigation.MainNavigation
+import com.intelligentbackpack.app.viewdata.BookView
+import com.intelligentbackpack.app.viewdata.SchoolSupplyView
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SchoolSupplyCard(
+    navHostController: NavHostController,
+    schoolSupply: SchoolSupplyView,
+    modifier: Modifier = Modifier
+) {
+    Card(
+        modifier = modifier,
+        onClick = {
+            navHostController.navigate(MainNavigation.schoolSupply(schoolSupply.rfidCode))
+        }
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth(0.9f)
+                .padding(8.dp),
+            horizontalAlignment = Alignment.Start
+        ) {
+            Text(text = schoolSupply.type)
+            Divider(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                thickness = 1.dp, color = Color.Black
+            )
+            schoolSupply.book?.let { BookDetails(it) }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun SchoolSupplyCardPreview() {
+    SchoolSupplyCard(
+        navHostController = rememberNavController(),
+        schoolSupply = SchoolSupplyView(
+            rfidCode = "1234567890",
+            type = "Book",
+            book = BookView(
+                title = "The Intelligent Backpack",
+                authors = setOf("John Doe"),
+                isbn = "1234567890",
+            )
+        ),
+        Modifier.fillMaxWidth(0.9f),
+    )
+}

app/src/main/kotlin/com/intelligentbackpack/app/view/SchoolSupplies.kt

@@ -1,39 +1,61 @@
 package com.intelligentbackpack.app.view
 
+import android.widget.Toast
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
+import com.intelligentbackpack.app.ui.common.SchoolSupplyCard
 import com.intelligentbackpack.app.ui.navigation.MainNavigation
+import com.intelligentbackpack.app.viewmodel.SchoolSupplyViewModel
 
 @Composable
 fun SchoolSupplies(
     navController: NavHostController,
+    schoolSupplyViewModel: SchoolSupplyViewModel = viewModel(
+        factory = SchoolSupplyViewModel.Factory,
+    )
 ) {
-    Box(modifier = Modifier.fillMaxSize()) {
+    val context = LocalContext.current
+    val schoolSupplies = schoolSupplyViewModel.schoolSupplies.observeAsState(emptySet())
+    schoolSupplyViewModel.getSchoolSupplies {
+        Toast.makeText(context, it, Toast.LENGTH_SHORT).show()
+    }
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(vertical = 16.dp, horizontal = 0.dp)
+    ) {
         LazyColumn(
             modifier = Modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.Top)
         ) {
-            item {
-                Box(modifier = Modifier.fillMaxWidth()) {
-                    Text(text = "School Supplies")
-                }
+            items(schoolSupplies.value.toList()) {
+                SchoolSupplyCard(
+                    navHostController = navController,
+                    schoolSupply = it,
+                    modifier = Modifier.fillMaxSize(0.9f)
+                )
             }
         }
         FloatingActionButton(