589 lines
21 KiB
Markdown
589 lines
21 KiB
Markdown
# DESIGN.md — HRIS MP Mobile App (Flutter)
|
|
|
|
> Employee Self-Service Mobile Application for Menjadi Pengaruh Group HRIS System
|
|
|
|
## ⚠️ CRITICAL: This is a LIGHT THEME mobile application. All backgrounds are white (#FFFFFF) or very light gray (#F8FAFC). Do NOT use dark backgrounds. The dark navy (#0F172A) is ONLY used for small accents: buttons, active tab indicators, and text emphasis. The orange (#E65100) is ONLY used for the active bottom navigation icon.
|
|
|
|
---
|
|
|
|
## Brand Identity
|
|
|
|
- **App Name**: HRIS MP
|
|
- **Company**: Menjadi Pengaruh Group
|
|
- **Platform**: Flutter (Android & iOS)
|
|
- **Design Mood**: Clean, modern, minimal, professional. Premium SaaS mobile app feel.
|
|
- **Inspiration**: Like banking apps or HR apps — clean cards, rounded corners, smooth animations.
|
|
- **Frame Size**: 390x844 (iPhone 14 / standard Android)
|
|
|
|
---
|
|
|
|
## Typography
|
|
|
|
- **Font**: Inter (via Google Fonts package)
|
|
- **Heading 1**: 28px, Extra Bold (w800), letter-spacing -1.0, color #0F172A
|
|
- **Heading 2**: 22px, Bold (w700), letter-spacing -0.5, color #0F172A
|
|
- **Heading 3**: 16px, Bold (w700), letter-spacing -0.3, color #0F172A
|
|
- **Body Large**: 15px, Medium (w500), color #0F172A
|
|
- **Body Medium**: 13px, Medium (w500), color #0F172A
|
|
- **Body Small**: 11px, Medium (w500), color #475569 (secondary gray)
|
|
- **Label Large**: 13px, Semibold (w600), color #0F172A
|
|
- **Label Medium**: 11px, Medium (w500), color #0F172A
|
|
|
|
---
|
|
|
|
## Color Palette
|
|
|
|
### IMPORTANT: Light Theme
|
|
|
|
**Scaffold/Page background**: #FFFFFF (pure white)
|
|
**Content area background**: #F8FAFC (very light gray)
|
|
**Card background**: #FFFFFF (white)
|
|
**Input field background**: #F1F5F9 (light gray)
|
|
|
|
### Primary Colors (used sparingly as accents)
|
|
| Name | Hex | Usage |
|
|
|------|-----|-------|
|
|
| Primary Dark | #0F172A | Buttons, active tabs, text emphasis, avatar bg |
|
|
| Primary Orange | #E65100 | Active bottom nav icon color ONLY |
|
|
| Primary Blue | #1E3A8A | Action buttons, links, "Lihat Detail" text |
|
|
| Secondary Blue | #3B82F6 | Info badges, secondary highlights |
|
|
|
|
### Text Colors
|
|
| Name | Hex | Usage |
|
|
|------|-----|-------|
|
|
| Text Primary | #0F172A | Headings, main text, important labels |
|
|
| Text Secondary | #475569 | Subtitle, description text |
|
|
| Text Tertiary | #94A3B8 | Placeholder, hint text, disabled, captions |
|
|
|
|
### Status/Semantic Colors
|
|
| Name | Hex | Usage |
|
|
|------|-----|-------|
|
|
| Status Green | #10B981 | Hadir, Tepat Waktu, Approved, Aktif, sisa cuti |
|
|
| Status Yellow | #F59E0B | Menunggu Validasi, Pending |
|
|
| Status Red | #EF4444 | Rejected, Alpha, Terlambat, Ditolak |
|
|
| Status Orange | #FF5722 | Izin, Sakit, alternative warning |
|
|
|
|
### Badge Colors (pastel background + colored text)
|
|
| Type | Background | Text |
|
|
|------|-----------|------|
|
|
| Cuti | #FEE2E2 | #DC2626 |
|
|
| Sakit | #FFEDD5 | #EA580C |
|
|
| Izin | #DBEAFE | #2563EB |
|
|
| Lembur | #F3E8FF | #9333EA |
|
|
|
|
### Glass/Overlay Colors
|
|
| Name | Value | Usage |
|
|
|------|-------|-------|
|
|
| Glass White 10% | rgba(255,255,255,0.10) | Frosted glass elements |
|
|
| Glass White 20% | rgba(255,255,255,0.20) | Header overlays |
|
|
| Glass White 50% | rgba(255,255,255,0.50) | Semi-transparent cards |
|
|
| Glass White 70% | rgba(255,255,255,0.70) | Bottom nav background |
|
|
| Glass Dark 10% | rgba(0,0,0,0.10) | Bottom sheet barrier |
|
|
| Glass Dark 40% | rgba(0,0,0,0.40) | Modal overlay |
|
|
|
|
---
|
|
|
|
## Spacing System
|
|
|
|
| Token | Value | Usage |
|
|
|-------|-------|-------|
|
|
| XS | 4px | Tiny gaps |
|
|
| SM | 8px | Between related elements |
|
|
| MD | 14px | Standard section gap, card padding |
|
|
| LG | 20px | Between sections |
|
|
| XL | 28px | Major section dividers |
|
|
| XXL | 40px | Top/bottom page padding |
|
|
|
|
---
|
|
|
|
## Border Radius
|
|
|
|
| Token | Value | Usage |
|
|
|-------|-------|-------|
|
|
| SM | 12px | Input fields, small buttons, tab pills |
|
|
| MD | 16px | Cards, dialogs, bottom sheets top corners |
|
|
| LG | 20px | Profile cards, attendance cards |
|
|
| XL | 24px | Bottom navigation bar, large cards |
|
|
| Full | 9999px | Badges, status pills, circular buttons, avatar rings |
|
|
|
|
---
|
|
|
|
## Shadows
|
|
|
|
### Shadow Small (cards, list items)
|
|
- Color: #0F172A at 4% opacity
|
|
- Blur: 16px, Offset: 0,4
|
|
|
|
### Shadow Medium (elevated cards, modals)
|
|
- Layer 1: #0F172A at 6% opacity, blur 24px, offset 0,12
|
|
- Layer 2: #0F172A at 3% opacity, blur 8px, offset 0,4
|
|
|
|
### Shadow Large (bottom nav, floating elements)
|
|
- Color: #0F172A at 8% opacity
|
|
- Blur: 40px, Offset: 0,20
|
|
|
|
### Glow Effects (special buttons)
|
|
- Primary Glow: #0F172A at 30%, blur 20, offset 0,8
|
|
- Blue Glow: #1E3A8A at 40%, blur 24, offset 0,8
|
|
- Green Glow: #10B981 at 40%, blur 24, offset 0,8
|
|
- Red Glow: #EF4444 at 40%, blur 24, offset 0,8
|
|
- Orange Glow: #FF5722 at 40%, blur 24, offset 0,8
|
|
|
|
---
|
|
|
|
## Navigation Structure
|
|
|
|
### Bottom Navigation Bar
|
|
- **Position**: Floating at bottom with margin (14px sides, 8px bottom from safe area)
|
|
- **Background**: White at 85% opacity with backdrop blur (10px)
|
|
- **Border Radius**: 24px (fully rounded pill shape)
|
|
- **Shadow**: Large shadow
|
|
- **Items** (left to right):
|
|
1. **Beranda** — icon: grid_view_rounded (4-square grid), 24px
|
|
2. **Presensi** — icon: fingerprint, 24px
|
|
3. **Pengajuan** — icon: insert_page_break (document), 24px
|
|
4. **Profil** — icon: person_outline / person_rounded, 24px
|
|
- **Active icon color**: #E65100 (orange)
|
|
- **Active icon size**: 26px (slightly larger)
|
|
- **Inactive icon color**: #94A3B8 (light gray)
|
|
- **Show labels**: Only for selected/active item
|
|
- **Selected label style**: 12px, Bold (w700)
|
|
|
|
### Screen Routing (all screens in the app)
|
|
- `/login` → Login Screen
|
|
- `/onboarding/check` → Onboarding Check (face enrollment redirect)
|
|
- `/onboarding/face` → Face Enrollment Screen
|
|
- **Main Screen** (with bottom nav):
|
|
- Tab 0: Home Screen (Beranda)
|
|
- Tab 1: Presensi Screen (Attendance history)
|
|
- Tab 2: Pengajuan Screen (Leave/overtime requests)
|
|
- Tab 3: Profile Screen (Profil)
|
|
- `/presensi/map` → Presensi Map + Camera (attendance with location)
|
|
- `/presensi/camera` → Camera Capture (face photo)
|
|
- `/pengajuan/cuti` → Cuti Form
|
|
- `/pengajuan/sakit` → Sakit Form
|
|
- `/pengajuan/izin` → Izin Form
|
|
- `/pengajuan/lembur` → Lembur Form
|
|
- `/schedule` → Jadwal/Schedule Screen
|
|
- `/notification` → Notification List
|
|
- `/notification/detail` → Notification Detail
|
|
- `/poin/usage` → Poin Usage (redeem points)
|
|
- `/poin/history` → Poin History
|
|
- `/profile/edit` → Edit Profile
|
|
- `/profile/signature` → Digital Signature
|
|
- `/profile/face-test` → Face Test/Re-enrollment
|
|
- `/documents/surat-izin` → Surat Izin List
|
|
- `/home/pengumuman/detail` → Pengumuman Detail
|
|
|
|
---
|
|
|
|
## Components
|
|
|
|
### Custom Button
|
|
- **Primary**: bg #0F172A (dark navy), text white, rounded 12px, full width, height ~48px
|
|
- **Outline**: transparent bg, border 1px #0F172A, text #0F172A
|
|
- **Danger**: bg #EF4444, text white
|
|
- **Loading state**: Shows CircularProgressIndicator instead of text
|
|
- Hover/press: subtle scale animation
|
|
|
|
### Custom Text Field
|
|
- **Background**: #F1F5F9 (light gray)
|
|
- **Border**: none by default, on focus shows #0F172A border
|
|
- **Radius**: 12px
|
|
- **Label**: above field, 11px semibold, #0F172A
|
|
- **Hint text**: #94A3B8
|
|
- **Height**: ~48px
|
|
- **Password**: eye icon toggle for visibility
|
|
- **Error state**: red border + red error text below
|
|
|
|
### Custom Avatar
|
|
- Circular image with fallback to initials
|
|
- Default fallback: navy gradient circle with white letter
|
|
- Border: white ring (3px)
|
|
- Sizes: 40px (list), 80px (profile), variable
|
|
|
|
### Badge Widget
|
|
- Rounded full pill shape
|
|
- Pastel colored background with darker text
|
|
- Padding: 8px horizontal, 3px vertical
|
|
- Text: 10-11px, semibold
|
|
|
|
### Menu Card (Pengajuan section)
|
|
- Rounded 16px white card with shadow
|
|
- Colored icon in rounded square
|
|
- Title (bold) + subtitle (gray) text
|
|
- Tap animation (bounce/scale)
|
|
|
|
### Stat Card
|
|
- White card, rounded 20px, shadow
|
|
- Icon + label + value layout
|
|
- Used for attendance summary stats
|
|
|
|
### Bottom Sheet (Detail views)
|
|
- Background: transparent (so rounded corners show)
|
|
- Sheet: white, top corners rounded 24px
|
|
- Drag handle: 40px wide, 4px tall, centered, gray pill
|
|
- Barrier: black at 10% opacity (very subtle)
|
|
|
|
### Attendance Time Card
|
|
- Horizontal card showing Jam Masuk + Jam Keluar + Total Jam
|
|
- Green indicators for check-in, red for out
|
|
- White card, rounded corners
|
|
|
|
---
|
|
|
|
## All Screens (Detailed)
|
|
|
|
### 1. SPLASH SCREEN
|
|
- Full white background
|
|
- Company logo centered
|
|
- Loading indicator below logo
|
|
|
|
### 2. LOGIN SCREEN
|
|
- White background (#FFFFFF)
|
|
- Centered vertically, padded 20px horizontal
|
|
- Content top to bottom:
|
|
1. Company logo image (height 80px, width 200px, centered)
|
|
2. Gap 40px
|
|
3. Title "Masuk ke Akun" — 16px bold, left-aligned
|
|
4. Gap 20px
|
|
5. Email text field (label "Email", hint "Masukkan Email Anda")
|
|
6. Gap 14px
|
|
7. Password text field (label "Password", hint "Masukkan Password", eye icon toggle)
|
|
8. Gap 28px
|
|
9. "Masuk" button — full width, primary dark navy, rounded 12px
|
|
- No bottom navigation bar on this screen
|
|
|
|
### 3. ONBOARDING CHECK SCREEN
|
|
- Checks if user needs face enrollment
|
|
- If not registered → redirects to Face Enrollment
|
|
- If ok → redirects to Main Screen
|
|
|
|
### 4. FACE ENROLLMENT SCREEN
|
|
- Full screen camera for face registration
|
|
- Captures 3 poses: front, left, right
|
|
- Oval face guide overlay in center (dashed border)
|
|
- Step indicator at top: "Pose 1 of 3"
|
|
- Instruction text: "Hadap Depan" / "Hadap Kiri" / "Hadap Kanan"
|
|
- Capture button at bottom (large circle)
|
|
- Preview of captured photos at bottom
|
|
- "Kirim untuk Verifikasi" button after all 3 captured
|
|
|
|
### 5. HOME SCREEN (Tab: Beranda)
|
|
- Background: #F8FAFC
|
|
- AppBar: none (custom header)
|
|
- Pull-to-refresh enabled
|
|
- Content (scrollable, top to bottom):
|
|
1. **Home Header**: User greeting card
|
|
- "Selamat Pagi/Siang/Sore," + user name (bold white text)
|
|
- Job title + division below (white, smaller)
|
|
- Right side: user avatar (circular photo or initial)
|
|
- Card: dark navy gradient background (#0F172A), rounded 20px
|
|
- Notification bell icon at top-right (with red badge count)
|
|
2. **Poin Expiry Card** (conditional — if points expiring soon):
|
|
- Orange/amber warning card
|
|
- "X poin akan kadaluarsa pada [date]"
|
|
- "Gunakan Sekarang" button
|
|
3. **Poin Lembur Card**:
|
|
- White card, rounded 24px, shadow
|
|
- Shows current overtime points balance
|
|
- "Gunakan" button
|
|
4. **Presensi Section**:
|
|
- White card showing today's attendance status
|
|
- Jam Masuk + Jam Keluar time display
|
|
- Shift info pill badge
|
|
- Large "Absen Masuk" or "Absen Keluar" button
|
|
- Button color: navy (masuk) or green (pulang)
|
|
- If already done both: shows completed state with green checkmark
|
|
5. **Sisa Cuti Card**:
|
|
- White card, rounded 24px
|
|
- Beach/umbrella icon in light gray-blue rounded square
|
|
- "Sisa Cuti Tahunan" label
|
|
- Number in green bold (e.g. "12 Hari")
|
|
6. **Pengumuman Terbaru** section:
|
|
- "Pengumuman Terbaru" heading (16px bold)
|
|
- Horizontal scrolling card list
|
|
- Each card: white, rounded 20px, shadow, width ~280px
|
|
- Shows: title (bold), content preview (gray, 2 lines), date, priority badge
|
|
- If empty: placeholder card with megaphone icon + "Belum ada pengumuman"
|
|
7. Bottom spacer (100px for floating nav bar)
|
|
- Bottom Navigation Bar: floating, Beranda active (orange)
|
|
|
|
### 6. PRESENSI SCREEN (Tab: Presensi)
|
|
- Background: #F8FAFC
|
|
- AppBar: "Presensi Karyawan" title (left), shift badge + calendar icon button (right)
|
|
- Pull-to-refresh
|
|
- Content:
|
|
1. **Face status banner** (conditional):
|
|
- If pending: blue info banner "Data wajah sedang proses verifikasi HRD"
|
|
- If rejected: red warning banner "Registrasi wajah ditolak, lakukan ulang"
|
|
2. **Presensi Section** (same as Home — today's attendance card with action button)
|
|
3. **"History Presensi"** heading
|
|
4. **Month/Year Picker Bar**:
|
|
- White card, rounded 16px, shadow
|
|
- Left: ← arrow circle button
|
|
- Center: calendar icon + "Mei 2025" (tappable → opens bottom sheet month picker)
|
|
- Right: → arrow circle button (disabled if current month)
|
|
5. **History List** (vertical scrolling):
|
|
- Each item: white card, rounded 20px, shadow, margin-bottom 14px
|
|
- Content: Date with calendar icon → status badges (pills) → Attendance time card (Jam Masuk/Keluar/Total) → "Lihat Detail" text link (blue)
|
|
- Tapping opens bottom sheet detail view
|
|
6. **Month Picker Bottom Sheet** (when tapped):
|
|
- White, top rounded 24px
|
|
- Drag handle pill
|
|
- "Pilih Bulan" title
|
|
- Year selector: ← [2025] →
|
|
- 3x4 grid of month buttons (Jan-Des)
|
|
- Active month: navy bg, white text
|
|
- Future months: disabled/grayed out
|
|
- "Terapkan" button at bottom (full width, navy)
|
|
- Bottom Nav: Presensi active (orange fingerprint icon)
|
|
|
|
### 7. PRESENSI MAP SCREEN (Attendance with Location)
|
|
- Full screen map showing user location + office radius
|
|
- Top: Back arrow + "Absen Masuk/Pulang" title
|
|
- Map: Google Maps with user marker + office circle radius
|
|
- Bottom card (white, rounded top 24px):
|
|
- Current location address
|
|
- Distance from office
|
|
- Status: "Dalam Radius" (green) or "Luar Radius" (red)
|
|
- "Lanjut Foto Wajah" button (navy, full width)
|
|
|
|
### 8. CAMERA CAPTURE SCREEN (Face Recognition)
|
|
- Full screen camera viewfinder
|
|
- Oval face guide overlay (scanner overlay) in center with animated border
|
|
- Instruction text overlay: "Posisikan wajah di dalam area"
|
|
- Top: back arrow + title
|
|
- Bottom: Large capture button (circle)
|
|
- After capture: preview + confirm/retake buttons
|
|
|
|
### 9. PENGAJUAN SCREEN (Tab: Pengajuan)
|
|
- Background: #F8FAFC
|
|
- AppBar: "Pengajuan" title (centered)
|
|
- Pull-to-refresh
|
|
- Content:
|
|
1. **Quick Action Menu Cards** (top section):
|
|
- Full width card: "Cuti / Time Off" — beach icon, bg #FEE2E2, icon #DC2626
|
|
- 3-column row below:
|
|
- "Sakit" — hospital icon, bg #FFEDD5, icon #EA580C
|
|
- "Izin" — event-busy icon, bg #DBEAFE, icon #2563EB
|
|
- "Lembur" — timer icon, bg #F3E8FF, icon #9333EA
|
|
- Each card: colored bg, matching icon, title + subtitle, rounded 16px
|
|
2. **Tab Selector** (pill-shaped segmented control):
|
|
- White container, rounded-full, padding 4px
|
|
- 3 tabs: "Approved" | "Pending" | "Rejected"
|
|
- Active tab: navy bg (#0F172A), white text
|
|
- Inactive tab: transparent, gray text
|
|
3. **Pengajuan List**:
|
|
- Cards for each submission
|
|
- Each card shows: type icon + type label, date range, status badge, description
|
|
- Tapping opens bottom sheet detail
|
|
- Empty state: inbox icon + "Belum ada pengajuan" text
|
|
- Bottom Nav: Pengajuan active (orange document icon)
|
|
|
|
### 10. FORM — Pengajuan Cuti
|
|
- AppBar: back arrow + "Pengajuan Cuti" title
|
|
- White background
|
|
- Form fields:
|
|
- Tanggal Mulai (date picker)
|
|
- Tanggal Selesai (date picker)
|
|
- Durasi (auto-calculated, read-only)
|
|
- Alasan (textarea, multi-line)
|
|
- "Ajukan Cuti" button (full width, navy)
|
|
|
|
### 11. FORM — Pengajuan Sakit
|
|
- AppBar: back arrow + "Pengajuan Sakit" title
|
|
- Form fields:
|
|
- Tanggal Mulai (date picker)
|
|
- Tanggal Selesai (date picker)
|
|
- Keluhan/Diagnosa (textarea)
|
|
- Upload Surat Dokter (file/image picker with preview)
|
|
- "Ajukan Izin Sakit" button
|
|
|
|
### 12. FORM — Pengajuan Izin
|
|
- AppBar: back arrow + "Pengajuan Izin" title
|
|
- Form fields:
|
|
- Jenis Izin (dropdown)
|
|
- Tanggal (date picker)
|
|
- Alasan (textarea)
|
|
- Upload Bukti (optional file picker)
|
|
- "Ajukan Izin" button
|
|
|
|
### 13. FORM — Pengajuan Lembur
|
|
- AppBar: back arrow + "Pengajuan Lembur" title
|
|
- Form fields:
|
|
- Tanggal (date picker)
|
|
- Jam Mulai (time picker)
|
|
- Jam Selesai (time picker)
|
|
- Keterangan (textarea)
|
|
- "Ajukan Lembur" button
|
|
|
|
### 14. SCHEDULE SCREEN (Jadwal Kerja)
|
|
- AppBar: back arrow + "Jadwal Saya" title
|
|
- Month/Year picker (same component as Presensi history)
|
|
- Calendar month grid view:
|
|
- Day headers: Sen-Min
|
|
- Each day cell: date number + shift pill badge (colored)
|
|
- Today: highlighted circle
|
|
- Tapping day shows shift detail
|
|
- Legend: colored dots with shift names
|
|
- Bottom: Upcoming schedule list
|
|
|
|
### 15. NOTIFICATION SCREEN
|
|
- AppBar: back arrow + "Notifikasi" title
|
|
- "Tandai Semua Dibaca" button at top
|
|
- Notification list:
|
|
- Each item: colored icon in rounded square + title (bold) + message preview + timestamp
|
|
- Unread: light blue tint background + blue dot
|
|
- Read: white background
|
|
- Tapping goes to detail or relevant screen
|
|
- Types: Presensi, Pengajuan Izin, Lembur, Pengumuman, Face Enrollment
|
|
|
|
### 16. NOTIFICATION DETAIL
|
|
- AppBar: back arrow + "Detail Notifikasi" title
|
|
- White card:
|
|
- Icon + type badge
|
|
- Title (heading 3)
|
|
- Full message content
|
|
- Timestamp
|
|
- Action button to navigate to related screen
|
|
|
|
### 17. POIN USAGE SCREEN (Tukar Poin Lembur)
|
|
- AppBar: back arrow + "Gunakan Poin" title
|
|
- Current points balance card (large number, green)
|
|
- Usage options/form:
|
|
- Jenis penggunaan
|
|
- Jumlah poin
|
|
- Keterangan
|
|
- "Gunakan Poin" submit button
|
|
- History section below
|
|
|
|
### 18. POIN HISTORY SCREEN
|
|
- AppBar: back arrow + "Riwayat Poin" title
|
|
- List of point transactions
|
|
- Each item: date, description, +/- points, status badge
|
|
|
|
### 19. PROFILE SCREEN (Tab: Profil)
|
|
- Background: #FFFFFF
|
|
- AppBar: "Profil Karyawan" (centered)
|
|
- Pull-to-refresh
|
|
- Content:
|
|
1. **Profile Card** (white, rounded 20px, shadow):
|
|
- Avatar (80px, circular photo or initials)
|
|
- Name (20px bold, centered)
|
|
- "Divisi • Jabatan" (13px gray, centered)
|
|
- Status badge: "Karyawan Aktif" green pill with dot
|
|
2. **"INFORMASI PRIBADI"** section label (11px uppercase, gray, letter-spaced)
|
|
3. **Info Card** (white, rounded 20px, shadow):
|
|
- Rows of: icon (24px, navy) + label (11px gray) / value (13px dark)
|
|
- Items: Email, No. Telepon, ID Karyawan (with copy button), Divisi, Jabatan, Kantor, Alamat, Bergabung Sejak, Sisa Cuti, Peran (role badges)
|
|
4. **"PENGATURAN AKUN"** section label
|
|
5. **Actions Card** (white, rounded 20px, shadow):
|
|
- ListTile items with icon + label + chevron:
|
|
- "Edit Profil" (edit icon)
|
|
- "Registrasi Wajah" (face icon) + status text (Terverifikasi green / Menunggu HRD yellow / Ditolak red / Belum Terdaftar gray)
|
|
- "Ubah Kata Sandi" (lock icon)
|
|
- "Tanda Tangan Digital" (draw icon)
|
|
- "Keluar" (logout icon, RED text + RED icon)
|
|
6. **Footer**: "Perangkat: Samsung Galaxy S21" + "App Version 1.0.0+1" (tiny gray text, centered)
|
|
7. Bottom spacer (80px for nav bar)
|
|
- Bottom Nav: Profil active (orange person icon)
|
|
|
|
### 20. EDIT PROFILE SCREEN
|
|
- AppBar: back arrow + "Edit Profil" title
|
|
- Form fields:
|
|
- Nama Lengkap
|
|
- No. Telepon
|
|
- Alamat (textarea)
|
|
- Photo upload (avatar picker)
|
|
- "Simpan Perubahan" button
|
|
|
|
### 21. SIGNATURE SCREEN (Tanda Tangan Digital)
|
|
- AppBar: back arrow + "Tanda Tangan Digital" title
|
|
- Canvas drawing area (white card with border)
|
|
- Clear button
|
|
- "Simpan Tanda Tangan" button
|
|
- Preview of existing signature if already saved
|
|
|
|
### 22. FACE TEST SCREEN (Re-registration)
|
|
- Similar to Face Enrollment
|
|
- Camera with face overlay
|
|
- 3 pose capture
|
|
- Submit for verification
|
|
|
|
### 23. PENGUMUMAN DETAIL SCREEN
|
|
- AppBar: back arrow + "Detail Pengumuman"
|
|
- White card:
|
|
- Priority badge (Tinggi red/Sedang orange/Rendah blue)
|
|
- Title (heading 2, bold)
|
|
- Date published
|
|
- Full content (rendered text, may include images)
|
|
- Author info
|
|
|
|
### 24. SURAT IZIN SCREEN (Document List)
|
|
- AppBar: back arrow + "Surat Izin" title
|
|
- List of surat izin documents
|
|
- Each card: type, date, status badge, tappable for detail
|
|
- Bottom sheet detail view on tap
|
|
|
|
### 25. CHANGE PASSWORD DIALOG
|
|
- Modal dialog (AlertDialog)
|
|
- Rounded 16px
|
|
- Fields: Password Lama, Password Baru, Konfirmasi Password
|
|
- "Ubah Password" button (navy) + "Batal" (gray text)
|
|
|
|
### 26. PRESENSI DETAIL BOTTOM SHEET
|
|
- Bottom sheet with rounded top 24px
|
|
- Drag handle
|
|
- Full attendance detail:
|
|
- Date + day name
|
|
- Shift info
|
|
- Jam Masuk + Jam Keluar (large time display)
|
|
- Face verification status (photo thumbnails if available)
|
|
- Location info (map thumbnail)
|
|
- Status badges
|
|
- Validation status
|
|
|
|
### 27. PENGAJUAN DETAIL BOTTOM SHEET
|
|
- Bottom sheet, rounded top 24px
|
|
- Submission details:
|
|
- Type + status badge
|
|
- Date range
|
|
- Full description/reason
|
|
- Attachment preview (if any)
|
|
- Submitted date
|
|
- Approval status timeline
|
|
|
|
---
|
|
|
|
## Animations & Interactions
|
|
|
|
- **FadeInUp**: List items animate in with stagger delay (50ms per item), opacity + translateY
|
|
- **BouncyTap**: Cards scale down slightly on tap, spring back
|
|
- **Pull-to-refresh**: Standard Material indicator
|
|
- **Bottom sheet**: Slide up with drag handle
|
|
- **Tab switching**: Smooth color transition on segmented control
|
|
- **Shimmer loading**: Animated gradient placeholder for all loading states (Home, Profile, Lists, Schedule)
|
|
- **Page transitions**: Standard Material page route transitions
|
|
- **Badge count**: Animated appearance on notification bell
|
|
|
|
---
|
|
|
|
## Loading States
|
|
|
|
Every screen has a shimmer loading placeholder:
|
|
- **Home Shimmer**: Mimics header card + stat cards + list items with gray animated blocks
|
|
- **Profile Shimmer**: Avatar circle + text lines + card shapes
|
|
- **List Shimmer**: Repeated card-shaped blocks
|
|
- **Schedule Shimmer**: Calendar grid placeholder
|
|
|
|
---
|
|
|
|
## Empty States
|
|
|
|
Each list has an empty state with:
|
|
- Large gray icon (48-56px, 50% opacity)
|
|
- Descriptive title text (13px, medium gray)
|
|
- Subtitle text (11px, light gray)
|
|
- Optional action button
|