331 lines
11 KiB
Markdown
331 lines
11 KiB
Markdown
# 📱 UI Mockup Implementation Guide
|
|
|
|
## 🎯 Objective
|
|
|
|
Implementasikan tampilan app sesuai dengan mockup yang diberikan, dengan 4 halaman utama:
|
|
1. Login Screen
|
|
2. Menu Absensi
|
|
3. Absen Kehadiran
|
|
4. Absensi Berhasil
|
|
|
|
## 📸 Mockup Reference
|
|
|
|
```
|
|
┌─────────────────────────┬─────────────────────────┬─────────────────────────┬─────────────────────────┐
|
|
│ LOGIN SCREEN │ MENU ABSENSI │ ABSEN KEHADIRAN │ ABSENSI BERHASIL! │
|
|
├─────────────────────────┼─────────────────────────┼─────────────────────────┼─────────────────────────┤
|
|
│ │ │ │ │
|
|
│ 🎓 │ Menu Absensi X │ ← Absen Kehadiran │ ✅ Absensi Berhasil! │
|
|
│ │ │ │ │
|
|
│ Absensi Akademik │ Selamat Datang, Budi! │ Cek Lokasi: Dalam │ ✓ Lokasi Tervalidasi │
|
|
│ │ │ Area Absensi ✓ │ ✓ Foto Terekam │
|
|
│ Universitas Bhakti │ ┌─────────────────┐ │ │ │
|
|
│ Rajayal │ │ 📅 Jadwal Kuliah│ │ [Lat: -6.8955] │ Waktu: 09:15 WIB │
|
|
│ │ └─────────────────┘ │ [Lon: 107.6105] │ Berhasil tercatat! │
|
|
│ [Email Field] │ │ [Jarak: 85.2m] │ │
|
|
│ [Password Field] │ ┌─────────────────┐ │ │ [LIHAT RIWAYAT] │
|
|
│ │ │ 📋 Riwayat │ │ [Perbarui Lokasi] │ │
|
|
│ │ │ Absensi │ │ │ │
|
|
│ [LOGIN Button] │ └─────────────────┘ │ Mata Kuliah │ │
|
|
│ │ │ [Input Field] │ │
|
|
│ │ [MULAI ABSENSI Button] │ │ │
|
|
│ │ │ Ambil Foto Selfie ✓ │ │
|
|
│ │ │ [AMBIL FOTO Button] │ │
|
|
│ │ │ │ │
|
|
│ │ │ [KIRIM ABSENSI Button] │ │
|
|
│ │ │ │ │
|
|
└─────────────────────────┴─────────────────────────┴─────────────────────────┴─────────────────────────┘
|
|
```
|
|
|
|
## ✅ Implementation Status
|
|
|
|
### Screen 1: Login Screen ✅
|
|
**File**: `LoginScreen.kt`
|
|
|
|
**Features Implemented**:
|
|
- [x] Green background (#2E7D32)
|
|
- [x] Graduation cap emoji (🎓) as header
|
|
- [x] Email input field with envelope icon
|
|
- [x] Password input field with lock icon
|
|
- [x] White LOGIN button with green text
|
|
- [x] "Forgot Password?" link
|
|
- [x] Error message display
|
|
|
|
**Design Specifications**:
|
|
```kotlin
|
|
Background Color: #2E7D32 (Green)
|
|
Button Color: White (#FFFFFF)
|
|
Button Text Color: #2E7D32
|
|
Input Border Color: White with alpha 0.5
|
|
Text Color: White
|
|
Font: Material Typography
|
|
```
|
|
|
|
### Screen 2: Menu Absensi ✅ NEW
|
|
**File**: `MenuScreen.kt`
|
|
|
|
**Features Implemented**:
|
|
- [x] Green top bar with white text
|
|
- [x] Logout (X) button in top-right
|
|
- [x] Greeting message "Selamat Datang, Budi!"
|
|
- [x] Jadwal Kuliah menu card
|
|
- [x] Riwayat Absensi menu card
|
|
- [x] Main button "MULAI ABSENSI" (white with green text)
|
|
- [x] Menu cards with icons and descriptions
|
|
- [x] Card styling with border radius
|
|
|
|
**Design Specifications**:
|
|
```kotlin
|
|
TopBar Color: #2E7D32
|
|
Card Background: White with 10% alpha (#2E7D32)
|
|
Button Color: White
|
|
Button Text Color: #2E7D32
|
|
Card Border Radius: 12dp
|
|
Icon Size: 32sp emoji style
|
|
```
|
|
|
|
### Screen 3: Absen Kehadiran ✅ UPDATED
|
|
**File**: `AttendanceScreen.kt`
|
|
|
|
**Features Implemented**:
|
|
- [x] Green top bar with back button and settings
|
|
- [x] Title "Absen Kehadiran"
|
|
- [x] User info card (nama, NPM)
|
|
- [x] Location section with status indicator (✓/✗)
|
|
- [x] Location coordinates display
|
|
- [x] Update location button
|
|
- [x] Mata Kuliah input field (NEW)
|
|
- [x] Photo capture section with status
|
|
- [x] Take photo button
|
|
- [x] Submit button "KIRIM ABSENSI" (green)
|
|
- [x] Card styling with light green background
|
|
- [x] Validation before submit
|
|
|
|
**Design Specifications**:
|
|
```kotlin
|
|
TopBar Color: #2E7D32
|
|
Card Background: #2E7D32 with 10% alpha
|
|
Button Color: #2E7D32
|
|
Button Text Color: White
|
|
Input Field Height: 40dp (compact)
|
|
Card Border Radius: 8dp
|
|
Icon Sizes: 20-24dp
|
|
```
|
|
|
|
### Screen 4: Absensi Berhasil! ✅ NEW
|
|
**File**: `SuccessScreen.kt`
|
|
|
|
**Features Implemented**:
|
|
- [x] Green background
|
|
- [x] Large checkmark icon in white circle
|
|
- [x] Title "Absensi Berhasil!"
|
|
- [x] Success indicators:
|
|
- ✓ Lokasi Tervalidasi
|
|
- ✓ Foto Terekam
|
|
- [x] Time display (09:15 WIB)
|
|
- [x] Status text "Berhasil tercatat!"
|
|
- [x] "LIHAT RIWAYAT" button (white with green text)
|
|
|
|
**Design Specifications**:
|
|
```kotlin
|
|
Background Color: #2E7D32
|
|
Icon Circle Color: White
|
|
Checkmark Color: #4CAF50 (Success Green)
|
|
Card Background: White with 10% alpha
|
|
Button Color: White
|
|
Button Text Color: #2E7D32
|
|
Circle Size: 120dp
|
|
Checkmark Size: 80dp
|
|
```
|
|
|
|
## 🎨 Color Palette
|
|
|
|
| Color Name | Hex Code | Usage |
|
|
|-----------|----------|-------|
|
|
| Primary Green | #2E7D32 | Top bar, buttons, backgrounds |
|
|
| Success Green | #4CAF50 | Success indicators, valid status |
|
|
| Error Red | #f44336 | Error messages, invalid status |
|
|
| White | #FFFFFF | Text on green, button backgrounds |
|
|
| Light Green | #2E7D32 (10% alpha) | Card backgrounds |
|
|
|
|
## 📐 Component Dimensions
|
|
|
|
### Buttons
|
|
- **Height**: 44-56dp
|
|
- **Border Radius**: 8dp
|
|
- **Padding**: 16dp horizontal
|
|
|
|
### Cards
|
|
- **Border Radius**: 8-12dp
|
|
- **Padding**: 12-16dp
|
|
- **Spacing**: 12dp between cards
|
|
|
|
### Icons
|
|
- **Standard Size**: 20-24dp
|
|
- **Large Size**: 32dp
|
|
- **Top Bar Icons**: 24dp
|
|
|
|
### Input Fields
|
|
- **Height**: 40dp (compact), 56dp (standard)
|
|
- **Border Radius**: 8dp (inherited from TextField)
|
|
|
|
## 🔄 Navigation Flow
|
|
|
|
```
|
|
Login Screen
|
|
↓ (onLoginSuccess)
|
|
Menu Screen
|
|
↓ (onStartAttendance)
|
|
Attendance Screen
|
|
↓ (onNavigateToHistory / submit success)
|
|
Success Screen
|
|
↓ (onBackToMenu)
|
|
Back to Menu Screen
|
|
↓ (onViewHistory)
|
|
History Screen (existing)
|
|
```
|
|
|
|
## 🎯 Key UI Principles
|
|
|
|
### 1. Visual Hierarchy
|
|
- Top bar with primary color for identification
|
|
- Main content area with cards
|
|
- Action buttons at bottom
|
|
|
|
### 2. Color Consistency
|
|
- All primary actions in green (#2E7D32)
|
|
- All secondary elements in white
|
|
- Error states in red
|
|
- Success states in green (#4CAF50)
|
|
|
|
### 3. Spacing & Sizing
|
|
- Consistent 12-16dp spacing
|
|
- Rounded corners (8-12dp)
|
|
- Compact cards (no unnecessary whitespace)
|
|
- Icon + Text alignment for better readability
|
|
|
|
### 4. User Feedback
|
|
- Clear status indicators (✓/✗)
|
|
- Loading states with spinner
|
|
- Error messages with explanations
|
|
- Success messages with confirmations
|
|
|
|
## 📋 Checklist - Implementation Complete
|
|
|
|
- [x] Login Screen with Email/Password
|
|
- [x] Menu Screen with options
|
|
- [x] Attendance Screen with:
|
|
- [x] Location validation
|
|
- [x] Photo capture
|
|
- [x] Mata Kuliah field (NEW)
|
|
- [x] Submit functionality
|
|
- [x] Success Screen with confirmation
|
|
- [x] Navigation between screens
|
|
- [x] Green color scheme (#2E7D32)
|
|
- [x] Rounded corners styling
|
|
- [x] Icon + Text combinations
|
|
- [x] Button styling (white/green)
|
|
- [x] Card backgrounds with alpha
|
|
- [x] Responsive layout
|
|
|
|
## 🚀 How to Test
|
|
|
|
### Test Login
|
|
1. Open app
|
|
2. Enter Email: `test@student.com`
|
|
3. Enter Password: `password123`
|
|
4. Click LOGIN
|
|
✅ Expected: Navigate to Menu Screen
|
|
|
|
### Test Menu
|
|
1. From Menu Screen
|
|
2. Click "MULAI ABSENSI"
|
|
✅ Expected: Navigate to Attendance Screen
|
|
|
|
### Test Attendance
|
|
1. From Attendance Screen
|
|
2. Click "Perbarui Lokasi" (use mock location in debug menu)
|
|
3. Click "AMBIL FOTO"
|
|
4. Enter Mata Kuliah: "Pemrograman Mobile"
|
|
5. Click "KIRIM ABSENSI"
|
|
✅ Expected: Navigate to Success Screen
|
|
|
|
### Test Success
|
|
1. From Success Screen
|
|
2. Click "LIHAT RIWAYAT"
|
|
✅ Expected: Navigate to History Screen
|
|
|
|
## 📸 Before & After
|
|
|
|
### Before
|
|
- NPM/Nama login fields
|
|
- Basic gray styling
|
|
- Simple card layouts
|
|
- Missing mata kuliah field
|
|
|
|
### After
|
|
- Email/Password login fields
|
|
- Green theme (#2E7D32) like mockup
|
|
- Organized compact cards
|
|
- Mata kuliah field added
|
|
- Success screen added
|
|
- Menu screen added
|
|
- Better visual hierarchy
|
|
|
|
## 🔧 Technical Details
|
|
|
|
### Material 3 Theme
|
|
```kotlin
|
|
SistemAkademikTheme {
|
|
// Uses Material 3 Typography
|
|
// Custom colors for primary green
|
|
}
|
|
```
|
|
|
|
### Compose Components Used
|
|
- `Column` / `Row` for layout
|
|
- `Card` for sections
|
|
- `Button` for actions
|
|
- `OutlinedTextField` for inputs
|
|
- `Icon` for visual elements
|
|
- `TopAppBar` for header
|
|
- `CircularProgressIndicator` for loading
|
|
|
|
### Custom Styling
|
|
- Color overrides for green theme
|
|
- RoundedCornerShape for borders
|
|
- ButtonDefaults for custom button colors
|
|
- CardDefaults for custom card backgrounds
|
|
|
|
## 📚 Files Modified/Created
|
|
|
|
### Created
|
|
- ✅ `MenuScreen.kt` - Menu utama
|
|
- ✅ `SuccessScreen.kt` - Konfirmasi sukses
|
|
- ✅ `UI_IMPLEMENTATION_SUMMARY.md` - Dokumentasi UI
|
|
- ✅ `MATA_KULIAH_FEATURE.md` - Dokumentasi fitur mata kuliah
|
|
|
|
### Modified
|
|
- ✅ `LoginScreen.kt` - Updated styling dengan green theme
|
|
- ✅ `AttendanceScreen.kt` - Updated layout, added mata kuliah, updated styling
|
|
- ✅ `MainActivity.kt` - Updated navigation dengan menu dan success screens
|
|
|
|
### Unchanged
|
|
- `HistoryScreen.kt` - No changes needed
|
|
- `LocationDebugMenu.kt` - No changes needed
|
|
- Database models & utils - No changes needed
|
|
|
|
## 🎓 Next Steps
|
|
|
|
1. Test di emulator/device fisik
|
|
2. Adjust spacing jika perlu
|
|
3. Add mata kuliah dropdown (optional enhancement)
|
|
4. Test with real location/camera
|
|
5. Gather user feedback
|
|
|
|
---
|
|
|
|
**Implementation Date**: 2026-01-14
|
|
**Status**: ✅ COMPLETE - Semua screens sesuai mockup
|
|
|