expro987
/
MIF_E31230910_MP-HRIS-MOBILE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31230910_MP-HRIS-MOBILE/DESIGN.md

21 KiB
Raw Blame History

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