Student Profile - TecNM Control Escolar

The Student Profile Screen displays comprehensive student information, including personal details, academic statistics, current enrollment, and a quick view of today’s classes.

Overview

Built with Jetpack Compose, the Profile Screen serves as a student information hub with visual stat cards, career information, and class previews. The design emphasizes key academic metrics like semester and GPA.

Data Model

The profile uses the Student data class:

Student.kt

data class Student(
    val id: Int,
    val controlNumber: String,
    val name: String,
    val career: String,
    val semester: Int,
    val average: Double
)

Sample Student Data

FakeData.kt

val student = Student(
    id = 1,
    controlNumber = "226W0487",
    name = "Arlyn Alfaro",
    career = "Ingeniería en Sistemas Computacionales",
    semester = 8,
    average = 92.5
)

UI Components

ProfileHeader

A prominent header with student avatar and edit button:

ProfileScreen.kt:142-198

@Composable
fun ProfileHeader() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(
                color = TecBlue,
                shape = RoundedCornerShape(bottomStart = 36.dp, bottomEnd = 36.dp)
            )
            .padding(top = 30.dp, bottom = 28.dp, start = 20.dp, end = 20.dp)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(
                text = "MY PROFILE",
                color = Color.White,
                style = MaterialTheme.typography.titleLarge,
                fontWeight = FontWeight.Bold
            )

            Spacer(modifier = Modifier.height(24.dp))

            Box(
                contentAlignment = Alignment.BottomEnd
            ) {
                Box(
                    modifier = Modifier
                        .size(120.dp)
                        .background(Color.White, CircleShape),
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        imageVector = Icons.Default.Person,
                        contentDescription = "Avatar",
                        tint = TecBlue,
                        modifier = Modifier.size(64.dp)
                    )
                }

                Box(
                    modifier = Modifier
                        .size(38.dp)
                        .background(TecGold, RoundedCornerShape(14.dp)),
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        imageVector = Icons.Outlined.Edit,
                        contentDescription = "Editar",
                        tint = TecBlue,
                        modifier = Modifier.size(20.dp)
                    )
                }
            }
        }
    }
}

Features:

TecBlue background with large rounded bottom corners (36dp)
“MY PROFILE” title
Large circular avatar (120dp) with person icon
Edit button in bottom-right corner with TecGold background

Control Number Display

The student control number is displayed prominently below the header:

ProfileScreen.kt:62-67

Text(
    text = student.controlNumber,
    style = MaterialTheme.typography.titleMedium,
    color = Color(0xFF94A3B8),
    fontWeight = FontWeight.Medium
)

StatCard

Dual-purpose cards for displaying academic statistics:

ProfileScreen.kt:201-254

@Composable
fun StatCard(
    modifier: Modifier = Modifier,
    title: String,
    subtitle: String,
    iconColor: Color,
    backgroundColor: Color,
    textColor: Color = Color(0xFF0F172A)
) {
    Card(
        modifier = modifier.height(170.dp),
        shape = RoundedCornerShape(28.dp),
        colors = CardDefaults.cardColors(containerColor = backgroundColor),
        elevation = CardDefaults.cardElevation(defaultElevation = 5.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp),
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Box(
                modifier = Modifier
                    .size(52.dp)
                    .background(
                        if (backgroundColor == TecBlue) Color.White.copy(alpha = 0.10f)
                        else Color(0xFFF1F5F9),
                        RoundedCornerShape(16.dp)
                    ),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = if (subtitle == "SEMESTER") Icons.Outlined.School else Icons.Outlined.TrendingUp,
                    contentDescription = null,
                    tint = iconColor
                )
            }

            Column {
                Text(
                    text = title,
                    style = MaterialTheme.typography.headlineLarge,
                    fontWeight = FontWeight.Bold,
                    color = textColor
                )
                Text(
                    text = subtitle,
                    style = MaterialTheme.typography.titleMedium,
                    fontWeight = FontWeight.SemiBold,
                    color = if (backgroundColor == TecBlue) Color.White.copy(alpha = 0.85f) else Color(0xFF475569)
                )
            }
        }
    }
}

