Fix Semua

Bismillah siap lulus
2026-10-26 19:48:54 +07:00 · 2026-10-26 19:48:54 +07:00 · 37fd54c634
commit 37fd54c634
276 changed files with 71161 additions and 0 deletions
--- a/facerecognition_presensi/.gitignore
+++ b/facerecognition_presensi/.gitignore
@ -0,0 +1,60 @@
+# Local secrets (examples are intentionally public)
+.env
+.env.*
+!.env.example
+*.pem
+*.key
+*.p12
+*.pfx
+*.jks
+*.keystore
+!AndroidFolder/android/app/debug.keystore
+local.properties
+google-services.json
+GoogleService-Info.plist
+# Dependencies and build output
+node_modules/
+venv/
+.venv/
+__pycache__/
+*.py[cod]
+.pytest_cache/
+.expo/
+.gradle/
+.cxx/
+build/
+dist/
+*.apk
+*.aab
+*.log
+# Personal datasets and generated biometric templates
+Dataset/
+face_mahasiswa/
+datasets/
+uploads/
+trained_models/
+*.pkl
+*.pickle
+*.npy
+*.npz
+*.index
+*.db
+*.sqlite*
+*.sql
+face_gallery_faiss*
+threshold_calibration.json
+# Reports, backups, local agent state
+*.zip
+*.rar
+*.bak
+.DS_Store
+Thumbs.db
+.vscode/
+.idea/
+.agent/
+.agents/
+.claude/
+.codex/
+graphify-out/
+
+cleanup-manifest.json
--- a/facerecognition_presensi/AndroidFolder/.env.example
+++ b/facerecognition_presensi/AndroidFolder/.env.example
@ -0,0 +1 @@
+EXPO_PUBLIC_API_URL=http://10.0.2.2:8000
--- a/facerecognition_presensi/AndroidFolder/.gitignore
+++ b/facerecognition_presensi/AndroidFolder/.gitignore
@ -0,0 +1,43 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+# generated native folders
+/ios
+
--- a/facerecognition_presensi/AndroidFolder/README.md
+++ b/facerecognition_presensi/AndroidFolder/README.md
@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
--- a/facerecognition_presensi/AndroidFolder/android/.gitignore
+++ b/facerecognition_presensi/AndroidFolder/android/.gitignore
@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle
--- a/facerecognition_presensi/AndroidFolder/android/app/build.gradle
+++ b/facerecognition_presensi/AndroidFolder/android/app/build.gradle
@ -0,0 +1,182 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
+ */
+def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'com.danye41.AndroidFolder'
+    defaultConfig {
+        applicationId 'com.danye41.AndroidFolder'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+
+        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
+            shrinkResources enableShrinkResources.toBoolean()
+            minifyEnabled enableMinifyInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
+            crunchPngs enablePngCrunchInRelease.toBoolean()
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
+            useLegacyPackaging enableLegacyPackaging.toBoolean()
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}
--- a/facerecognition_presensi/AndroidFolder/android/app/debug.keystore
+++ b/facerecognition_presensi/AndroidFolder/android/app/debug.keystore
--- a/facerecognition_presensi/AndroidFolder/android/app/proguard-rules.pro
+++ b/facerecognition_presensi/AndroidFolder/android/app/proguard-rules.pro
@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:
--- a/facerecognition_presensi/AndroidFolder/android/app/src/debug/AndroidManifest.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/debug/AndroidManifest.xml
@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/debugOptimized/AndroidManifest.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/debugOptimized/AndroidManifest.xml
@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/AndroidManifest.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/AndroidManifest.xml
@ -0,0 +1,35 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
+  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
+  <uses-permission android:name="android.permission.CAMERA"/>
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false" android:fullBackupContent="@xml/secure_store_backup_rules" android:dataExtractionRules="@xml/secure_store_data_extraction_rules">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="androidfolder"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/java/com/danye41/AndroidFolder/MainActivity.kt
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/java/com/danye41/AndroidFolder/MainActivity.kt
@ -0,0 +1,65 @@
+package com.danye41.AndroidFolder
+import expo.modules.splashscreen.SplashScreenManager
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    // setTheme(R.style.AppTheme);
+    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
+    SplashScreenManager.registerOnActivity(this)
+    // @generated end expo-splashscreen
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/java/com/danye41/AndroidFolder/MainApplication.kt
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/java/com/danye41/AndroidFolder/MainApplication.kt
@ -0,0 +1,56 @@
+package com.danye41.AndroidFolder
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.common.ReleaseLevel
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
+import com.facebook.react.defaults.DefaultReactNativeHost
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+      this,
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> =
+            PackageList(this).packages.apply {
+              // Packages that cannot be autolinked yet can be added manually here, for example:
+              // add(MyReactNativePackage())
+            }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    DefaultNewArchitectureEntryPoint.releaseLevel = try {
+      ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
+    } catch (e: IllegalArgumentException) {
+      ReleaseLevel.STABLE
+    }
+    loadReactNative(this)
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-hdpi/splashscreen_logo.png
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-hdpi/splashscreen_logo.png
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-mdpi/splashscreen_logo.png
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-mdpi/splashscreen_logo.png
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-xhdpi/splashscreen_logo.png
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-xhdpi/splashscreen_logo.png
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-xxhdpi/splashscreen_logo.png
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-xxhdpi/splashscreen_logo.png
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-xxxhdpi/splashscreen_logo.png
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable-xxxhdpi/splashscreen_logo.png
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable/ic_launcher_background.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable/ic_launcher_background.xml
@ -0,0 +1,6 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+  <item>
+    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+  </item>
+</layer-list>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable/rn_edit_text_material.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/drawable/rn_edit_text_material.xml
@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_monochrome.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_monochrome.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_monochrome.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_monochrome.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_monochrome.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values-night/colors.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values-night/colors.xml
@ -0,0 +1,3 @@
+<resources>
+  <color name="splashscreen_background">#000000</color>
+</resources>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values/colors.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values/colors.xml
@ -0,0 +1,6 @@
+<resources>
+  <color name="splashscreen_background">#ffffff</color>
+  <color name="iconBackground">#E6F4FE</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#ffffff</color>
+</resources>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values/strings.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values/strings.xml
@ -0,0 +1,6 @@
+<resources>
+  <string name="app_name">AndroidFolder</string>
+  <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+</resources>
--- a/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values/styles.xml
+++ b/facerecognition_presensi/AndroidFolder/android/app/src/main/res/values/styles.xml
@ -0,0 +1,14 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">#ffffff</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
+    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
+    <item name="android:windowSplashScreenBehavior">icon_preferred</item>
+  </style>
+</resources>
--- a/facerecognition_presensi/AndroidFolder/android/build.gradle
+++ b/facerecognition_presensi/AndroidFolder/android/build.gradle
@ -0,0 +1,24 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath('com.android.tools.build:gradle')
+    classpath('com.facebook.react:react-native-gradle-plugin')
+    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+  }
+}
+
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"
--- a/facerecognition_presensi/AndroidFolder/android/gradle.properties
+++ b/facerecognition_presensi/AndroidFolder/android/gradle.properties
@ -0,0 +1,65 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+# Specifies whether the app is configured to use edge-to-edge via the app config or plugin
+# WARNING: This property has been deprecated and will be removed in Expo SDK 55. Use `edgeToEdgeEnabled` or `react.edgeToEdgeEnabled` to determine whether the project is using edge-to-edge.
+expo.edgeToEdgeEnabled=true
--- a/facerecognition_presensi/AndroidFolder/android/gradle/wrapper/gradle-wrapper.jar
+++ b/facerecognition_presensi/AndroidFolder/android/gradle/wrapper/gradle-wrapper.jar
--- a/facerecognition_presensi/AndroidFolder/android/gradle/wrapper/gradle-wrapper.properties
+++ b/facerecognition_presensi/AndroidFolder/android/gradle/wrapper/gradle-wrapper.properties
@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
--- a/facerecognition_presensi/AndroidFolder/android/gradlew
+++ b/facerecognition_presensi/AndroidFolder/android/gradlew
@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
--- a/facerecognition_presensi/AndroidFolder/android/gradlew.bat
+++ b/facerecognition_presensi/AndroidFolder/android/gradlew.bat
@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/facerecognition_presensi/AndroidFolder/android/settings.gradle
+++ b/facerecognition_presensi/AndroidFolder/android/settings.gradle
@ -0,0 +1,39 @@
+pluginManagement {
+  def reactNativeGradlePlugin = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
+    }.standardOutput.asText.get().trim()
+  ).getParentFile().absolutePath
+  includeBuild(reactNativeGradlePlugin)
+  
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+
+plugins {
+  id("com.facebook.react.settings")
+  id("expo-autolinking-settings")
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+  }
+}
+expoAutolinking.useExpoModules()
+
+rootProject.name = 'AndroidFolder'
+
+expoAutolinking.useExpoVersionCatalog()
+
+include ':app'
+includeBuild(expoAutolinking.reactNativeGradlePlugin)
--- a/facerecognition_presensi/AndroidFolder/app.json
+++ b/facerecognition_presensi/AndroidFolder/app.json
@ -0,0 +1,62 @@
+{
+  "expo": {
+    "name": "AndroidFolder",
+    "slug": "AndroidFolder",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "androidfolder",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "permissions": [
+        "android.permission.ACCESS_COARSE_LOCATION",
+        "android.permission.ACCESS_FINE_LOCATION",
+        "android.permission.ACCESS_COARSE_LOCATION",
+        "android.permission.ACCESS_FINE_LOCATION"
+      ],
+      "package": "com.danye41.AndroidFolder"
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Aplikasi membutuhkan akses lokasi untuk validasi radius presensi."
+        }
+      ],
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ],
+      "expo-secure-store"
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/_layout.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/_layout.tsx
@ -0,0 +1,69 @@
+import { Tabs } from 'expo-router';
+import React from 'react';
+
+import { HapticTab } from '@/components/haptic-tab';
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/use-color-scheme';
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        headerShown: false,
+        tabBarButton: HapticTab,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="jadwal"
+        options={{
+          title: 'Jadwal',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="presensi"
+        options={{
+          title: 'Presensi',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="checkmark.circle.fill" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: 'Profile',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          href: null,
+        }}
+      />
+      <Tabs.Screen
+        name="register-foto"
+        options={{
+          href: null,
+          title: 'Register',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="camera.fill" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="face_recognition"
+        options={{
+          href: null,
+        }}
+      />
+    </Tabs>
+  );
+}
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/explore.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/explore.tsx
@ -0,0 +1,112 @@
+import { Image } from 'expo-image';
+import { Platform, StyleSheet } from 'react-native';
+
+import { Collapsible } from '@/components/ui/collapsible';
+import { ExternalLink } from '@/components/external-link';
+import ParallaxScrollView from '@/components/parallax-scroll-view';
+import { ThemedText } from '@/components/themed-text';
+import { ThemedView } from '@/components/themed-view';
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { Fonts } from '@/constants/theme';
+
+export default function TabTwoScreen() {
+  return (
+    <ParallaxScrollView
+      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
+      headerImage={
+        <IconSymbol
+          size={310}
+          color="#808080"
+          name="chevron.left.forwardslash.chevron.right"
+          style={styles.headerImage}
+        />
+      }>
+      <ThemedView style={styles.titleContainer}>
+        <ThemedText
+          type="title"
+          style={{
+            fontFamily: Fonts.rounded,
+          }}>
+          Explore
+        </ThemedText>
+      </ThemedView>
+      <ThemedText>This app includes example code to help you get started.</ThemedText>
+      <Collapsible title="File-based routing">
+        <ThemedText>
+          This app has two screens:{' '}
+          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
+          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
+        </ThemedText>
+        <ThemedText>
+          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
+          sets up the tab navigator.
+        </ThemedText>
+        <ExternalLink href="https://docs.expo.dev/router/introduction">
+          <ThemedText type="link">Learn more</ThemedText>
+        </ExternalLink>
+      </Collapsible>
+      <Collapsible title="Android, iOS, and web support">
+        <ThemedText>
+          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
+          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
+        </ThemedText>
+      </Collapsible>
+      <Collapsible title="Images">
+        <ThemedText>
+          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
+          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
+          different screen densities
+        </ThemedText>
+        <Image
+          source={require('@/assets/images/react-logo.png')}
+          style={{ width: 100, height: 100, alignSelf: 'center' }}
+        />
+        <ExternalLink href="https://reactnative.dev/docs/images">
+          <ThemedText type="link">Learn more</ThemedText>
+        </ExternalLink>
+      </Collapsible>
+      <Collapsible title="Light and dark mode components">
+        <ThemedText>
+          This template has light and dark mode support. The{' '}
+          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
+          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
+        </ThemedText>
+        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
+          <ThemedText type="link">Learn more</ThemedText>
+        </ExternalLink>
+      </Collapsible>
+      <Collapsible title="Animations">
+        <ThemedText>
+          This template includes an example of an animated component. The{' '}
+          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
+          the powerful{' '}
+          <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
+            react-native-reanimated
+          </ThemedText>{' '}
+          library to create a waving hand animation.
+        </ThemedText>
+        {Platform.select({
+          ios: (
+            <ThemedText>
+              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
+              component provides a parallax effect for the header image.
+            </ThemedText>
+          ),
+        })}
+      </Collapsible>
+    </ParallaxScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerImage: {
+    color: '#808080',
+    bottom: -90,
+    left: -35,
+    position: 'absolute',
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/face_recognition.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/face_recognition.tsx
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/index.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/index.tsx
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/jadwal.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/jadwal.tsx
@ -0,0 +1,922 @@
+import React, { useState, useEffect, useMemo } from "react";
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  FlatList,
+  ActivityIndicator,
+  RefreshControl,
+  Dimensions,
+} from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { API_BASE } from "@/constants/config";
+import { useAuth } from "@/contexts/AuthContext";
+import { useTheme } from "@/contexts/ThemeContext";
+
+const { width } = Dimensions.get("window");
+
+interface Kelas {
+  id: number;
+  nama_kelas: string;
+}
+
+interface Pengajar {
+  nama_dosen: string;
+  role: string;
+}
+
+interface JadwalItem {
+  id_jadwal: number;
+  hari: string;
+  jam_mulai: string;
+  jam_selesai: string;
+  ruangan: string;
+  nama_matakuliah: string;
+  kode_matakuliah: string;
+  semester: number;
+  kelas_list: Kelas[];
+  pengajar_list: Pengajar[];
+}
+
+const DAYS = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
+const INDO_DAYS = [
+  "Minggu",
+  "Senin",
+  "Selasa",
+  "Rabu",
+  "Kamis",
+  "Jumat",
+  "Sabtu",
+];
+
+// Mock data when offline/demo
+const MOCK_SCHEDULES: Record<string, JadwalItem[]> = {
+  senin: [
+    {
+      id_jadwal: 1,
+      hari: "senin",
+      jam_mulai: "08:00:00",
+      jam_selesai: "10:30:00",
+      ruangan: "Lab Komputer 3",
+      nama_matakuliah: "Pemrograman Mobile",
+      kode_matakuliah: "TI-401",
+      semester: 6,
+      kelas_list: [{ id: 1, nama_kelas: "TI-4A" }],
+      pengajar_list: [
+        { nama_dosen: "Dr. Ahmad Santoso, M.Kom", role: "koordinator" },
+      ],
+    },
+    {
+      id_jadwal: 2,
+      hari: "senin",
+      jam_mulai: "13:00:00",
+      jam_selesai: "15:30:00",
+      ruangan: "Ruang 202",
+      nama_matakuliah: "Etika Profesi",
+      kode_matakuliah: "TI-405",
+      semester: 6,
+      kelas_list: [{ id: 2, nama_kelas: "TI-4A" }],
+      pengajar_list: [
+        { nama_dosen: "Prof. Budi Wijaya, Ph.D", role: "koordinator" },
+      ],
+    },
+  ],
+  selasa: [
+    {
+      id_jadwal: 3,
+      hari: "selasa",
+      jam_mulai: "08:00:00",
+      jam_selesai: "10:30:00",
+      ruangan: "Lab Komputer 1",
+      nama_matakuliah: "Basis Data Lanjut",
+      kode_matakuliah: "TI-402",
+      semester: 6,
+      kelas_list: [{ id: 3, nama_kelas: "TI-4A" }],
+      pengajar_list: [
+        { nama_dosen: "Ir. Rina Lestari, M.T.", role: "koordinator" },
+      ],
+    },
+    {
+      id_jadwal: 4,
+      hari: "selasa",
+      jam_mulai: "10:45:00",
+      jam_selesai: "13:15:00",
+      ruangan: "Ruang 301",
+      nama_matakuliah: "Kecerdasan Buatan",
+      kode_matakuliah: "TI-403",
+      semester: 6,
+      kelas_list: [{ id: 4, nama_kelas: "TI-4A" }],
+      pengajar_list: [
+        { nama_dosen: "Prof. Budi Wijaya, Ph.D", role: "koordinator" },
+      ],
+    },
+  ],
+  rabu: [
+    {
+      id_jadwal: 5,
+      hari: "rabu",
+      jam_mulai: "08:00:00",
+      jam_selesai: "10:30:00",
+      ruangan: "Lab Jaringan 2",
+      nama_matakuliah: "Jaringan Komputer",
+      kode_matakuliah: "TI-404",
+      semester: 6,
+      kelas_list: [{ id: 5, nama_kelas: "TI-4A" }],
+      pengajar_list: [
+        { nama_dosen: "Dr. Citra Dewi, M.T", role: "koordinator" },
+      ],
+    },
+    {
+      id_jadwal: 6,
+      hari: "rabu",
+      jam_mulai: "13:30:00",
+      jam_selesai: "16:00:00",
+      ruangan: "Lab Desain",
+      nama_matakuliah: "Interaksi Manusia & Komputer",
+      kode_matakuliah: "TI-406",
+      semester: 6,
+      kelas_list: [{ id: 6, nama_kelas: "TI-4A" }],
+      pengajar_list: [{ nama_dosen: "Haryono, M.Cs.", role: "koordinator" }],
+    },
+  ],
+  kamis: [
+    {
+      id_jadwal: 7,
+      hari: "kamis",
+      jam_mulai: "08:00:00",
+      jam_selesai: "10:30:00",
+      ruangan: "Ruang 103",
+      nama_matakuliah: "Rekayasa Perangkat Lunak",
+      kode_matakuliah: "TI-407",
+      semester: 6,
+      kelas_list: [{ id: 7, nama_kelas: "TI-4A" }],
+      pengajar_list: [
+        { nama_dosen: "Dr. Ahmad Santoso, M.Kom", role: "koordinator" },
+      ],
+    },
+  ],
+  jumat: [
+    {
+      id_jadwal: 8,
+      hari: "jumat",
+      jam_mulai: "09:00:00",
+      jam_selesai: "11:30:00",
+      ruangan: "Lab Jaringan 1",
+      nama_matakuliah: "Keamanan Informasi",
+      kode_matakuliah: "TI-408",
+      semester: 6,
+      kelas_list: [{ id: 8, nama_kelas: "TI-4A" }],
+      pengajar_list: [
+        { nama_dosen: "Dr. Citra Dewi, M.T", role: "koordinator" },
+      ],
+    },
+  ],
+  sabtu: [],
+};
+
+export default function JadwalScreen() {
+  const { isDarkMode, theme } = useTheme();
+  const { token } = useAuth();
+
+  // Get current day of week in Indonesian
+  const currentDayIndex = new Date().getDay();
+  const todayIndoName = INDO_DAYS[currentDayIndex];
+  const defaultDay = DAYS.includes(todayIndoName) ? todayIndoName : "Senin";
+
+  const [selectedDay, setSelectedDay] = useState(defaultDay);
+  const [allRawSchedules, setAllRawSchedules] = useState<JadwalItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [isDemo, setIsDemo] = useState(false);
+
+  const fetchJadwal = async (showLoadingIndicator = true) => {
+    if (showLoadingIndicator) setLoading(true);
+    if (!token) {
+      const mockFlat = Object.values(MOCK_SCHEDULES).flat();
+      setAllRawSchedules(mockFlat);
+      setIsDemo(true);
+      setLoading(false);
+      setRefreshing(false);
+      return;
+    }
+    try {
+      const response = await fetch(`${API_BASE}/kelas-mata-kuliah/me`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = (await response.json()) as any[];
+      const normalized = data.map((item) => ({
+        ...item,
+        nama_matakuliah: item.nama_mk ?? item.nama_matakuliah ?? "",
+        kode_matakuliah: item.kode_mk ?? item.kode_matakuliah ?? "",
+      })) as JadwalItem[];
+      setAllRawSchedules(normalized);
+      setIsDemo(false);
+    } catch {
+      const mockFlat = Object.values(MOCK_SCHEDULES).flat();
+      setAllRawSchedules(mockFlat);
+      setIsDemo(true);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchJadwal(true);
+  }, []);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    fetchJadwal(false);
+  };
+
+  // Filter schedules for the selected day
+  const schedulesForSelectedDay = useMemo(() => {
+    return allRawSchedules.filter(
+      (item) => item.hari?.toLowerCase() === selectedDay.toLowerCase()
+    );
+  }, [allRawSchedules, selectedDay]);
+
+  // Helper to detect if a class is currently active (today and within hours)
+  const isClassActive = (item: JadwalItem) => {
+    if (todayIndoName.toLowerCase() !== item.hari?.toLowerCase()) return false;
+
+    const now = new Date();
+    const [startH, startM] = item.jam_mulai.split(":").map(Number);
+    const [endH, endM] = item.jam_selesai.split(":").map(Number);
+
+    const startTime = new Date();
+    startTime.setHours(startH, startM, 0, 0);
+
+    const endTime = new Date();
+    endTime.setHours(endH, endM, 0, 0);
+
+    return now >= startTime && now <= endTime;
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.bg }]}>
+      <StatusBar style={isDarkMode ? "light" : "dark"} />
+
+      {/* Modern Curved Top Header */}
+      <View style={[styles.headerCard, { backgroundColor: theme.headerBg }]}>
+        {/* Decorative background shapes */}
+        <View style={[styles.circleOverlay1, { backgroundColor: theme.circle1 }]} />
+        <View style={[styles.circleOverlay2, { backgroundColor: theme.circle2 }]} />
+
+        <View style={styles.headerRow}>
+          <View style={styles.headerTitleGroup}>
+            <Text style={styles.headerTitle}>Jadwal Perkuliahan</Text>
+            <Text style={[styles.headerSubtitle, { color: theme.subtitleText }]}>
+              {selectedDay === todayIndoName
+                ? `Hari Ini • ${schedulesForSelectedDay.length} Mata Kuliah`
+                : `Hari ${selectedDay} • ${schedulesForSelectedDay.length} Mata Kuliah`}
+            </Text>
+          </View>
+
+          {isDemo && (
+            <View style={styles.demoBadge}>
+              <IconSymbol name="info.circle" size={12} color="#F59E0B" />
+              <Text style={styles.demoBadgeText}>Demo</Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* Redesigned Day Selector Bar */}
+      <View style={styles.daySelectorWrapper}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.daySelectorScroll}
+        >
+          {DAYS.map((day) => {
+            const isSelected = selectedDay === day;
+            const isToday = day === todayIndoName;
+            const dayClassCount = allRawSchedules.filter(
+              (item) => item.hari?.toLowerCase() === day.toLowerCase()
+            ).length;
+
+            return (
+              <TouchableOpacity
+                key={day}
+                onPress={() => setSelectedDay(day)}
+                style={[
+                  styles.dayCard,
+                  {
+                    backgroundColor: isSelected
+                      ? theme.accent
+                      : theme.cardBg,
+                    borderColor: isSelected
+                      ? theme.accent
+                      : isToday
+                      ? theme.accent
+                      : theme.border,
+                    shadowColor: theme.shadowColor,
+                  },
+                ]}
+                activeOpacity={0.75}
+              >
+                {/* Header row inside day card (Day Name + Today Dot) */}
+                <View style={styles.dayCardHeader}>
+                  <Text
+                    style={[
+                      styles.dayCardName,
+                      {
+                        color: isSelected
+                          ? "#FFFFFF"
+                          : isToday
+                          ? theme.accent
+                          : theme.textPrimary,
+                      },
+                    ]}
+                  >
+                    {day}
+                  </Text>
+                  {isToday && (
+                    <View
+                      style={[
+                        styles.todayBadge,
+                        {
+                          backgroundColor: isSelected
+                            ? "#FFFFFF"
+                            : theme.accent,
+                        },
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          styles.todayBadgeText,
+                          {
+                            color: isSelected
+                              ? theme.accent
+                              : "#FFFFFF",
+                          },
+                        ]}
+                      >
+                        Hari ini
+                      </Text>
+                    </View>
+                  )}
+                </View>
+
+                {/* Subtitle inside day card (Class count badge) */}
+                <View
+                  style={[
+                    styles.countPill,
+                    {
+                      backgroundColor: isSelected
+                        ? "rgba(255, 255, 255, 0.2)"
+                        : isDarkMode
+                        ? "rgba(255, 255, 255, 0.06)"
+                        : "#F1F5F9",
+                    },
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.countPillText,
+                      {
+                        color: isSelected
+                          ? "#FFFFFF"
+                          : dayClassCount > 0
+                          ? theme.textSecondary
+                          : theme.textMuted,
+                      },
+                    ]}
+                  >
+                    {dayClassCount > 0 ? `${dayClassCount} Kelas` : "Libur"}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </View>
+
+      {/* Schedule List Section */}
+      {loading ? (
+        <View style={styles.centered}>
+          <ActivityIndicator size="large" color={theme.accent} />
+          <Text style={[styles.loadingText, { color: theme.textSecondary }]}>
+            Memuat jadwal...
+          </Text>
+        </View>
+      ) : (
+        <FlatList
+          data={schedulesForSelectedDay}
+          keyExtractor={(item) => String(item.id_jadwal)}
+          contentContainerStyle={styles.listContent}
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={theme.accent}
+              colors={[theme.accent]}
+            />
+          }
+          ListEmptyComponent={
+            <View
+              style={[
+                styles.emptyContainer,
+                { backgroundColor: theme.cardBg, borderColor: theme.border },
+              ]}
+            >
+              <View
+                style={[
+                  styles.emptyIconCircle,
+                  { backgroundColor: theme.settingsIconBg },
+                ]}
+              >
+                <IconSymbol
+                  name="calendar"
+                  size={42}
+                  color={theme.settingsIconColor}
+                />
+              </View>
+              <Text style={[styles.emptyTitle, { color: theme.textPrimary }]}>
+                Tidak Ada Perkuliahan
+              </Text>
+              <Text
+                style={[styles.emptySubtitle, { color: theme.textSecondary }]}
+              >
+                Hari {selectedDay} ini Anda bebas dari jadwal perkuliahan.
+                Nikmati waktu luang atau manfaatkan untuk belajar mandiri!
+              </Text>
+            </View>
+          }
+          renderItem={({ item }) => {
+            const active = isClassActive(item);
+            const lecturer =
+              item.pengajar_list && item.pengajar_list.length > 0
+                ? item.pengajar_list[0].nama_dosen
+                : "Dosen Pengampu";
+            const className =
+              item.kelas_list && item.kelas_list.length > 0
+                ? item.kelas_list[0].nama_kelas
+                : "Semua Kelas";
+
+            return (
+              <View
+                style={[
+                  styles.scheduleCard,
+                  {
+                    backgroundColor: theme.cardBg,
+                    borderColor: active ? theme.accent : theme.border,
+                    shadowColor: theme.shadowColor,
+                  },
+                ]}
+              >
+                {/* Active Indicator Accent Bar on the Left */}
+                {active && (
+                  <View
+                    style={[
+                      styles.activeAccentBar,
+                      { backgroundColor: theme.accent },
+                    ]}
+                  />
+                )}
+
+                {/* Left Column: Timeline & Time Badges */}
+                <View style={styles.timelineColumn}>
+                  <Text
+                    style={[styles.timeText, { color: theme.textPrimary }]}
+                  >
+                    {item.jam_mulai.substring(0, 5)}
+                  </Text>
+
+                  {/* Vertical Connecting Line */}
+                  <View
+                    style={[
+                      styles.timeLine,
+                      {
+                        backgroundColor: active
+                          ? theme.accent
+                          : theme.border,
+                      },
+                    ]}
+                  >
+                    <View
+                      style={[
+                        styles.timelineDot,
+                        {
+                          backgroundColor: active
+                            ? theme.accent
+                            : theme.textMuted,
+                        },
+                      ]}
+                    />
+                  </View>
+
+                  <Text
+                    style={[
+                      styles.timeTextMuted,
+                      { color: theme.textMuted },
+                    ]}
+                  >
+                    {item.jam_selesai.substring(0, 5)}
+                  </Text>
+                </View>
+
+                {/* Right Column: Class Details Card */}
+                <View style={styles.cardContent}>
+                  <View style={styles.cardHeaderRow}>
+                    <View
+                      style={[
+                        styles.classBadge,
+                        { backgroundColor: theme.badgeBg },
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          styles.classBadgeText,
+                          { color: theme.badgeText },
+                        ]}
+                      >
+                        {className}
+                      </Text>
+                    </View>
+
+                    {active ? (
+                      <View style={styles.activeBadge}>
+                        <View style={styles.activeDot} />
+                        <Text style={styles.activeBadgeText}>Berlangsung</Text>
+                      </View>
+                    ) : (
+                      <Text style={[styles.semesterText, { color: theme.textMuted }]}>
+                        Semester {item.semester}
+                      </Text>
+                    )}
+                  </View>
+
+                  <Text
+                    style={[styles.courseName, { color: theme.textPrimary }]}
+                  >
+                    {item.nama_matakuliah}
+                  </Text>
+                  <Text
+                    style={[styles.courseCode, { color: theme.textMuted }]}
+                  >
+                    Kode: {item.kode_matakuliah}
+                  </Text>
+
+                  <View
+                    style={[
+                      styles.cardDivider,
+                      { backgroundColor: theme.divider },
+                    ]}
+                  />
+
+                  {/* Lecturer Row */}
+                  <View style={styles.detailRow}>
+                    <View
+                      style={[
+                        styles.detailIconBox,
+                        { backgroundColor: theme.settingsIconBg },
+                      ]}
+                    >
+                      <IconSymbol
+                        name="person.fill"
+                        size={13}
+                        color={theme.settingsIconColor}
+                      />
+                    </View>
+                    <Text
+                      style={[
+                        styles.detailText,
+                        { color: theme.textSecondary },
+                      ]}
+                      numberOfLines={1}
+                    >
+                      {lecturer}
+                    </Text>
+                  </View>
+
+                  {/* Room Location Row */}
+                  <View style={styles.detailRow}>
+                    <View
+                      style={[
+                        styles.detailIconBox,
+                        { backgroundColor: theme.settingsIconBg },
+                      ]}
+                    >
+                      <IconSymbol
+                        name="mappin.and.ellipse"
+                        size={13}
+                        color={theme.settingsIconColor}
+                      />
+                    </View>
+                    <Text
+                      style={[
+                        styles.detailText,
+                        { color: theme.textSecondary },
+                      ]}
+                      numberOfLines={1}
+                    >
+                      Ruangan: {item.ruangan}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            );
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  // Top Header Card
+  headerCard: {
+    height: 170,
+    paddingTop: 56,
+    paddingHorizontal: 24,
+    position: "relative",
+    overflow: "hidden",
+    borderBottomLeftRadius: 28,
+    borderBottomRightRadius: 28,
+  },
+  circleOverlay1: {
+    width: 170,
+    height: 170,
+    borderRadius: 85,
+    opacity: 0.18,
+    position: "absolute",
+    top: -40,
+    right: -30,
+  },
+  circleOverlay2: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    opacity: 0.12,
+    position: "absolute",
+    bottom: -20,
+    left: -20,
+  },
+  headerRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    zIndex: 10,
+  },
+  headerTitleGroup: {
+    flex: 1,
+  },
+  headerTitle: {
+    fontSize: 23,
+    fontWeight: "800",
+    color: "#FFFFFF",
+    letterSpacing: -0.4,
+  },
+  headerSubtitle: {
+    fontSize: 13.5,
+    marginTop: 4,
+    fontWeight: "500",
+  },
+  demoBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#FFFBEB",
+    borderColor: "#FDE68A",
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    gap: 4,
+  },
+  demoBadgeText: {
+    color: "#D97706",
+    fontSize: 11.5,
+    fontWeight: "700",
+  },
+  // Redesigned Day Selector
+  daySelectorWrapper: {
+    marginTop: -32,
+    marginBottom: 12,
+    zIndex: 20,
+  },
+  daySelectorScroll: {
+    paddingHorizontal: 20,
+    gap: 10,
+    paddingVertical: 6,
+  },
+  dayCard: {
+    width: 110,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 18,
+    borderWidth: 1.5,
+    justifyContent: "space-between",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  dayCardHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 8,
+  },
+  dayCardName: {
+    fontSize: 14,
+    fontWeight: "800",
+  },
+  todayBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 8,
+  },
+  todayBadgeText: {
+    fontSize: 9.5,
+    fontWeight: "800",
+  },
+  countPill: {
+    alignSelf: "flex-start",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 10,
+  },
+  countPillText: {
+    fontSize: 11,
+    fontWeight: "700",
+  },
+  // List Content
+  listContent: {
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 40,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  // Empty State Container
+  emptyContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 20,
+    padding: 30,
+    borderRadius: 24,
+    borderWidth: 1,
+  },
+  emptyIconCircle: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: "800",
+    marginBottom: 8,
+  },
+  emptySubtitle: {
+    fontSize: 13.5,
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  // Schedule Cards
+  scheduleCard: {
+    flexDirection: "row",
+    borderRadius: 22,
+    borderWidth: 1.5,
+    marginBottom: 16,
+    padding: 16,
+    position: "relative",
+    overflow: "hidden",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 3,
+  },
+  activeAccentBar: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: 5,
+  },
+  timelineColumn: {
+    width: 54,
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 4,
+  },
+  timeText: {
+    fontSize: 13,
+    fontWeight: "800",
+  },
+  timeTextMuted: {
+    fontSize: 12.5,
+    fontWeight: "600",
+  },
+  timeLine: {
+    width: 2,
+    flex: 1,
+    marginVertical: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+  },
+  timelineDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5,
+    position: "absolute",
+  },
+  cardContent: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  cardHeaderRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 6,
+  },
+  classBadge: {
+    paddingHorizontal: 9,
+    paddingVertical: 4,
+    borderRadius: 9,
+  },
+  classBadgeText: {
+    fontSize: 11.5,
+    fontWeight: "800",
+  },
+  semesterText: {
+    fontSize: 11.5,
+    fontWeight: "600",
+  },
+  activeBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#ECFDF5",
+    paddingHorizontal: 9,
+    paddingVertical: 4,
+    borderRadius: 9,
+    gap: 4,
+  },
+  activeDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: "#10B981",
+  },
+  activeBadgeText: {
+    color: "#10B981",
+    fontSize: 11,
+    fontWeight: "800",
+  },
+  courseName: {
+    fontSize: 16,
+    fontWeight: "800",
+    lineHeight: 22,
+    marginTop: 2,
+  },
+  courseCode: {
+    fontSize: 12,
+    marginTop: 3,
+    fontWeight: "500",
+  },
+  cardDivider: {
+    height: 1,
+    marginVertical: 12,
+  },
+  detailRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 6,
+  },
+  detailIconBox: {
+    width: 24,
+    height: 24,
+    borderRadius: 7,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8,
+  },
+  detailText: {
+    fontSize: 12.5,
+    fontWeight: "600",
+    flex: 1,
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/presensi.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/presensi.tsx
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/profile.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/profile.tsx
@ -0,0 +1,723 @@
+import { useState, useEffect } from "react";
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  Image,
+  Animated,
+  Alert,
+} from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useAuth } from "@/contexts/AuthContext";
+import { useTheme } from "@/contexts/ThemeContext";
+import { router } from "expo-router";
+import { API_BASE } from "@/constants/config";
+
+// Mock data untuk attendance history
+const attendanceData = [
+  {
+    id: 1,
+    course: "Pemrograman Mobile",
+    date: "11 Feb 2025",
+    status: "present",
+    time: "08:00",
+  },
+  {
+    id: 2,
+    course: "Basis Data Lanjut",
+    date: "10 Feb 2025",
+    status: "present",
+    time: "10:30",
+  },
+  {
+    id: 3,
+    course: "Jaringan Komputer",
+    date: "09 Feb 2025",
+    status: "late",
+    time: "09:15",
+  },
+  {
+    id: 4,
+    course: "Sistem Operasi",
+    date: "08 Feb 2025",
+    status: "absent",
+    time: "-",
+  },
+  {
+    id: 5,
+    course: "Kecerdasan Buatan",
+    date: "07 Feb 2025",
+    status: "present",
+    time: "13:00",
+  },
+  {
+    id: 6,
+    course: "Pemrograman Web",
+    date: "06 Feb 2025",
+    status: "present",
+    time: "07:45",
+  },
+];
+
+// Statistik kehadiran
+const stats = {
+  present: 85,
+  late: 10,
+  absent: 5,
+};
+
+// Sun Icon Component
+const SunIcon = ({ color }: { color: string }) => (
+  <View style={{ width: 24, height: 24 }}>
+    <Text style={{ fontSize: 20, textAlign: "center" }}>☀️</Text>
+  </View>
+);
+
+// Moon Icon Component
+const MoonIcon = ({ color }: { color: string }) => (
+  <View style={{ width: 24, height: 24 }}>
+    <Text style={{ fontSize: 20, textAlign: "center" }}>🌙</Text>
+  </View>
+);
+
+export default function ProfileScreen() {
+  const { user, logout } = useAuth();
+  const { isDarkMode, toggleDarkMode, theme } = useTheme();
+  const [activeFilter, setActiveFilter] = useState("all");
+  const [sliderAnim] = useState(new Animated.Value(isDarkMode ? 1 : 0));
+
+  useEffect(() => {
+    Animated.timing(sliderAnim, {
+      toValue: isDarkMode ? 1 : 0,
+      duration: 350,
+      useNativeDriver: false,
+    }).start();
+  }, [isDarkMode]);
+
+  // Interpolate colors
+  const switchBgColor = sliderAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["#73C0FC", "#183153"],
+  });
+
+  const sliderTranslate = sliderAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [2, 32],
+  });
+
+  const filteredData =
+    activeFilter === "all"
+      ? attendanceData
+      : attendanceData.filter((item) => item.status === activeFilter);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "present":
+        return "#10B981";
+      case "late":
+        return "#F59E0B";
+      case "absent":
+        return "#EF4444";
+      default:
+        return "#6B7280";
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case "present":
+        return "Hadir";
+      case "late":
+        return "Terlambat";
+      case "absent":
+        return "Sakit/Alpha";
+      default:
+        return status;
+    }
+  };
+
+  const handleProfileImagePress = () => {
+    Alert.alert(
+      "Register Ulang Wajah",
+      "Apakah Anda ingin mengganti wajah dan meregister ulang?",
+      [
+        {
+          text: "Batal",
+          style: "cancel",
+        },
+        {
+          text: "Ya",
+          onPress: () => router.push("/register-foto"),
+        },
+      ]
+    );
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.bg }]}>
+      <StatusBar style={isDarkMode ? "light" : "dark"} />
+
+      <ScrollView
+        style={styles.scrollView}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {/* Header Background */}
+        <View style={[styles.header, { backgroundColor: theme.headerBg }]}>
+          {/* Decorative Circles */}
+          <View style={[styles.circle1, { backgroundColor: theme.circle1 }]} />
+          <View style={[styles.circle2, { backgroundColor: theme.circle2 }]} />
+
+          <View style={styles.headerTextContainer}>
+            <Text style={styles.headerTitle}>Profil Mahasiswa</Text>
+            <Text style={[styles.headerSubtitle, { color: theme.subtitleText }]}>
+              Face Recognition System
+            </Text>
+          </View>
+        </View>
+
+        {/* Profile Card */}
+        <View
+          style={[
+            styles.profileCard,
+            {
+              backgroundColor: theme.cardBg,
+              shadowColor: theme.shadowColor,
+            },
+          ]}
+        >
+          <View style={styles.profileImageContainer}>
+            <TouchableOpacity onPress={handleProfileImagePress} activeOpacity={0.8}>
+              <View style={[styles.outerRing, { borderColor: theme.outerRing }]}>
+                <View style={[styles.innerRing, { backgroundColor: theme.innerRing }]}>
+                  <Image
+                    source={{
+                      uri: user?.nim 
+                        ? `${API_BASE}/mahasiswa/nim/${user.nim}/foto?t=${new Date().getTime()}`
+                        : "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=250&auto=format&fit=crop",
+                    }}
+                    style={styles.profileImage}
+                  />
+                </View>
+              </View>
+            </TouchableOpacity>
+            <View style={styles.statusBadge}>
+              <View style={styles.statusDot} />
+            </View>
+          </View>
+
+          <Text style={[styles.studentName, { color: theme.textPrimary }]}>
+            {user?.nama_mahasiswa ?? user?.name ?? "Mahasiswa"}
+          </Text>
+          <Text style={[styles.studentNim, { color: theme.textSecondary }]}>
+            NIM: {user?.nim ?? "-"}
+          </Text>
+
+          <View style={[styles.statusPill, { backgroundColor: theme.statusPillBg }]}>
+            <Text style={[styles.statusPillText, { color: theme.statusPillText }]}>
+              Mahasiswa Aktif
+            </Text>
+          </View>
+
+          <View style={[styles.divider, { backgroundColor: theme.border }]} />
+
+          {/* Student Details Grid */}
+          <View style={styles.detailsGrid}>
+            <View style={styles.detailsRow}>
+              <Text style={[styles.detailsLabel, { color: theme.textSecondary }]}>
+                Kelas
+              </Text>
+              <Text style={[styles.detailsValue, { color: theme.textPrimary }]}>
+                {user?.nama_kelas ?? "-"}
+              </Text>
+            </View>
+            <View style={styles.detailsRow}>
+              <Text style={[styles.detailsLabel, { color: theme.textSecondary }]}>
+                Email
+              </Text>
+              <Text
+                style={[styles.detailsValue, { color: theme.textPrimary }]}
+                numberOfLines={1}
+              >
+                {user?.email ?? "-"}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Dark Mode Switch */}
+        <View
+          style={[
+            styles.switchCard,
+            {
+              backgroundColor: theme.cardBg,
+              shadowColor: theme.shadowColor,
+            },
+          ]}
+        >
+          <View style={styles.switchRow}>
+            <View style={styles.switchLeft}>
+              <View
+                style={[
+                  styles.settingsIconWrapper,
+                  { backgroundColor: theme.settingsIconBg },
+                ]}
+              >
+                <IconSymbol
+                  name={isDarkMode ? "moon.fill" : "sun.max.fill"}
+                  size={18}
+                  color={theme.settingsIconColor}
+                />
+              </View>
+              <Text style={[styles.switchLabel, { color: theme.textPrimary }]}>
+                Mode
+              </Text>
+            </View>
+
+            {/* Custom Toggle Switch */}
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={toggleDarkMode}
+              style={styles.switchTouchable}
+            >
+              <Animated.View
+                style={[
+                  styles.switchTrack,
+                  { backgroundColor: switchBgColor },
+                ]}
+              >
+                {/* Sun icon */}
+                <View style={[styles.switchIcon, { left: 36 }]}>
+                  <Text style={{ fontSize: 14 }}>☀️</Text>
+                </View>
+                {/* Moon icon */}
+                <View style={[styles.switchIcon, { left: 5 }]}>
+                  <Text style={{ fontSize: 14 }}>🌙</Text>
+                </View>
+                <Animated.View
+                  style={[
+                    styles.switchThumb,
+                    { transform: [{ translateX: sliderTranslate }] },
+                  ]}
+                />
+              </Animated.View>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {/* Settings & System Menu */}
+        {/* 
+<View style={styles.settingsSection}>
+  <Text style={[styles.settingsSectionTitle, { color: theme.sectionTitle }]}>
+    Pengaturan & Bantuan
+  </Text>
+
+  <View
+    style={[
+      styles.settingsCard,
+      {
+        backgroundColor: theme.settingsCardBg,
+        shadowColor: theme.shadowColor,
+      },
+    ]}
+  >
+
+    <View style={[styles.settingsDivider, { backgroundColor: theme.border }]} />
+
+    <TouchableOpacity style={styles.settingsItem} activeOpacity={0.6}>
+      <View style={styles.settingsItemLeft}>
+        <View
+          style={[
+            styles.settingsIconWrapper,
+            { backgroundColor: theme.settingsIconBg },
+          ]}
+        >
+          <IconSymbol
+            name="info.circle.fill"
+            size={18}
+            color={theme.settingsIconColor}
+          />
+        </View>
+
+        <Text
+          style={[
+            styles.settingsItemText,
+            { color: theme.textPrimary },
+          ]}
+        >
+          Hubungi Admin
+        </Text>
+      </View>
+
+      <IconSymbol
+        name="chevron.right"
+        size={16}
+        color={theme.chevronColor}
+      />
+    </TouchableOpacity>
+
+    <View
+      style={[
+        styles.settingsDivider,
+        { backgroundColor: theme.border },
+      ]}
+    />
+
+    <TouchableOpacity style={styles.settingsItem} activeOpacity={0.6}>
+      <View style={styles.settingsItemLeft}>
+        <View
+          style={[
+            styles.settingsIconWrapper,
+            { backgroundColor: theme.settingsIconBg },
+          ]}
+        >
+          <IconSymbol
+            name="gearshape.fill"
+            size={18}
+            color={theme.settingsIconColor}
+          />
+        </View>
+
+        <Text
+          style={[
+            styles.settingsItemText,
+            { color: theme.textPrimary },
+          ]}
+        >
+          Tentang Aplikasi
+        </Text>
+      </View>
+
+      <IconSymbol
+        name="chevron.right"
+        size={16}
+        color={theme.chevronColor}
+      />
+    </TouchableOpacity>
+
+  </View>
+</View>
+*/}
+
+        {/* Logout Button */}
+        <TouchableOpacity
+          style={[
+            styles.logoutButton,
+            {
+              backgroundColor: theme.logoutBg,
+              borderColor: theme.logoutBorder,
+            },
+          ]}
+          activeOpacity={0.8}
+          onPress={async () => {
+            await logout();
+            router.replace("/login");
+          }}
+        >
+          <View style={[styles.logoutIconContainer, { backgroundColor: theme.logoutIconBg }]}>
+            <IconSymbol name="arrow.right.square" size={20} color="#EF4444" />
+          </View>
+          <Text style={styles.logoutText}>Keluar dari Akun</Text>
+          <IconSymbol name="chevron.right" size={18} color="#EF4444" />
+        </TouchableOpacity>
+
+        <View style={styles.bottomPadding} />
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#F8FAFC",
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 40,
+  },
+  header: {
+    backgroundColor: "#2563EB",
+    height: 220,
+    paddingTop: 60,
+    paddingHorizontal: 24,
+    position: "relative",
+    overflow: "hidden",
+  },
+  circle1: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: "#3B82F6",
+    opacity: 0.2,
+    position: "absolute",
+    top: -40,
+    right: -40,
+  },
+  circle2: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    backgroundColor: "#60A5FA",
+    opacity: 0.15,
+    position: "absolute",
+    bottom: 20,
+    left: -30,
+  },
+  headerTextContainer: {
+    zIndex: 10,
+  },
+  headerTitle: {
+    fontSize: 24,
+    fontWeight: "800",
+    color: "#FFFFFF",
+    letterSpacing: 0.5,
+  },
+  headerSubtitle: {
+    fontSize: 14,
+    color: "#93C5FD",
+    marginTop: 4,
+    fontWeight: "500",
+  },
+  profileCard: {
+    backgroundColor: "#FFFFFF",
+    marginHorizontal: 20,
+    borderRadius: 24,
+    padding: 24,
+    alignItems: "center",
+    marginTop: -80,
+    shadowColor: "#1E3A8A",
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.06,
+    shadowRadius: 15,
+    elevation: 6,
+  },
+  profileImageContainer: {
+    position: "relative",
+    marginBottom: 16,
+  },
+  outerRing: {
+    width: 114,
+    height: 114,
+    borderRadius: 57,
+    borderWidth: 2,
+    borderColor: "#DBEAFE",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  innerRing: {
+    width: 104,
+    height: 104,
+    borderRadius: 52,
+    backgroundColor: "#FFFFFF",
+    padding: 3,
+  },
+  profileImage: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 49,
+  },
+  statusBadge: {
+    position: "absolute",
+    bottom: 4,
+    right: 4,
+    backgroundColor: "#FFFFFF",
+    borderRadius: 14,
+    padding: 3,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  statusDot: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: "#10B981",
+  },
+  studentName: {
+    fontSize: 20,
+    fontWeight: "800",
+    color: "#0F172A",
+    marginBottom: 4,
+    textAlign: "center",
+  },
+  studentNim: {
+    fontSize: 14,
+    color: "#64748B",
+    fontWeight: "500",
+    marginBottom: 12,
+  },
+  statusPill: {
+    backgroundColor: "#DCFCE7",
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 100,
+    marginBottom: 20,
+  },
+  statusPillText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: "#15803D",
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "#F1F5F9",
+    width: "100%",
+    marginBottom: 16,
+  },
+  detailsGrid: {
+    width: "100%",
+    gap: 12,
+  },
+  detailsRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  detailsLabel: {
+    fontSize: 13,
+    color: "#64748B",
+    fontWeight: "500",
+  },
+  detailsValue: {
+    fontSize: 14,
+    color: "#0F172A",
+    fontWeight: "600",
+  },
+  // Dark Mode Switch Card
+  switchCard: {
+    backgroundColor: "#FFFFFF",
+    marginHorizontal: 20,
+    marginTop: 16,
+    borderRadius: 20,
+    padding: 16,
+    shadowColor: "#1E3A8A",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.04,
+    shadowRadius: 10,
+    elevation: 3,
+  },
+  switchRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  switchLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  switchLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0F172A",
+  },
+  switchTouchable: {
+    padding: 4,
+  },
+  switchTrack: {
+    width: 64,
+    height: 34,
+    borderRadius: 30,
+    justifyContent: "center",
+    position: "relative",
+  },
+  switchThumb: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: "#e8e8e8",
+    position: "absolute",
+    bottom: 2,
+    zIndex: 2,
+  },
+  switchIcon: {
+    position: "absolute",
+    top: 5,
+    zIndex: 1,
+  },
+  // Settings
+  settingsSection: {
+    marginTop: 24,
+    paddingHorizontal: 20,
+  },
+  settingsSectionTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: "#0F172A",
+    marginBottom: 12,
+  },
+  settingsCard: {
+    backgroundColor: "#FFFFFF",
+    borderRadius: 20,
+    paddingHorizontal: 16,
+    shadowColor: "#1E3A8A",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.04,
+    shadowRadius: 10,
+    elevation: 3,
+  },
+  settingsItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 14,
+  },
+  settingsItemLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  settingsIconWrapper: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  settingsItemText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0F172A",
+  },
+  settingsDivider: {
+    height: 1,
+    backgroundColor: "#F1F5F9",
+  },
+  // Logout
+  logoutButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#FEF2F2",
+    marginHorizontal: 20,
+    marginTop: 24,
+    padding: 16,
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: "#FEE2E2",
+  },
+  logoutIconContainer: {
+    width: 38,
+    height: 38,
+    borderRadius: 10,
+    backgroundColor: "#FEE2E2",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  logoutText: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: "700",
+    color: "#EF4444",
+  },
+  bottomPadding: {
+    height: 40,
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/app/(tabs)/register-foto.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/(tabs)/register-foto.tsx
--- a/facerecognition_presensi/AndroidFolder/app/_layout.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/_layout.tsx
@ -0,0 +1,80 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { Stack, useRouter, useSegments } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { useEffect } from "react";
+import { View } from "react-native";
+import "react-native-reanimated";
+
+import { useColorScheme } from "@/hooks/use-color-scheme";
+import { AuthProvider, useAuth } from "@/contexts/AuthContext";
+import { ThemeProvider as AppThemeProvider } from "@/contexts/ThemeContext";
+
+export const unstable_settings = {
+  initialRouteName: "login",
+};
+
+// ── Redirect ke /login jika tidak punya token ──────────────────────────────
+function AuthGuard() {
+  const { token, isLoading } = useAuth();
+  const router = useRouter();
+  const segments = useSegments();
+
+  useEffect(() => {
+    // Jangan redirect saat masih loading (hydrate dari AsyncStorage)
+    if (isLoading) return;
+
+    const inTabs = segments[0] === "(tabs)";
+    const inLogin = segments[0] === "login";
+
+    if (!token && inTabs) {
+      router.replace("/login");
+    } else if (token && inLogin) {
+      router.replace("/(tabs)");
+    }
+  }, [token, isLoading, segments, router]);
+
+  return null;
+}
+
+// ── Setiap sentuhan di mana saja akan mereset timer idle ───────────────────
+function ActivityWrapper({ children }: { children: React.ReactNode }) {
+  const { updateActivity } = useAuth();
+  return (
+    <View style={{ flex: 1 }} onTouchStart={updateActivity}>
+      {children}
+    </View>
+  );
+}
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <AppThemeProvider>
+      <AuthProvider>
+        <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+          <AuthGuard />
+          <ActivityWrapper>
+            <Stack>
+              <Stack.Screen name="login" options={{ headerShown: false }} />
+              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+              <Stack.Screen
+                name="modal"
+                options={{ presentation: "modal", title: "Modal" }}
+              />
+              <Stack.Screen
+                name="ganti_password"
+                options={{ title: "Ganti Password" }}
+              />
+            </Stack>
+          </ActivityWrapper>
+          <StatusBar style="auto" />
+        </ThemeProvider>
+      </AuthProvider>
+    </AppThemeProvider>
+  );
+}
--- a/facerecognition_presensi/AndroidFolder/app/ganti_password.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/ganti_password.tsx
@ -0,0 +1,354 @@
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { StatusBar } from 'expo-status-bar';
+import { useMemo, useState } from 'react';
+import {
+    Dimensions,
+    KeyboardAvoidingView,
+    Platform,
+    ScrollView,
+    StyleSheet,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View
+} from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+export default function ChangePasswordScreen() {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const [showCurrent, setShowCurrent] = useState(false);
+  const [showNew, setShowNew] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  // Validasi sederhana kekuatan password
+  const passwordChecks = useMemo(() => {
+    return {
+      length: newPassword.length >= 8,
+      upper: /[A-Z]/.test(newPassword),
+      number: /[0-9]/.test(newPassword),
+      match: newPassword.length > 0 && newPassword === confirmPassword,
+    };
+  }, [newPassword, confirmPassword]);
+
+  const isFormValid =
+    currentPassword.length > 0 &&
+    passwordChecks.length &&
+    passwordChecks.upper &&
+    passwordChecks.number &&
+    passwordChecks.match;
+
+  const handleChangePassword = () => {
+    if (!isFormValid) return;
+    // Handle change password logic
+    console.log('Change password pressed');
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <StatusBar style="dark" />
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Header */}
+        <View style={styles.headerContainer}>
+          <View style={styles.logoCircle}>
+            <IconSymbol name="key.fill" size={32} color="#3B82F6" />
+          </View>
+          <Text style={styles.welcomeText}>Buat Password Baru</Text>
+          <Text style={styles.subtitleText}>
+            Ini adalah login pertama Anda.{'\n'}Silakan ganti password default dari admin.
+          </Text>
+        </View>
+
+        {/* Form Card */}
+        <View style={styles.formCard}>
+          {/* Current / Default Password */}
+          <View style={styles.inputWrapper}>
+            <Text style={styles.inputLabel}>PASSWORD SAAT INI (DEFAULT)</Text>
+            <View style={styles.inputContainer}>
+              <IconSymbol name="lock" size={18} color="#93C5FD" style={styles.inputIcon} />
+              <TextInput
+                style={styles.input}
+                value={currentPassword}
+                onChangeText={setCurrentPassword}
+                placeholder="Masukkan password default"
+                placeholderTextColor="#9CA3AF"
+                secureTextEntry={!showCurrent}
+              />
+              <TouchableOpacity
+                onPress={() => setShowCurrent(!showCurrent)}
+                style={styles.eyeIcon}
+              >
+                <IconSymbol
+                  name={showCurrent ? "eye.slash" : "eye"}
+                  size={20}
+                  color="#9CA3AF"
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* New Password */}
+          <View style={styles.inputWrapper}>
+            <Text style={styles.inputLabel}>PASSWORD BARU</Text>
+            <View style={styles.inputContainer}>
+              <IconSymbol name="lock.rotation" size={18} color="#93C5FD" style={styles.inputIcon} />
+              <TextInput
+                style={styles.input}
+                value={newPassword}
+                onChangeText={setNewPassword}
+                placeholder="Buat password baru"
+                placeholderTextColor="#9CA3AF"
+                secureTextEntry={!showNew}
+              />
+              <TouchableOpacity
+                onPress={() => setShowNew(!showNew)}
+                style={styles.eyeIcon}
+              >
+                <IconSymbol
+                  name={showNew ? "eye.slash" : "eye"}
+                  size={20}
+                  color="#9CA3AF"
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Confirm New Password */}
+          <View style={styles.inputWrapper}>
+            <Text style={styles.inputLabel}>KONFIRMASI PASSWORD BARU</Text>
+            <View style={styles.inputContainer}>
+              <IconSymbol name="checkmark.shield" size={18} color="#93C5FD" style={styles.inputIcon} />
+              <TextInput
+                style={styles.input}
+                value={confirmPassword}
+                onChangeText={setConfirmPassword}
+                placeholder="Ulangi password baru"
+                placeholderTextColor="#9CA3AF"
+                secureTextEntry={!showConfirm}
+              />
+              <TouchableOpacity
+                onPress={() => setShowConfirm(!showConfirm)}
+                style={styles.eyeIcon}
+              >
+                <IconSymbol
+                  name={showConfirm ? "eye.slash" : "eye"}
+                  size={20}
+                  color="#9CA3AF"
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Password Requirements Checklist */}
+          <View style={styles.checklistContainer}>
+            <ChecklistItem label="Minimal 8 karakter" checked={passwordChecks.length} />
+            <ChecklistItem label="Mengandung huruf besar" checked={passwordChecks.upper} />
+            <ChecklistItem label="Mengandung angka" checked={passwordChecks.number} />
+            <ChecklistItem label="Password baru cocok" checked={passwordChecks.match} />
+          </View>
+
+          {/* Submit Button */}
+          <TouchableOpacity
+            style={[styles.submitButton, !isFormValid && styles.submitButtonDisabled]}
+            onPress={handleChangePassword}
+            activeOpacity={0.85}
+            disabled={!isFormValid}
+          >
+            <Text style={styles.submitButtonText}>Simpan &amp; Lanjutkan</Text>
+          </TouchableOpacity>
+
+          {/* Info note */}
+          <View style={styles.infoBox}>
+            <IconSymbol name="info.circle" size={16} color="#60A5FA" />
+            <Text style={styles.infoText}>
+              Anda tidak dapat melanjutkan ke aplikasi sebelum mengganti password default ini.
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+function ChecklistItem({ label, checked }: { label: string; checked: boolean }) {
+  return (
+    <View style={itemStyles.row}>
+      <View style={[itemStyles.dot, checked && itemStyles.dotActive]}>
+        {checked && <IconSymbol name="checkmark" size={10} color="#fff" />}
+      </View>
+      <Text style={[itemStyles.label, checked && itemStyles.labelActive]}>{label}</Text>
+    </View>
+  );
+}
+
+const itemStyles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  dot: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    borderColor: '#CBD5E1',
+    marginRight: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dotActive: {
+    backgroundColor: '#3B82F6',
+    borderColor: '#3B82F6',
+  },
+  label: {
+    fontSize: 12.5,
+    color: '#94A3B8',
+  },
+  labelActive: {
+    color: '#1E3A8A',
+    fontWeight: '600',
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#EFF6FF',
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: 40,
+  },
+  headerContainer: {
+    alignItems: 'center',
+    paddingTop: 70,
+    paddingBottom: 32,
+    paddingHorizontal: 30,
+  },
+  logoCircle: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 20,
+    shadowColor: '#3B82F6',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  welcomeText: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1E3A8A',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitleText: {
+    fontSize: 13.5,
+    color: '#60A5FA',
+    fontWeight: '400',
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  formCard: {
+    backgroundColor: '#fff',
+    marginHorizontal: 24,
+    borderRadius: 24,
+    padding: 28,
+    shadowColor: '#3B82F6',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.08,
+    shadowRadius: 20,
+    elevation: 3,
+  },
+  inputWrapper: {
+    marginBottom: 18,
+  },
+  inputLabel: {
+    fontSize: 11,
+    color: '#60A5FA',
+    fontWeight: '700',
+    marginBottom: 8,
+    letterSpacing: 0.5,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1.5,
+    borderColor: '#DBEAFE',
+    borderRadius: 14,
+    backgroundColor: '#F8FAFF',
+    paddingHorizontal: 14,
+    height: 52,
+  },
+  inputIcon: {
+    marginRight: 10,
+  },
+  input: {
+    flex: 1,
+    fontSize: 15,
+    color: '#1E293B',
+    height: '100%',
+  },
+  eyeIcon: {
+    padding: 4,
+  },
+  checklistContainer: {
+    backgroundColor: '#F8FAFF',
+    borderRadius: 14,
+    padding: 16,
+    marginTop: 4,
+    marginBottom: 24,
+  },
+  submitButton: {
+    backgroundColor: '#3B82F6',
+    height: 54,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#3B82F6',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.35,
+    shadowRadius: 12,
+    elevation: 5,
+    marginBottom: 20,
+  },
+  submitButtonDisabled: {
+    backgroundColor: '#BFDBFE',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  submitButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '700',
+    letterSpacing: 0.3,
+  },
+  infoBox: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    backgroundColor: '#EFF6FF',
+    borderRadius: 12,
+    padding: 12,
+    gap: 8,
+  },
+  infoText: {
+    flex: 1,
+    fontSize: 12,
+    color: '#3B82F6',
+    lineHeight: 17,
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/app/login.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/login.tsx
@ -0,0 +1,467 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { StatusBar } from "expo-status-bar";
+import { useState, useEffect } from "react";
+import {
+  ActivityIndicator,
+  Dimensions,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { router } from "expo-router";
+import { useAuth } from "@/contexts/AuthContext";
+import * as SecureStore from "expo-secure-store";
+
+const { width } = Dimensions.get("window");
+
+// Secure storage keys for remembered credentials
+const SECURE_KEYS = {
+  EMAIL: "remembered_email",
+  PASSWORD: "remembered_password",
+  REMEMBER: "remember_remember",
+} as const;
+
+export default function LoginScreen() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [remember, setRemember] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  // Load saved credentials on mount
+  useEffect(() => {
+    const loadSavedCredentials = async () => {
+      try {
+        const [savedEmail, savedPassword, savedRemember] = await Promise.all([
+          SecureStore.getItemAsync(SECURE_KEYS.EMAIL),
+          SecureStore.getItemAsync(SECURE_KEYS.PASSWORD),
+          SecureStore.getItemAsync(SECURE_KEYS.REMEMBER),
+        ]);
+
+        if (savedEmail) setEmail(savedEmail);
+        if (savedPassword) setPassword(savedPassword);
+        if (savedRemember === "true") {
+          setRemember(true);
+        }
+      } catch (e) {
+        console.error("Failed to load saved credentials:", e);
+      } finally {
+        setIsHydrated(true);
+      }
+    };
+
+    loadSavedCredentials();
+  }, []);
+
+  // Save credentials when remember is toggled or on successful login
+  const saveCredentials = async () => {
+    try {
+      if (remember) {
+        await Promise.all([
+          SecureStore.setItemAsync(SECURE_KEYS.EMAIL, email),
+          SecureStore.setItemAsync(SECURE_KEYS.PASSWORD, password),
+          SecureStore.setItemAsync(SECURE_KEYS.REMEMBER, "true"),
+        ]);
+      } else {
+        await Promise.all([
+          SecureStore.deleteItemAsync(SECURE_KEYS.EMAIL),
+          SecureStore.deleteItemAsync(SECURE_KEYS.PASSWORD),
+          SecureStore.deleteItemAsync(SECURE_KEYS.REMEMBER),
+        ]);
+      }
+    } catch (e) {
+      console.error("Failed to save credentials:", e);
+    }
+  };
+
+  const handleLogin = async () => {
+    if (!email || !password) {
+      setError("Email dan password wajib diisi");
+      return;
+    }
+    setError(null);
+    setIsLoading(true);
+    try {
+      await login(email, password);
+      // Save credentials if "remember me" is checked
+      await saveCredentials();
+      router.replace("/(tabs)");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Terjadi kesalahan");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Don't render form until credentials are loaded from secure storage
+  if (!isHydrated) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    );
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={styles.container}
+    >
+      <StatusBar style="dark" />
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Header */}
+        <View style={styles.headerContainer}>
+          <View style={styles.logoCircle}>
+            <IconSymbol name="lock.fill" size={32} color="#3B82F6" />
+          </View>
+          <Text style={styles.welcomeText}>Selamat Datang</Text>
+          <Text style={styles.subtitleText}>Masuk untuk melanjutkan</Text>
+        </View>
+
+        {/* Form Card */}
+        <View style={styles.formCard}>
+          {/* Error Banner */}
+          {error && (
+            <View style={styles.errorBanner}>
+              <Text style={styles.errorText}>{error}</Text>
+            </View>
+          )}
+          {/* Email Input */}
+          <View style={styles.inputWrapper}>
+            <Text style={styles.inputLabel}>EMAIL</Text>
+            <View style={styles.inputContainer}>
+              <IconSymbol
+                name="envelope"
+                size={18}
+                color="#93C5FD"
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                value={email}
+                onChangeText={setEmail}
+                placeholder="nama@email.com"
+                placeholderTextColor="#9CA3AF"
+                keyboardType="email-address"
+                autoCapitalize="none"
+              />
+            </View>
+          </View>
+
+          {/* Password Input */}
+          <View style={styles.inputWrapper}>
+            <Text style={styles.inputLabel}>PASSWORD</Text>
+            <View style={styles.inputContainer}>
+              <IconSymbol
+                name="lock"
+                size={18}
+                color="#93C5FD"
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                value={password}
+                onChangeText={setPassword}
+                placeholder="Masukkan password"
+                placeholderTextColor="#9CA3AF"
+                secureTextEntry={!showPassword}
+              />
+              <TouchableOpacity
+                onPress={() => setShowPassword(!showPassword)}
+                style={styles.eyeIcon}
+              >
+                <IconSymbol
+                  name={showPassword ? "eye.slash" : "eye"}
+                  size={20}
+                  color="#9CA3AF"
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Remember me + Forgot password */}
+          <View style={styles.optionsRow}>
+            <TouchableOpacity
+              style={styles.rememberContainer}
+              onPress={() => setRemember(!remember)}
+            >
+              <View
+                style={[styles.checkbox, remember && styles.checkboxActive]}
+              >
+                {remember && (
+                  <IconSymbol name="checkmark" size={12} color="#fff" />
+                )}
+              </View>
+              <Text style={styles.rememberText}>Ingat saya</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity>
+              <Text style={styles.forgotText}>Lupa password?</Text>
+            </TouchableOpacity>
+          </View>
+
+          {/* Login Button */}
+          <TouchableOpacity
+            style={[styles.loginButton, isLoading && { opacity: 0.75 }]}
+            onPress={handleLogin}
+            activeOpacity={0.85}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <ActivityIndicator color="#fff" />
+            ) : (
+              <Text style={styles.loginButtonText}>Masuk</Text>
+            )}
+          </TouchableOpacity>
+
+          {/* Register New Button */}
+          {/* <TouchableOpacity
+            style={styles.registerButton}
+            onPress={() => router.push("/register-foto")}
+            activeOpacity={0.8}
+          >
+            <View style={styles.registerButtonContent}>
+              <IconSymbol name="person.badge.plus" size={20} color="#3B82F6" />
+              <Text style={styles.registerButtonText}>Register Wajah Baru</Text>
+            </View>
+            <IconSymbol name="chevron.right" size={18} color="#93C5FD" />
+          </TouchableOpacity> */}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    backgroundColor: "#EFF6FF",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  container: {
+    flex: 1,
+    backgroundColor: "#EFF6FF", // biru sangat muda
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: 40,
+  },
+  headerContainer: {
+    alignItems: "center",
+    paddingTop: 80,
+    paddingBottom: 40,
+    paddingHorizontal: 30,
+  },
+  logoCircle: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: "#fff",
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 20,
+    shadowColor: "#3B82F6",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  welcomeText: {
+    fontSize: 26,
+    fontWeight: "700",
+    color: "#1E3A8A",
+    marginBottom: 6,
+  },
+  subtitleText: {
+    fontSize: 14,
+    color: "#60A5FA",
+    fontWeight: "400",
+  },
+  formCard: {
+    backgroundColor: "#fff",
+    marginHorizontal: 24,
+    borderRadius: 24,
+    padding: 28,
+    shadowColor: "#3B82F6",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.08,
+    shadowRadius: 20,
+    elevation: 3,
+  },
+  inputWrapper: {
+    marginBottom: 20,
+  },
+  inputLabel: {
+    fontSize: 11,
+    color: "#60A5FA",
+    fontWeight: "700",
+    marginBottom: 8,
+    letterSpacing: 0.5,
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1.5,
+    borderColor: "#DBEAFE",
+    borderRadius: 14,
+    backgroundColor: "#F8FAFF",
+    paddingHorizontal: 14,
+    height: 52,
+  },
+  inputIcon: {
+    marginRight: 10,
+  },
+  input: {
+    flex: 1,
+    fontSize: 15,
+    color: "#1E293B",
+    height: "100%",
+  },
+  eyeIcon: {
+    padding: 4,
+  },
+  optionsRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  rememberContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  checkbox: {
+    width: 18,
+    height: 18,
+    borderRadius: 5,
+    borderWidth: 1.5,
+    borderColor: "#93C5FD",
+    marginRight: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  checkboxActive: {
+    backgroundColor: "#3B82F6",
+    borderColor: "#3B82F6",
+  },
+  rememberText: {
+    fontSize: 13,
+    color: "#475569",
+  },
+  forgotText: {
+    fontSize: 13,
+    color: "#3B82F6",
+    fontWeight: "600",
+  },
+  loginButton: {
+    backgroundColor: "#3B82F6",
+    height: 54,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#3B82F6",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.35,
+    shadowRadius: 12,
+    elevation: 5,
+    marginBottom: 16,
+  },
+  loginButtonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "700",
+    letterSpacing: 0.3,
+  },
+  registerButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: "#EFF6FF",
+    borderWidth: 1.5,
+    borderColor: "#DBEAFE",
+    borderRadius: 14,
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+  },
+  registerButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  registerButtonText: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#3B82F6",
+  },
+  errorBanner: {
+    backgroundColor: "#FEF2F2",
+    borderWidth: 1,
+    borderColor: "#FECACA",
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 16,
+  },
+  errorText: {
+    color: "#DC2626",
+    fontSize: 13,
+    fontWeight: "500",
+    textAlign: "center",
+  },
+  dividerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: "#DBEAFE",
+  },
+  dividerText: {
+    fontSize: 12,
+    color: "#93C5FD",
+    marginHorizontal: 12,
+  },
+  socialContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 16,
+    marginBottom: 24,
+  },
+  socialButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    backgroundColor: "#F0F6FF",
+    borderWidth: 1,
+    borderColor: "#DBEAFE",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  signUpContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  signUpText: {
+    fontSize: 14,
+    color: "#64748B",
+  },
+  signUpLink: {
+    fontSize: 14,
+    color: "#3B82F6",
+    fontWeight: "700",
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/app/modal.tsx
+++ b/facerecognition_presensi/AndroidFolder/app/modal.tsx
@ -0,0 +1,29 @@
+import { Link } from 'expo-router';
+import { StyleSheet } from 'react-native';
+
+import { ThemedText } from '@/components/themed-text';
+import { ThemedView } from '@/components/themed-view';
+
+export default function ModalScreen() {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText type="title">This is a modal</ThemedText>
+      <Link href="/" dismissTo style={styles.link}>
+        <ThemedText type="link">Go to home screen</ThemedText>
+      </Link>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/assets/images/android-icon-background.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/android-icon-background.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/android-icon-foreground.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/android-icon-foreground.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/android-icon-monochrome.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/android-icon-monochrome.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/favicon.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/favicon.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/icon.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/icon.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/partial-react-logo.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/partial-react-logo.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/react-logo.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/react-logo.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/react-logo@2x.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/react-logo@2x.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/react-logo@3x.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/react-logo@3x.png
--- a/facerecognition_presensi/AndroidFolder/assets/images/splash-icon.png
+++ b/facerecognition_presensi/AndroidFolder/assets/images/splash-icon.png
--- a/facerecognition_presensi/AndroidFolder/components/external-link.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/external-link.tsx
@ -0,0 +1,25 @@
+import { Href, Link } from 'expo-router';
+import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
+import { type ComponentProps } from 'react';
+
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
+
+export function ExternalLink({ href, ...rest }: Props) {
+  return (
+    <Link
+      target="_blank"
+      {...rest}
+      href={href}
+      onPress={async (event) => {
+        if (process.env.EXPO_OS !== 'web') {
+          // Prevent the default behavior of linking to the default browser on native.
+          event.preventDefault();
+          // Open the link in an in-app browser.
+          await openBrowserAsync(href, {
+            presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
+          });
+        }
+      }}
+    />
+  );
+}
--- a/facerecognition_presensi/AndroidFolder/components/haptic-tab.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/haptic-tab.tsx
@ -0,0 +1,18 @@
+import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
+import { PlatformPressable } from '@react-navigation/elements';
+import * as Haptics from 'expo-haptics';
+
+export function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={(ev) => {
+        if (process.env.EXPO_OS === 'ios') {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}
--- a/facerecognition_presensi/AndroidFolder/components/hello-wave.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/hello-wave.tsx
@ -0,0 +1,19 @@
+import Animated from 'react-native-reanimated';
+
+export function HelloWave() {
+  return (
+    <Animated.Text
+      style={{
+        fontSize: 28,
+        lineHeight: 32,
+        marginTop: -6,
+        animationName: {
+          '50%': { transform: [{ rotate: '25deg' }] },
+        },
+        animationIterationCount: 4,
+        animationDuration: '300ms',
+      }}>
+      👋
+    </Animated.Text>
+  );
+}
--- a/facerecognition_presensi/AndroidFolder/components/parallax-scroll-view.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/parallax-scroll-view.tsx
@ -0,0 +1,79 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollOffset,
+} from 'react-native-reanimated';
+
+import { ThemedView } from '@/components/themed-view';
+import { useColorScheme } from '@/hooks/use-color-scheme';
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+const HEADER_HEIGHT = 250;
+
+type Props = PropsWithChildren<{
+  headerImage: ReactElement;
+  headerBackgroundColor: { dark: string; light: string };
+}>;
+
+export default function ParallaxScrollView({
+  children,
+  headerImage,
+  headerBackgroundColor,
+}: Props) {
+  const backgroundColor = useThemeColor({}, 'background');
+  const colorScheme = useColorScheme() ?? 'light';
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollOffset = useScrollOffset(scrollRef);
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+          ),
+        },
+        {
+          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.ScrollView
+      ref={scrollRef}
+      style={{ backgroundColor, flex: 1 }}
+      scrollEventThrottle={16}>
+      <Animated.View
+        style={[
+          styles.header,
+          { backgroundColor: headerBackgroundColor[colorScheme] },
+          headerAnimatedStyle,
+        ]}>
+        {headerImage}
+      </Animated.View>
+      <ThemedView style={styles.content}>{children}</ThemedView>
+    </Animated.ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+    padding: 32,
+    gap: 16,
+    overflow: 'hidden',
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/components/themed-text.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/themed-text.tsx
@ -0,0 +1,60 @@
+import { StyleSheet, Text, type TextProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedTextProps = TextProps & {
+  lightColor?: string;
+  darkColor?: string;
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+export function ThemedText({
+  style,
+  lightColor,
+  darkColor,
+  type = 'default',
+  ...rest
+}: ThemedTextProps) {
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+
+  return (
+    <Text
+      style={[
+        { color },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/components/themed-view.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/themed-view.tsx
@ -0,0 +1,14 @@
+import { View, type ViewProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
+}
--- a/facerecognition_presensi/AndroidFolder/components/ui/collapsible.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/ui/collapsible.tsx
@ -0,0 +1,45 @@
+import { PropsWithChildren, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { ThemedText } from '@/components/themed-text';
+import { ThemedView } from '@/components/themed-view';
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/use-color-scheme';
+
+export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const theme = useColorScheme() ?? 'light';
+
+  return (
+    <ThemedView>
+      <TouchableOpacity
+        style={styles.heading}
+        onPress={() => setIsOpen((value) => !value)}
+        activeOpacity={0.8}>
+        <IconSymbol
+          name="chevron.right"
+          size={18}
+          weight="medium"
+          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
+          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
+        />
+
+        <ThemedText type="defaultSemiBold">{title}</ThemedText>
+      </TouchableOpacity>
+      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  heading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  content: {
+    marginTop: 6,
+    marginLeft: 24,
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/components/ui/icon-symbol.ios.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/ui/icon-symbol.ios.tsx
@ -0,0 +1,32 @@
+import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+  weight = 'regular',
+}: {
+  name: SymbolViewProps['name'];
+  size?: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <SymbolView
+      weight={weight}
+      tintColor={color}
+      resizeMode="scaleAspectFit"
+      name={name}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+    />
+  );
+}
--- a/facerecognition_presensi/AndroidFolder/components/ui/icon-symbol.tsx
+++ b/facerecognition_presensi/AndroidFolder/components/ui/icon-symbol.tsx
@ -0,0 +1,78 @@
+// Fallback for using MaterialIcons on Android and web.
+
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
+import { ComponentProps } from 'react';
+import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
+
+type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
+type IconSymbolName = keyof typeof MAPPING;
+
+/**
+ * Add your SF Symbols to Material Icons mappings here.
+ * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
+ * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
+ */
+const MAPPING = {
+  // Existing mappings
+  'house.fill': 'home',
+  'paperplane.fill': 'send',
+  'chevron.left.forwardslash.chevron.right': 'code',
+  'chevron.right': 'chevron-right',
+  'chevron.left': 'chevron-left',
+
+  // Custom mappings for Profile & App consistency on Android
+  'person.fill': 'person',
+  'checkmark.circle.fill': 'check-circle',
+  'xmark.circle.fill': 'cancel',
+  'exclamationmark.circle.fill': 'error',
+  'graduationcap.fill': 'school',
+  'arrow.right.square': 'logout',
+  'lock.fill': 'lock',
+  'bell.fill': 'notifications',
+  'gearshape.fill': 'settings',
+  'info.circle.fill': 'info',
+  'checkmark': 'check',
+  'xmark': 'close',
+  'person.fill.checkmark': 'how-to-reg',
+  'book.fill': 'book',
+  'cross.case.fill': 'medical-services',
+  'doc.text.fill': 'description',
+  'mappin.and.ellipse': 'location-on',
+  'chart.bar.fill': 'bar-chart',
+  'qrcode': 'qr-code',
+  'faceid': 'face',
+  'doc.text': 'description',
+  'clock.arrow.circlepath': 'history',
+  'envelope': 'mail',
+  'lock': 'lock-outline',
+  'eye': 'visibility',
+  'eye.slash': 'visibility-off',
+  'key.fill': 'vpn-key',
+  'lock.rotation': 'lock-reset',
+  'checkmark.shield': 'verified-user',
+  'info.circle': 'info-outline',
+  'calendar': 'calendar-today',
+  'person.badge.plus': 'person-add',
+  'person.crop.circle.badge.plus': 'person-add',
+} as IconMapping;
+
+/**
+ * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
+ * This ensures a consistent look across platforms, and optimal resource usage.
+ * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
+ */
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+}: {
+  name: IconSymbolName;
+  size?: number;
+  color: string | OpaqueColorValue;
+  style?: StyleProp<TextStyle>;
+  weight?: SymbolWeight;
+}) {
+  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
+}
--- a/facerecognition_presensi/AndroidFolder/constants/config.ts
+++ b/facerecognition_presensi/AndroidFolder/constants/config.ts
@ -0,0 +1,5 @@
+// Emulator Android: 10.0.2.2; perangkat fisik: IP LAN komputer backend.
+// EXPO_PUBLIC_* terlihat di aplikasi; jangan isi dengan rahasia.
+export const BASE_URL = (process.env.EXPO_PUBLIC_API_URL || "http://10.0.2.2:8000").replace(/\/$/, "");
+export const API_BASE = `${BASE_URL}/api/v1`;
+export const IDLE_TIMEOUT_MS = 15 * 60 * 1000;
--- a/facerecognition_presensi/AndroidFolder/constants/theme.ts
+++ b/facerecognition_presensi/AndroidFolder/constants/theme.ts
@ -0,0 +1,53 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+import { Platform } from 'react-native';
+
+const tintColorLight = '#0a7ea4';
+const tintColorDark = '#fff';
+
+export const Colors = {
+  light: {
+    text: '#11181C',
+    background: '#fff',
+    tint: tintColorLight,
+    icon: '#687076',
+    tabIconDefault: '#687076',
+    tabIconSelected: tintColorLight,
+  },
+  dark: {
+    text: '#ECEDEE',
+    background: '#151718',
+    tint: tintColorDark,
+    icon: '#9BA1A6',
+    tabIconDefault: '#9BA1A6',
+    tabIconSelected: tintColorDark,
+  },
+};
+
+export const Fonts = Platform.select({
+  ios: {
+    /** iOS `UIFontDescriptorSystemDesignDefault` */
+    sans: 'system-ui',
+    /** iOS `UIFontDescriptorSystemDesignSerif` */
+    serif: 'ui-serif',
+    /** iOS `UIFontDescriptorSystemDesignRounded` */
+    rounded: 'ui-rounded',
+    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+    mono: 'ui-monospace',
+  },
+  default: {
+    sans: 'normal',
+    serif: 'serif',
+    rounded: 'normal',
+    mono: 'monospace',
+  },
+  web: {
+    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    serif: "Georgia, 'Times New Roman', serif",
+    rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
+    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+});
--- a/facerecognition_presensi/AndroidFolder/contexts/AuthContext.tsx
+++ b/facerecognition_presensi/AndroidFolder/contexts/AuthContext.tsx
@ -0,0 +1,260 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { AppState } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as SecureStore from "expo-secure-store";
+import { API_BASE, IDLE_TIMEOUT_MS } from "@/constants/config";
+
+const STORAGE_KEYS = ["auth_token", "auth_user", "last_activity_at"] as const;
+const SECURE_KEYS = {
+  EMAIL: "remembered_email",
+  PASSWORD: "remembered_password",
+  REMEMBER: "remember_remember",
+} as const;
+
+// ─── Types ─────────────────────────────────────────────────────────────────
+
+export interface AuthUser {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  // Mahasiswa profile (populated after login via /users/{id})
+  id_mahasiswa?: number;
+  nim?: string;
+  nama_mahasiswa?: string;
+  nama_kelas?: string;
+  id_prodi?: number;
+  id_angkatan?: number;
+  id_golongan?: number;
+  id_kelas?: number | null;
+}
+
+interface AuthContextType {
+  token: string | null;
+  user: AuthUser | null;
+  isLoading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  /** Panggil setiap ada interaksi pengguna untuk mereset timer idle */
+  updateActivity: () => void;
+}
+
+// ─── Context ────────────────────────────────────────────────────────────────
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+// ─── Provider ───────────────────────────────────────────────────────────────
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [token, setToken] = useState<string | null>(null);
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Ref untuk waktu aktivitas terakhir — pakai ref agar update cepat tanpa re-render
+  const lastActivityRef = useRef<number | null>(null);
+
+  // ── Helpers ──────────────────────────────────────────────────────────────
+
+  const clearSession = async () => {
+    await AsyncStorage.multiRemove([...STORAGE_KEYS]);
+    // Clear remembered credentials from secure storage
+    await Promise.all([
+      SecureStore.deleteItemAsync(SECURE_KEYS.EMAIL),
+      SecureStore.deleteItemAsync(SECURE_KEYS.PASSWORD),
+      SecureStore.deleteItemAsync(SECURE_KEYS.REMEMBER),
+    ]);
+    lastActivityRef.current = null;
+    setToken(null);
+    setUser(null);
+  };
+
+  const isExpired = (lastActivity: number | null): boolean => {
+    if (!lastActivity) return false; // belum ada data aktivitas, jangan expire
+    return Date.now() - lastActivity > IDLE_TIMEOUT_MS;
+  };
+
+  // ── updateActivity ────────────────────────────────────────────────────────
+
+  const updateActivity = () => {
+    const now = Date.now();
+    lastActivityRef.current = now;
+    // Fire-and-forget — tidak perlu await agar tidak memblokir UI
+    AsyncStorage.setItem("last_activity_at", String(now)).catch(() => {});
+  };
+
+  // ── Hydrate dari AsyncStorage saat boot ──────────────────────────────────
+
+  useEffect(() => {
+    const hydrate = async () => {
+      try {
+        const [storedToken, storedUser, storedActivity] = await Promise.all([
+          AsyncStorage.getItem("auth_token"),
+          AsyncStorage.getItem("auth_user"),
+          AsyncStorage.getItem("last_activity_at"),
+        ]);
+
+        if (!storedToken || !storedUser) return;
+
+        // Cek apakah session sudah idle timeout
+        const lastActivity = storedActivity
+          ? parseInt(storedActivity, 10)
+          : null;
+        if (isExpired(lastActivity)) {
+          // Session kadaluarsa — bersihkan tanpa re-login
+          await AsyncStorage.multiRemove([...STORAGE_KEYS]);
+          return;
+        }
+
+        lastActivityRef.current = lastActivity ?? Date.now();
+        setToken(storedToken);
+        setUser(JSON.parse(storedUser) as AuthUser);
+      } catch {
+        // Storage gagal — mulai sebagai guest
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    hydrate();
+  }, []);
+
+  // ── Idle timeout checker ─────────────────────────────────────────────────
+
+  useEffect(() => {
+    if (!token) return;
+
+    const checkIdle = async () => {
+      if (isExpired(lastActivityRef.current)) {
+        await clearSession();
+      }
+    };
+
+    // Cek setiap menit
+    const interval = setInterval(checkIdle, 60_000);
+
+    // Cek juga saat app kembali ke foreground (user balik setelah lama di background)
+    const appStateSub = AppState.addEventListener("change", (state) => {
+      if (state === "active") checkIdle();
+    });
+
+    return () => {
+      clearInterval(interval);
+      appStateSub.remove();
+    };
+  }, [token]);
+
+  // ── login ─────────────────────────────────────────────────────────────────
+
+  const login = async (email: string, password: string): Promise<void> => {
+    // Backend pakai OAuth2PasswordRequestForm — form-urlencoded, field 'username'
+    const body = `username=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`;
+    const res = await fetch(`${API_BASE}/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body,
+    });
+
+    if (res.status === 401 || res.status === 400) {
+      throw new Error("Email atau password salah");
+    }
+    if (!res.ok) {
+      throw new Error(`Server error: ${res.status}`);
+    }
+
+    const data = (await res.json()) as {
+      access_token: string;
+      token_type: string;
+      user?: AuthUser;
+      role?: string;
+      name?: string;
+      email?: string;
+      id?: number;
+    };
+
+    // Normalise — backend bisa kembalikan user nested atau flat
+    let rawUser: AuthUser = data.user ?? {
+      id: data.id ?? 0,
+      name: data.name ?? "",
+      email: data.email ?? email,
+      role: data.role ?? "",
+    };
+
+    // Hanya mahasiswa yang boleh login di app ini
+    if (rawUser.role !== "mahasiswa") {
+      throw new Error("Akses ditolak: Login hanya untuk mahasiswa");
+    }
+
+    const jwt = data.access_token;
+
+    // Enrich dengan data mahasiswa (NIM, kelas, prodi, dll)
+    try {
+      const profileRes = await fetch(`${API_BASE}/users/${rawUser.id}`, {
+        headers: { Authorization: `Bearer ${jwt}` },
+      });
+      if (profileRes.ok) {
+        const profile = (await profileRes.json()) as {
+          id_mahasiswa?: number;
+          nim?: string;
+          nama_mahasiswa?: string;
+          nama_kelas?: string;
+          id_prodi?: number;
+          id_angkatan?: number;
+          id_golongan?: number;
+        };
+        rawUser = {
+          ...rawUser,
+          id_mahasiswa: profile.id_mahasiswa,
+          nim: profile.nim,
+          nama_mahasiswa: profile.nama_mahasiswa,
+          nama_kelas: profile.nama_kelas,
+          id_prodi: profile.id_prodi,
+          id_angkatan: profile.id_angkatan,
+          id_golongan: profile.id_golongan,
+        };
+      }
+    } catch {
+      /* profil gagal diambil — lanjut dengan data minimal */
+    }
+
+    // Simpan token, user, dan waktu aktivitas awal
+    const now = Date.now();
+    await Promise.all([
+      AsyncStorage.setItem("auth_token", jwt),
+      AsyncStorage.setItem("auth_user", JSON.stringify(rawUser)),
+      AsyncStorage.setItem("last_activity_at", String(now)),
+    ]);
+
+    lastActivityRef.current = now;
+    setToken(jwt);
+    setUser(rawUser);
+  };
+
+  // ── logout ────────────────────────────────────────────────────────────────
+
+  const logout = async (): Promise<void> => {
+    await clearSession();
+  };
+
+  // ─────────────────────────────────────────────────────────────────────────
+
+  return (
+    <AuthContext.Provider
+      value={{ token, user, isLoading, login, logout, updateActivity }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────────────
+
+export function useAuth(): AuthContextType {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
+  return ctx;
+}
--- a/facerecognition_presensi/AndroidFolder/contexts/ThemeContext.tsx
+++ b/facerecognition_presensi/AndroidFolder/contexts/ThemeContext.tsx
@ -0,0 +1,195 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export type ThemeMode = "light" | "dark";
+
+export interface ThemeColors {
+  bg: string;
+  cardBg: string;
+  textPrimary: string;
+  textSecondary: string;
+  textMuted: string;
+  border: string;
+  divider: string;
+  accent: string;
+  accentLight: string;
+  accentDark: string;
+  headerBg: string;
+  shadowColor: string;
+  statusPillBg: string;
+  statusPillText: string;
+  circle1: string;
+  circle2: string;
+  subtitleText: string;
+  outerRing: string;
+  innerRing: string;
+  sectionTitle: string;
+  settingsCardBg: string;
+  settingsIconBg: string;
+  settingsIconColor: string;
+  chevronColor: string;
+  logoutBg: string;
+  logoutBorder: string;
+  logoutIconBg: string;
+  switchBorder: string;
+  dayCardBg: string;
+  dayCardBorder: string;
+  dayCardActiveBg: string;
+  dayCardActiveText: string;
+  timeText: string;
+  timeTextMuted: string;
+  badgeBg: string;
+  badgeText: string;
+}
+
+export const lightTheme: ThemeColors = {
+  bg: "#F8FAFC",
+  cardBg: "#FFFFFF",
+  textPrimary: "#0F172A",
+  textSecondary: "#64748B",
+  textMuted: "#94A3B8",
+  border: "#E2E8F0",
+  divider: "#F1F5F9",
+  accent: "#2563EB",
+  accentLight: "#EFF6FF",
+  accentDark: "#1D4ED8",
+  headerBg: "#2563EB",
+  shadowColor: "#1E3A8A",
+  statusPillBg: "#DCFCE7",
+  statusPillText: "#15803D",
+  circle1: "#3B82F6",
+  circle2: "#60A5FA",
+  subtitleText: "#93C5FD",
+  outerRing: "#DBEAFE",
+  innerRing: "#FFFFFF",
+  sectionTitle: "#0F172A",
+  settingsCardBg: "#FFFFFF",
+  settingsIconBg: "#EFF6FF",
+  settingsIconColor: "#2563EB",
+  chevronColor: "#94A3B8",
+  logoutBg: "#FEF2F2",
+  logoutBorder: "#FEE2E2",
+  logoutIconBg: "#FEE2E2",
+  switchBorder: "#E2E8F0",
+  dayCardBg: "#FFFFFF",
+  dayCardBorder: "#E2E8F0",
+  dayCardActiveBg: "#2563EB",
+  dayCardActiveText: "#FFFFFF",
+  timeText: "#1E293B",
+  timeTextMuted: "#64748B",
+  badgeBg: "#EFF6FF",
+  badgeText: "#2563EB",
+};
+
+export const darkTheme: ThemeColors = {
+  bg: "#0F172A",
+  cardBg: "#1E293B",
+  textPrimary: "#F1F5F9",
+  textSecondary: "#94A3B8",
+  textMuted: "#64748B",
+  border: "#334155",
+  divider: "#334155",
+  accent: "#3B82F6",
+  accentLight: "rgba(59, 130, 246, 0.15)",
+  accentDark: "#1E3A8A",
+  headerBg: "#1E3A5F",
+  shadowColor: "#000000",
+  statusPillBg: "#14532D",
+  statusPillText: "#86EFAC",
+  circle1: "#2D4A6F",
+  circle2: "#3D5A7F",
+  subtitleText: "#93C5FD",
+  outerRing: "#334155",
+  innerRing: "#1E293B",
+  sectionTitle: "#F1F5F9",
+  settingsCardBg: "#1E293B",
+  settingsIconBg: "#1E3A5F",
+  settingsIconColor: "#60A5FA",
+  chevronColor: "#475569",
+  logoutBg: "#371B1B",
+  logoutBorder: "#5C2A2A",
+  logoutIconBg: "#5C2A2A",
+  switchBorder: "#334155",
+  dayCardBg: "#1E293B",
+  dayCardBorder: "#334155",
+  dayCardActiveBg: "#3B82F6",
+  dayCardActiveText: "#FFFFFF",
+  timeText: "#F1F5F9",
+  timeTextMuted: "#94A3B8",
+  badgeBg: "rgba(59, 130, 246, 0.2)",
+  badgeText: "#60A5FA",
+};
+
+const THEME_STORAGE_KEY = "@app_theme_mode";
+
+interface ThemeContextType {
+  themeMode: ThemeMode;
+  isDarkMode: boolean;
+  theme: ThemeColors;
+  toggleDarkMode: () => void;
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [themeMode, setThemeModeState] = useState<ThemeMode>("light");
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const loadSavedTheme = async () => {
+      try {
+        const savedMode = await AsyncStorage.getItem(THEME_STORAGE_KEY);
+        if (savedMode === "dark" || savedMode === "light") {
+          setThemeModeState(savedMode);
+        }
+      } catch (error) {
+        console.error("Failed to load theme preference from storage:", error);
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+    loadSavedTheme();
+  }, []);
+
+  const setThemeMode = async (mode: ThemeMode) => {
+    setThemeModeState(mode);
+    try {
+      await AsyncStorage.setItem(THEME_STORAGE_KEY, mode);
+    } catch (error) {
+      console.error("Failed to save theme preference to storage:", error);
+    }
+  };
+
+  const toggleDarkMode = () => {
+    const nextMode = themeMode === "dark" ? "light" : "dark";
+    setThemeMode(nextMode);
+  };
+
+  const isDarkMode = themeMode === "dark";
+  const theme = isDarkMode ? darkTheme : lightTheme;
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        themeMode,
+        isDarkMode,
+        theme,
+        toggleDarkMode,
+        setThemeMode,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
--- a/facerecognition_presensi/AndroidFolder/eslint.config.js
+++ b/facerecognition_presensi/AndroidFolder/eslint.config.js
@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+]);
--- a/facerecognition_presensi/AndroidFolder/hooks/use-color-scheme.ts
+++ b/facerecognition_presensi/AndroidFolder/hooks/use-color-scheme.ts
@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';
--- a/facerecognition_presensi/AndroidFolder/hooks/use-color-scheme.web.ts
+++ b/facerecognition_presensi/AndroidFolder/hooks/use-color-scheme.web.ts
@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}
--- a/facerecognition_presensi/AndroidFolder/hooks/use-theme-color.ts
+++ b/facerecognition_presensi/AndroidFolder/hooks/use-theme-color.ts
@ -0,0 +1,21 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/use-color-scheme';
+
+export function useThemeColor(
+  props: { light?: string; dark?: string },
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+) {
+  const theme = useColorScheme() ?? 'light';
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}
--- a/facerecognition_presensi/AndroidFolder/package-lock.json
+++ b/facerecognition_presensi/AndroidFolder/package-lock.json
--- a/facerecognition_presensi/AndroidFolder/package.json
+++ b/facerecognition_presensi/AndroidFolder/package.json
@ -0,0 +1,56 @@
+{
+  "name": "androidfolder",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "expo": "~54.0.33",
+    "expo-camera": "~17.0.10",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.11",
+    "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
+    "expo-image-manipulator": "~14.0.8",
+    "expo-image-picker": "~17.0.11",
+    "expo-linear-gradient": "~15.0.8",
+    "expo-linking": "~8.0.11",
+    "expo-location": "~19.0.8",
+    "expo-router": "~6.0.23",
+    "expo-secure-store": "~15.0.8",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "expo-system-ui": "~6.0.9",
+    "expo-web-browser": "~15.0.10",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-maps": "^1.20.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-webview": "13.15.0",
+    "react-native-worklets": "0.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export { useColorScheme } from 'react-native';`