Two stat cards are displayed side-by-side:

Semester Card (Left)

ProfileScreen.kt:75-81

StatCard(
    modifier = Modifier.weight(1f),
    title = "${student.semester}",
    subtitle = "SEMESTER",
    iconColor = TecBlue,
    backgroundColor = Color.White
)

White background
School icon in TecBlue
Displays current semester number (e.g., “8”)

Average Grade Card (Right)

ProfileScreen.kt:83-90

StatCard(
    modifier = Modifier.weight(1f),
    title = "${student.average}",
    subtitle = "AVERAGE GRADE",
    iconColor = TecGold,
    backgroundColor = TecBlue,
    textColor = Color.White
)

TecBlue background
TrendingUp icon in TecGold
Displays GPA/average (e.g., “92.5”)
White text for contrast

CareerCard

A prominent card displaying the student’s academic program:

ProfileScreen.kt:257-306

@Composable
fun CareerCard(career: String) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(26.dp),
        colors = CardDefaults.cardColors(containerColor = Color.White),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(18.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(58.dp)
                    .background(Color(0xFFFFF3E8), CircleShape),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Outlined.Computer,
                    contentDescription = "Carrera",
                    tint = Color(0xFFFF7A00)
                )
            }

            Spacer(modifier = Modifier.width(16.dp))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = career,
                    style = MaterialTheme.typography.headlineSmall,
                    fontWeight = FontWeight.Bold,
                    color = Color(0xFF0F172A)
                )
                Text(
                    text = "Computing Systems Engineering",
                    style = MaterialTheme.typography.titleMedium,
                    color = Color(0xFF64748B)
                )
            }

            Icon(
                imageVector = Icons.Outlined.ChevronRight,
                contentDescription = "Ver",
                tint = Color(0xFF94A3B8)
            )
        }
    }
}

Features:

Computer icon in orange circular background
Career name in Spanish (e.g., “Ingeniería en Sistemas Computacionales”)
English translation below (“Computing Systems Engineering”)
Chevron right icon indicating it’s tappable

TodayClassCard

Mini class cards showing today’s schedule:

ProfileScreen.kt:309-374

@Composable
fun TodayClassCard(
    hour: String,
    subject: String,
    classroom: String,
    active: Boolean
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(22.dp),
        colors = CardDefaults.cardColors(containerColor = Color.White),
        elevation = CardDefaults.cardElevation(defaultElevation = 3.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(18.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(
                modifier = Modifier.width(88.dp)
            ) {
                Text(
                    text = hour,
                    style = MaterialTheme.typography.titleMedium,
                    fontWeight = FontWeight.Bold,
                    color = Color(0xFF94A3B8)
                )
            }

            Box(
                modifier = Modifier
                    .width(1.dp)
                    .height(42.dp)
                    .background(Color(0xFFE2E8F0))
            )

            Spacer(modifier = Modifier.width(16.dp))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = subject,
                    style = MaterialTheme.typography.titleLarge,
                    fontWeight = FontWeight.Bold,
                    color = if (active) Color(0xFF0F172A) else Color(0xFF6B7280)
                )

                Spacer(modifier = Modifier.height(4.dp))

                Text(
                    text = classroom,
                    style = MaterialTheme.typography.bodyLarge,
                    color = Color(0xFF64748B)
                )
            }

            Box(
                modifier = Modifier
                    .size(12.dp)
                    .background(
                        if (active) Color(0xFF22C55E) else Color(0xFFE5E7EB),
                        CircleShape
                    )
            )
        }
    }
}

Each class card displays:

Time: Start hour in gray on the left (e.g., “07:00 AM”)
Divider: Vertical line separating time from content
Subject: Class name in bold
Classroom: Room location below subject
Status indicator: Circular dot on the right
- Green (active) for current class
- Gray (inactive) for upcoming classes

Screen Layout

ProfileScreen.kt:51-138

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(innerPadding)
        .verticalScroll(rememberScrollState())
) {
    ProfileHeader()

    Column(
        modifier = Modifier.padding(20.dp)
    ) {
        Text(
            text = student.controlNumber,
            style = MaterialTheme.typography.titleMedium,
            color = Color(0xFF94A3B8),
            fontWeight = FontWeight.Medium
        )

        Spacer(modifier = Modifier.height(20.dp))

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(14.dp)
        ) {
            StatCard(...) // Semester
            StatCard(...) // Average Grade
        }

        Spacer(modifier = Modifier.height(18.dp))

        CareerCard(career = student.career)
        
        Spacer(modifier = Modifier.height(30.dp))

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = "Today's Classes",
                style = MaterialTheme.typography.headlineSmall,
                fontWeight = FontWeight.Bold,
                color = Color(0xFF0F172A)
            )

            Text(
                text = "View Schedule",
                color = TecBlue,
                fontWeight = FontWeight.SemiBold
            )
        }

        Spacer(modifier = Modifier.height(16.dp))

        TodayClassCard(
            hour = "07:00 AM",
            subject = "Data Structures",
            classroom = "Lab 3",
            active = true
        )

        Spacer(modifier = Modifier.height(14.dp))

        TodayClassCard(
            hour = "09:00 AM",
            subject = "Calculus III",
            classroom = "Room 204",
            active = false
        )

        Spacer(modifier = Modifier.height(90.dp))
    }
}

Information Hierarchy

The profile screen presents information in a clear hierarchy:

Header: Profile title and avatar with edit button
Control Number: Student identification
Statistics: Two side-by-side cards for semester and GPA
Career: Full-width card with program information
Today’s Classes: Section header with “View Schedule” link
Class List: Mini cards for current and upcoming classes

Design Features

Visual Statistics

Large stat cards with icons make key metrics (semester, GPA) immediately visible and easy to understand.

Status Indicators

Green and gray dots clearly distinguish active classes from upcoming ones in today’s schedule.

Editable Profile

Gold edit button in the header suggests that profile information can be updated (future functionality).

Quick Navigation

“View Schedule” link and chevron on career card provide quick navigation to related screens.

Key Information Display

The profile prominently displays:

Student Name: Currently shown in HomeHeader (“Hola, Arlyn”)
Control Number: Unique student identifier (e.g., “226W0487”)
Semester: Current semester number with school icon
GPA: Academic average with trending icon
Career: Full program name in Spanish and English
Today’s Classes: Quick preview with active status

Color Scheme

TecBlue

Primary color for headers, icons, and the GPA card background

TecGold

Accent color for the edit button and GPA icon

White & Gray

White cards on light gray background for clean, modern appearance

Current Implementation

The profile currently includes:

Static student data from FakeData.student
Non-functional edit button (UI only)
Static today’s classes (no dynamic filtering)
“View Schedule” text link (no navigation)
Career card chevron (no detail view)

Future Enhancements

Profile Editing

Enable the edit button to allow students to update personal information and preferences.

Photo Upload

Replace the default icon with a photo upload feature for custom profile pictures.

Academic History

Show semester-by-semester grade history and academic progress over time.

Interactive Links

Make “View Schedule” and career card tappable to navigate to related screens.

Home Screen

The home screen displays the student name in the header greeting

Schedule

View complete class schedule with all sessions

Documentation Index

​Overview

​Data Model

​Sample Student Data

​UI Components

​ProfileHeader

​Control Number Display

​StatCard

​Semester Card (Left)

​Average Grade Card (Right)

​CareerCard

​TodayClassCard

​Screen Layout

​Information Hierarchy

​Design Features