Fix form keyboard issues and sticky footers in agent screens

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

.gitignore

@@ -0,0 +1,19 @@
+node_modules
+.bundle
+dist
+android/.gradle
+android/app/build
+android/build
+android/local.properties
+ios/Pods
+ios/build
+*.xcworkspace
+*.xcuserstate
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+coverage
+.cxx/
+android/app/.cxx/
+**/ComponentDescriptors.cpp.o
+**/react_codegen_rngesturehandler_codegen.dir/

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+};

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.compile.nullAnalysis.mode": "automatic"
+}

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.tsx

@@ -0,0 +1,38 @@
+import 'react-native-gesture-handler';
+import React from 'react';
+import { StatusBar } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Provider } from 'react-redux';
+
+import { store } from './src/app/store';
+import { RootNavigator } from './src/navigation/RootNavigator';
+import { ThemeProvider } from './src/theme';
+import { ToastHost } from './src/components/ToastHost';
+import { useAppBootstrap } from './src/hooks/useAppBootstrap';
+
+const AppShell = () => {
+  useAppBootstrap();
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" translucent backgroundColor="transparent" />
+      <RootNavigator />
+      <ToastHost />
+    </>
+  );
+};
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <Provider store={store}>
+          <ThemeProvider>
+            <AppShell />
+          </ThemeProvider>
+        </Provider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}

Gemfile

@@ -0,0 +1,16 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'

android/app/build.gradle

@@ -0,0 +1,119 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * 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 {
+    /* 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")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+    // cliFile = file("../../node_modules/react-native/cli.js")
+
+    /* 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 command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   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 to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
+ *
+ * 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.bankcbs.mobile"
+    defaultConfig {
+        applicationId "com.bankcbs.mobile"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    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
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# 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
+
+# Add any project specific keep options here:

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,29 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+
+    <application
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme"
+      android:usesCleartextTraffic="${usesCleartextTraffic}"
+      android:supportsRtl="true">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+        android:launchMode="singleTask"
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+    </application>
+</manifest>

android/app/src/main/java/com/bankcbs/mobile/MainActivity.kt

@@ -0,0 +1,22 @@
+package com.bankcbs.mobile
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "BankCBS"
+
+  /**
+   * 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 =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}

android/app/src/main/java/com/bankcbs/mobile/MainApplication.kt

@@ -0,0 +1,27 @@
+package com.bankcbs.mobile
+
+import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactHost: ReactHost by lazy {
+    getDefaultReactHost(
+      context = applicationContext,
+      packageList =
+        PackageList(this).packages.apply {
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // add(MyReactNativePackage())
+        },
+    )
+  }
+
+  override fun onCreate() {
+    super.onCreate()
+    loadReactNative(this)
+  }
+}

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>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">BankCBS</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,9 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    </style>
+
+</resources>

android/build.gradle

@@ -0,0 +1,21 @@
+buildscript {
+    ext {
+        buildToolsVersion = "36.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 36
+        targetSdkVersion = 36
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.1.20"
+    }
+    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")
+    }
+}
+
+apply plugin: "com.facebook.react.rootproject"

android/gradle.properties

@@ -0,0 +1,44 @@
+# 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
+
+# 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=false

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015 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, 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" "$@"

android/gradlew.bat

@@ -0,0 +1,99 @@
+@REM Copyright (c) Meta Platforms, Inc. and affiliates.
+@REM
+@REM This source code is licensed under the MIT license found in the
+@REM LICENSE file in the root directory of this source tree.
+
+@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

android/link-assets-manifest.json

@@ -0,0 +1,21 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "assets/fonts/Nunito-Bold.ttf",
+      "sha1": "a2d6a8de275b708042cfa663533194d18d2861c4"
+    },
+    {
+      "path": "assets/fonts/Nunito-ExtraBold.ttf",
+      "sha1": "30b19033e24e4a79ca8a0ac3e780ab8e3d664185"
+    },
+    {
+      "path": "assets/fonts/Nunito-Regular.ttf",
+      "sha1": "6b19e7ffbd729c36ca7bbd0163a791d2716447a8"
+    },
+    {
+      "path": "assets/fonts/Nunito-SemiBold.ttf",
+      "sha1": "12eebee4d162f8f099235a42623369d5e57a6af9"
+    }
+  ]
+}

android/settings.gradle

@@ -0,0 +1,6 @@
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+rootProject.name = 'BankCBS'
+include ':app'
+includeBuild('../node_modules/@react-native/gradle-plugin')

app.json

@@ -0,0 +1,4 @@
+{
+  "name": "BankCBS",
+  "displayName": "BankCBS"
+}

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = function babelConfig(api) {
+  api.cache(true);
+
+  return {
+    presets: ['module:@react-native/babel-preset'],
+    plugins: ['react-native-reanimated/plugin'],
+  };
+};

download-fonts.js

@@ -0,0 +1,44 @@
+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+
+const fonts = [
+  { name: 'Nunito-Regular.ttf', url: 'https://github.com/googlefonts/nunito/raw/main/fonts/ttf/Nunito-Regular.ttf' },
+  { name: 'Nunito-SemiBold.ttf', url: 'https://github.com/googlefonts/nunito/raw/main/fonts/ttf/Nunito-SemiBold.ttf' },
+  { name: 'Nunito-Bold.ttf', url: 'https://github.com/googlefonts/nunito/raw/main/fonts/ttf/Nunito-Bold.ttf' },
+  { name: 'Nunito-ExtraBold.ttf', url: 'https://github.com/googlefonts/nunito/raw/main/fonts/ttf/Nunito-ExtraBold.ttf' },
+];
+
+const dir = path.join(__dirname, 'assets', 'fonts');
+
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+function download(url, dest) {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(dest);
+    https.get(url, (response) => {
+      if (response.statusCode === 302 || response.statusCode === 301) {
+        download(response.headers.location, dest).then(resolve).catch(reject);
+        return;
+      }
+      response.pipe(file);
+      file.on('finish', () => {
+        file.close(resolve);
+      });
+    }).on('error', (err) => {
+      fs.unlink(dest, () => reject(err));
+    });
+  });
+}
+
+Promise.all(fonts.map(font => {
+  const dest = path.join(dir, font.name);
+  console.log(`Downloading ${font.name}...`);
+  return download(font.url, dest);
+})).then(() => {
+  console.log('All fonts downloaded successfully!');
+}).catch(err => {
+  console.error('Error downloading fonts:', err);
+});

index.js

@@ -0,0 +1,27 @@
+/**
+ * @format
+ */
+
+import { AppRegistry, Text, TextInput } from 'react-native';
+import App from './App';
+import { name as appName } from './app.json';
+
+const customTextProps = {
+  style: {
+    fontFamily: 'Nunito-Regular',
+  }
+};
+
+if (Text.defaultProps) {
+  Text.defaultProps.style = { ...Text.defaultProps.style, ...customTextProps.style };
+} else {
+  Text.defaultProps = customTextProps;
+}
+
+if (TextInput.defaultProps) {
+  TextInput.defaultProps.style = { ...TextInput.defaultProps.style, ...customTextProps.style };
+} else {
+  TextInput.defaultProps = customTextProps;
+}
+
+AppRegistry.registerComponent(appName, () => App);

ios/.xcode.env

@@ -0,0 +1,11 @@
+# This `.xcode.env` file is versioned and is used to source the environment
+# used when running script phases inside Xcode.
+# To customize your local environment, you can create an `.xcode.env.local`
+# file that is not versioned.
+
+# NODE_BINARY variable contains the PATH to the node executable.
+#
+# Customize the NODE_BINARY variable here.
+# For example, to use nvm with brew, add the following line
+# . "$(brew --prefix nvm)/nvm.sh" --no-use
+export NODE_BINARY=$(command -v node)

ios/BankCBS.xcodeproj/project.pbxproj

@@ -0,0 +1,496 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 54;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		0C80B921A6F3F58F76C31292 /* libPods-BankCBS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-BankCBS.a */; };
+		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
+		761780ED2CA45674006654EE /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 761780EC2CA45674006654EE /* AppDelegate.swift */; };
+		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		C0D4AFDA2287401D95FC205E /* Nunito-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 99AFB5F593F649518272F7C1 /* Nunito-Bold.ttf */; };
+		E59A09A1B92A4DFC837D4F76 /* Nunito-ExtraBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5BE37E42FB25420B888BD619 /* Nunito-ExtraBold.ttf */; };
+		8177024BD66049C892AE8BB5 /* Nunito-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0586CD0C88074732AB208771 /* Nunito-Regular.ttf */; };
+		28C1313D12F44E0B944A0461 /* Nunito-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 94CE8C68F80440B6A8315272 /* Nunito-SemiBold.ttf */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		13B07F961A680F5B00A75B9A /* BankCBS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = BankCBS.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = BankCBS/Images.xcassets; sourceTree = "<group>"; };
+		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = BankCBS/Info.plist; sourceTree = "<group>"; };
+		13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = BankCBS/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
+		3B4392A12AC88292D35C810B /* Pods-BankCBS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-BankCBS.debug.xcconfig"; path = "Target Support Files/Pods-BankCBS/Pods-BankCBS.debug.xcconfig"; sourceTree = "<group>"; };
+		5709B34CF0A7D63546082F79 /* Pods-BankCBS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-BankCBS.release.xcconfig"; path = "Target Support Files/Pods-BankCBS/Pods-BankCBS.release.xcconfig"; sourceTree = "<group>"; };
+		5DCACB8F33CDC322A6C60F78 /* libPods-BankCBS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-BankCBS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		761780EC2CA45674006654EE /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = BankCBS/AppDelegate.swift; sourceTree = "<group>"; };
+		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = BankCBS/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		99AFB5F593F649518272F7C1 /* Nunito-Bold.ttf */ = {isa = PBXFileReference; name = "Nunito-Bold.ttf"; path = "../assets/fonts/Nunito-Bold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5BE37E42FB25420B888BD619 /* Nunito-ExtraBold.ttf */ = {isa = PBXFileReference; name = "Nunito-ExtraBold.ttf"; path = "../assets/fonts/Nunito-ExtraBold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		0586CD0C88074732AB208771 /* Nunito-Regular.ttf */ = {isa = PBXFileReference; name = "Nunito-Regular.ttf"; path = "../assets/fonts/Nunito-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		94CE8C68F80440B6A8315272 /* Nunito-SemiBold.ttf */ = {isa = PBXFileReference; name = "Nunito-SemiBold.ttf"; path = "../assets/fonts/Nunito-SemiBold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				0C80B921A6F3F58F76C31292 /* libPods-BankCBS.a in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		13B07FAE1A68108700A75B9A /* BankCBS */ = {
+			isa = PBXGroup;
+			children = (
+				13B07FB51A68108700A75B9A /* Images.xcassets */,
+				761780EC2CA45674006654EE /* AppDelegate.swift */,
+				13B07FB61A68108700A75B9A /* Info.plist */,
+				81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
+				13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */,
+			);
+			name = BankCBS;
+			sourceTree = "<group>";
+		};
+		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
+				5DCACB8F33CDC322A6C60F78 /* libPods-BankCBS.a */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
+			isa = PBXGroup;
+			children = (
+			);
+			name = Libraries;
+			sourceTree = "<group>";
+		};
+		83CBB9F61A601CBA00E9B192 = {
+			isa = PBXGroup;
+			children = (
+				13B07FAE1A68108700A75B9A /* BankCBS */,
+				832341AE1AAA6A7D00B99B32 /* Libraries */,
+				83CBBA001A601CBA00E9B192 /* Products */,
+				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				BBD78D7AC51CEA395F1C20DB /* Pods */,
+				EF5146ACD97C4640B8BE11AA /* Resources */,
+			);
+			indentWidth = 2;
+			sourceTree = "<group>";
+			tabWidth = 2;
+			usesTabs = 0;
+		};
+		83CBBA001A601CBA00E9B192 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				13B07F961A680F5B00A75B9A /* BankCBS.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		BBD78D7AC51CEA395F1C20DB /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				3B4392A12AC88292D35C810B /* Pods-BankCBS.debug.xcconfig */,
+				5709B34CF0A7D63546082F79 /* Pods-BankCBS.release.xcconfig */,
+			);
+			path = Pods;
+			sourceTree = "<group>";
+		};
+		EF5146ACD97C4640B8BE11AA /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				99AFB5F593F649518272F7C1 /* Nunito-Bold.ttf */,
+				5BE37E42FB25420B888BD619 /* Nunito-ExtraBold.ttf */,
+				0586CD0C88074732AB208771 /* Nunito-Regular.ttf */,
+				94CE8C68F80440B6A8315272 /* Nunito-SemiBold.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		13B07F861A680F5B00A75B9A /* BankCBS */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "BankCBS" */;
+			buildPhases = (
+				C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */,
+				13B07F871A680F5B00A75B9A /* Sources */,
+				13B07F8C1A680F5B00A75B9A /* Frameworks */,
+				13B07F8E1A680F5B00A75B9A /* Resources */,
+				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+				00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */,
+				E235C05ADACE081382539298 /* [CP] Copy Pods Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = BankCBS;
+			productName = BankCBS;
+			productReference = 13B07F961A680F5B00A75B9A /* BankCBS.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		83CBB9F71A601CBA00E9B192 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 1210;
+				TargetAttributes = {
+					13B07F861A680F5B00A75B9A = {
+						LastSwiftMigration = 1120;
+					};
+				};
+			};
+			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "BankCBS" */;
+			compatibilityVersion = "Xcode 12.0";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 83CBB9F61A601CBA00E9B192;
+			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				13B07F861A680F5B00A75B9A /* BankCBS */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		13B07F8E1A680F5B00A75B9A /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
+				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				C0D4AFDA2287401D95FC205E /* Nunito-Bold.ttf in Resources */,
+				E59A09A1B92A4DFC837D4F76 /* Nunito-ExtraBold.ttf in Resources */,
+				8177024BD66049C892AE8BB5 /* Nunito-Regular.ttf in Resources */,
+				28C1313D12F44E0B944A0461 /* Nunito-SemiBold.ttf in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"$(SRCROOT)/.xcode.env.local",
+				"$(SRCROOT)/.xcode.env",
+			);
+			name = "Bundle React Native code and images";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"\\\"$WITH_ENVIRONMENT\\\" \\\"$REACT_NATIVE_XCODE\\\"\"\n";
+		};
+		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-BankCBS/Pods-BankCBS-frameworks-${CONFIGURATION}-input-files.xcfilelist",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-BankCBS/Pods-BankCBS-frameworks-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-BankCBS/Pods-BankCBS-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+		C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-BankCBS-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-BankCBS/Pods-BankCBS-resources-${CONFIGURATION}-input-files.xcfilelist",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-BankCBS/Pods-BankCBS-resources-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-BankCBS/Pods-BankCBS-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		13B07F871A680F5B00A75B9A /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				761780ED2CA45674006654EE /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin XCBuildConfiguration section */
+		13B07F941A680F5B00A75B9A /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-BankCBS.debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = 1;
+				ENABLE_BITCODE = NO;
+				INFOPLIST_FILE = BankCBS/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "com.bankcbs.mobile";
+				PRODUCT_NAME = BankCBS;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+			};
+			name = Debug;
+		};
+		13B07F951A680F5B00A75B9A /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-BankCBS.release.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = BankCBS/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "com.bankcbs.mobile";
+				PRODUCT_NAME = BankCBS;
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+			};
+			name = Release;
+		};
+		83CBBA201A601CBA00E9B192 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "c++20";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+				);
+				LIBRARY_SEARCH_PATHS = (
+					"\"$(SDKROOT)/usr/lib/swift\"",
+					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
+					"\"$(inherited)\"",
+				);
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				OTHER_CPLUSPLUSFLAGS = (
+					"$(OTHER_CFLAGS)",
+					"-DFOLLY_NO_CONFIG",
+					"-DFOLLY_MOBILE=1",
+					"-DFOLLY_USE_LIBCPP=1",
+					"-DFOLLY_CFG_NO_COROUTINES=1",
+					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
+				);
+				SDKROOT = iphoneos;
+			};
+			name = Debug;
+		};
+		83CBBA211A601CBA00E9B192 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "c++20";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = YES;
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+				);
+				LIBRARY_SEARCH_PATHS = (
+					"\"$(SDKROOT)/usr/lib/swift\"",
+					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
+					"\"$(inherited)\"",
+				);
+				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_CPLUSPLUSFLAGS = (
+					"$(OTHER_CFLAGS)",
+					"-DFOLLY_NO_CONFIG",
+					"-DFOLLY_MOBILE=1",
+					"-DFOLLY_USE_LIBCPP=1",
+					"-DFOLLY_CFG_NO_COROUTINES=1",
+					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
+				);
+				SDKROOT = iphoneos;
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "BankCBS" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				13B07F941A680F5B00A75B9A /* Debug */,
+				13B07F951A680F5B00A75B9A /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "BankCBS" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				83CBBA201A601CBA00E9B192 /* Debug */,
+				83CBBA211A601CBA00E9B192 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
+}

ios/BankCBS.xcodeproj/xcshareddata/xcschemes/BankCBS.xcscheme

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1210"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "BankCBS.app"
+               BlueprintName = "BankCBS"
+               ReferencedContainer = "container:BankCBS.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "BankCBSTests.xctest"
+               BlueprintName = "BankCBSTests"
+               ReferencedContainer = "container:BankCBS.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "BankCBS.app"
+            BlueprintName = "BankCBS"
+            ReferencedContainer = "container:BankCBS.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "BankCBS.app"
+            BlueprintName = "BankCBS"
+            ReferencedContainer = "container:BankCBS.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

ios/BankCBS/AppDelegate.swift

@@ -0,0 +1,48 @@
+import UIKit
+import React
+import React_RCTAppDelegate
+import ReactAppDependencyProvider
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+  var window: UIWindow?
+
+  var reactNativeDelegate: ReactNativeDelegate?
+  var reactNativeFactory: RCTReactNativeFactory?
+
+  func application(
+    _ application: UIApplication,
+    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+  ) -> Bool {
+    let delegate = ReactNativeDelegate()
+    let factory = RCTReactNativeFactory(delegate: delegate)
+    delegate.dependencyProvider = RCTAppDependencyProvider()
+
+    reactNativeDelegate = delegate
+    reactNativeFactory = factory
+
+    window = UIWindow(frame: UIScreen.main.bounds)
+
+    factory.startReactNative(
+      withModuleName: "BankCBS",
+      in: window,
+      launchOptions: launchOptions
+    )
+
+    return true
+  }
+}
+
+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    self.bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+#if DEBUG
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+#else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+#endif
+  }
+}

ios/BankCBS/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,53 @@
+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "20x20"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/BankCBS/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/BankCBS/Info.plist

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>BankCBS</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<false/>
+		<key>NSAllowsLocalNetworking</key>
+		<true/>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Nunito-Bold.ttf</string>
+		<string>Nunito-ExtraBold.ttf</string>
+		<string>Nunito-Regular.ttf</string>
+		<string>Nunito-SemiBold.ttf</string>
+	</array>
+</dict>
+</plist>

ios/BankCBS/LaunchScreen.storyboard

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="BankCBS" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
+                                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
+                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="MN2-I3-ftu">
+                                <rect key="frame" x="0.0" y="626" width="375" height="21"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                        <constraints>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="MN2-I3-ftu" secondAttribute="bottom" constant="20" id="OZV-Vh-mqD"/>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
+                            <constraint firstItem="MN2-I3-ftu" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="akx-eg-2ui"/>
+                            <constraint firstItem="MN2-I3-ftu" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" id="i1E-0Y-4RG"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
+                        </constraints>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="52.173913043478265" y="375"/>
+        </scene>
+    </scenes>
+</document>

ios/BankCBS/PrivacyInfo.xcprivacy

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSPrivacyAccessedAPITypes</key>
+	<array>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>C617.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryUserDefaults</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>CA92.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategorySystemBootTime</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>35F9.1</string>
+			</array>
+		</dict>
+	</array>
+	<key>NSPrivacyCollectedDataTypes</key>
+	<array/>
+	<key>NSPrivacyTracking</key>
+	<false/>
+</dict>
+</plist>

ios/Podfile

@@ -0,0 +1,34 @@
+# Resolve react_native_pods.rb with node to allow for hoisting
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve(
+    "react-native/scripts/react_native_pods.rb",
+    {paths: [process.argv[1]]},
+  )', __dir__]).strip
+
+platform :ios, min_ios_version_supported
+prepare_react_native_project!
+
+linkage = ENV['USE_FRAMEWORKS']
+if linkage != nil
+  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
+  use_frameworks! :linkage => linkage.to_sym
+end
+
+target 'BankCBS' do
+  config = use_native_modules!
+
+  use_react_native!(
+    :path => config[:reactNativePath],
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
+  )
+
+  post_install do |installer|
+    react_native_post_install(
+      installer,
+      config[:reactNativePath],
+      :mac_catalyst_enabled => false,
+      # :ccache_enabled => true
+    )
+  end
+end

ios/link-assets-manifest.json

@@ -0,0 +1,21 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "assets/fonts/Nunito-Bold.ttf",
+      "sha1": "a2d6a8de275b708042cfa663533194d18d2861c4"
+    },
+    {
+      "path": "assets/fonts/Nunito-ExtraBold.ttf",
+      "sha1": "30b19033e24e4a79ca8a0ac3e780ab8e3d664185"
+    },
+    {
+      "path": "assets/fonts/Nunito-Regular.ttf",
+      "sha1": "6b19e7ffbd729c36ca7bbd0163a791d2716447a8"
+    },
+    {
+      "path": "assets/fonts/Nunito-SemiBold.ttf",
+      "sha1": "12eebee4d162f8f099235a42623369d5e57a6af9"
+    }
+  ]
+}

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'react-native',
+};

metro.config.js

@@ -0,0 +1,11 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "bankcbs",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "lint": "eslint .",
+    "test": "jest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^5.2.14",
+    "@maplibre/maplibre-react-native": "^10.4.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/geolocation": "^3.4.0",
+    "@react-native-vector-icons/ionicons": "^13.0.0",
+    "@react-navigation/bottom-tabs": "^7.15.9",
+    "@react-navigation/native": "^7.2.2",
+    "@react-navigation/native-stack": "^7.14.10",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@types/geojson": "^7946.0.16",
+    "axios": "^1.14.0",
+    "react": "19.2.0",
+    "react-native": "0.83.4",
+    "react-native-biometrics": "^3.0.1",
+    "react-native-date-picker": "^5.0.13",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-haptic-feedback": "^3.0.0",
+    "react-native-keychain": "^10.0.0",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-reanimated": "4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "react-native-svg": "^15.15.4",
+    "react-native-worklets": "0.7.2",
+    "react-redux": "^9.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.83.4",
+    "@react-native/eslint-config": "0.83.4",
+    "@react-native/metro-config": "0.83.4",
+    "@react-native/typescript-config": "0.83.4",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-test-renderer": "19.2.0",
+    "typescript": "~5.9.2"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['./assets/fonts/'],
+};

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { useDispatch, useSelector, type TypedUseSelectorHook } from 'react-redux';
+
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/app/rootReducer.ts

@@ -0,0 +1,44 @@
+import { combineReducers } from '@reduxjs/toolkit';
+
+import { baseApi } from '../services/api/baseApi';
+import { authReducer } from '../modules/auth/store/authSlice';
+import { accountReducer } from '../modules/home/store/accountSlice';
+import { transferReducer } from '../modules/transfer/store/transferSlice';
+import { paymentsReducer } from '../modules/payments/store/paymentsSlice';
+import { depositReducer } from '../modules/deposit/store/depositSlice';
+import { serviceReducer } from '../modules/services/store/serviceSlice';
+import { loanReducer } from '../modules/loan/store/loanSlice';
+import { insuranceReducer } from '../modules/insurance/store/insuranceSlice';
+import { cardsReducer } from '../modules/cards/store/cardsSlice';
+import { userReducer } from '../modules/profile/store/userSlice';
+import { uiReducer } from '../modules/ui/store/uiSlice';
+import { agentReducer } from '../modules/agent/store/agentSlice';
+import { schemesReducer } from '../modules/schemes/store/schemesSlice';
+import { schemesApi } from '../modules/schemes/services/schemesApi';
+import { beneficiariesReducer } from '../modules/payments/store/beneficiariesSlice';
+
+const appReducer = combineReducers({
+  auth: authReducer,
+  user: userReducer,
+  account: accountReducer,
+  transfer: transferReducer,
+  payments: paymentsReducer,
+  deposit: depositReducer,
+  service: serviceReducer,
+  loan: loanReducer,
+  insurance: insuranceReducer,
+  cards: cardsReducer,
+  ui: uiReducer,
+  schemes: schemesReducer,
+  beneficiaries: beneficiariesReducer,
+  agent: agentReducer,
+  [baseApi.reducerPath]: baseApi.reducer,
+  [schemesApi.reducerPath]: schemesApi.reducer,
+});
+
+export const rootReducer = (state: any, action: any) => {
+  if (action.type === 'auth/logoutSession/fulfilled') {
+    state = undefined;
+  }
+  return appReducer(state, action);
+};

src/app/store.ts

@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import { baseApi } from '../services/api/baseApi';
+import { schemesApi } from '../modules/schemes/services/schemesApi';
+import { rootReducer } from './rootReducer';
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }).concat(baseApi.middleware, schemesApi.middleware),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/components/AppHeader/index.tsx

@@ -0,0 +1,97 @@
+import React, { memo } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+
+import { useTheme } from '../../theme';
+
+interface AppHeaderProps {
+  title: string;
+  subtitle?: string;
+  rightContent?: React.ReactNode;
+  showBackButton?: boolean;
+}
+
+const AppHeaderComponent = ({
+  title,
+  subtitle,
+  rightContent,
+  showBackButton,
+}: AppHeaderProps) => {
+  const theme = useTheme();
+  const navigation = useNavigation();
+  const shouldShowBackButton = showBackButton ?? navigation.canGoBack();
+
+  return (
+    <View style={styles.wrapper}>
+      <View style={styles.leading}>
+        {shouldShowBackButton ? (
+          <Pressable
+            onPress={() => navigation.goBack()}
+            style={[
+              styles.backButton,
+              {
+                backgroundColor: theme.colors.cardGlass,
+                borderColor: theme.colors.cardBorder,
+                borderRadius: theme.radius.pill,
+              },
+            ]}
+          >
+            <Ionicons name="chevron-back" size={20} color={theme.colors.textPrimary} />
+          </Pressable>
+        ) : null}
+        <View style={styles.copy}>
+          <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+          {/* {subtitle ? (
+            <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>{subtitle}</Text>
+          ) : null} */}
+        </View>
+      </View>
+      {rightContent}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  leading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    flex: 1,
+  },
+  copy: {
+    gap: 4,
+    flex: 1,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    lineHeight: 20,
+  },
+  subtitle: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  backButton: {
+    width: 42,
+    height: 42,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export const AppHeader = memo(AppHeaderComponent);

src/components/BalanceCard/index.tsx

@@ -0,0 +1,230 @@
+import React, { memo, useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from '@react-native-vector-icons/ionicons';
+
+import type { AccountSummary } from '../../types/app';
+import { useTheme } from '../../theme';
+import { formatCurrency } from '../../utils/formatters';
+
+interface BalanceCardProps {
+  account: AccountSummary;
+  secondaryLabel?: string;
+}
+
+const BalanceCardComponent = ({ account, secondaryLabel = 'SAVINGS ACCOUNT' }: BalanceCardProps) => {
+  const theme = useTheme();
+  const [isBalanceVisible, setIsBalanceVisible] = useState(true);
+
+  const formattedBalance = formatCurrency(account.availableBalance).replace('₹', '');
+
+  return (
+    <LinearGradient
+      colors={['#124577', '#124577', '#124577']}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={[styles.card, styles.gradientCard, { borderRadius: theme.radius.xl }]}
+    >
+      {/* Decorative Brand Accent */}
+      <View style={styles.brandAccent} />
+
+      <View style={styles.topRow}>
+        <View style={styles.bankInfo}>
+          <View style={styles.bankIconFrame}>
+            <Ionicons name="business" size={20} color="white" />
+          </View>
+          <View>
+            <Text style={styles.bankName}>CBS Bank</Text>
+            <Text style={styles.cardType}>{secondaryLabel}</Text>
+          </View>
+        </View>
+        {account.isPrimary && (
+          <View style={styles.primaryBadge}>
+            <Text style={styles.primaryBadgeText}>PRIMARY</Text>
+          </View>
+        )}
+      </View>
+
+      <View style={styles.mainContent}>
+        <Text style={styles.maskedNumber}>A/c {account.maskedNumber}</Text>
+        <View style={styles.balanceContainer}>
+          <Text style={styles.balanceLabel}>AVAILABLE BALANCE</Text>
+          <View style={styles.amountRow}>
+            <Text style={styles.amountValue}>
+              {isBalanceVisible ? `₹${formattedBalance}` : '₹ ••••••'}
+            </Text>
+            <Pressable
+              onPress={() => setIsBalanceVisible((currentValue) => !currentValue)}
+              style={styles.visibilityButton}
+              hitSlop={8}
+            >
+              <Ionicons
+                name={isBalanceVisible ? 'eye-outline' : 'eye-off-outline'}
+                size={20}
+                color="rgba(255, 255, 255, 0.7)"
+              />
+            </Pressable>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.footerRow}>
+        <View style={styles.footerItem}>
+          <Text style={styles.footerLabel}>ACCOUNT HOLDER</Text>
+          <Text style={styles.footerValue}>{account.accountHolder}</Text>
+        </View>
+        <View style={[styles.footerItem, styles.footerItemEnd]}>
+          <Text style={styles.footerLabel}>UPI STATUS</Text>
+          <View style={styles.upiRow}>
+            <View style={styles.upiDot} />
+            <Text style={styles.footerValue}>Active</Text>
+          </View>
+        </View>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 24,
+    gap: 32,
+    position: 'relative',
+    minHeight: 260,
+  },
+  gradientCard: {
+    overflow: 'hidden',
+  },
+  brandAccent: {
+    position: 'absolute',
+    top: -50,
+    right: -50,
+    width: 200,
+    height: 200,
+    borderRadius: 100,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  topRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  bankInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  bankIconFrame: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  bankName: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '900',
+    letterSpacing: -0.5,
+  },
+  cardType: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontSize: 10,
+    fontWeight: '800',
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+  },
+  primaryBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 10,
+    backgroundColor: 'white',
+  },
+  primaryBadgeText: {
+    color: '#124577',
+    fontSize: 10,
+    fontWeight: '900',
+    letterSpacing: 0.5,
+  },
+  mainContent: {
+    gap: 20,
+  },
+  maskedNumber: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '700',
+    letterSpacing: 1.5,
+  },
+  balanceContainer: {
+    gap: 4,
+  },
+  balanceLabel: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 1,
+  },
+  amountRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  amountValue: {
+    color: 'white',
+    fontSize: 36,
+    fontWeight: '900',
+    letterSpacing: -1,
+  },
+  visibilityButton: {
+    marginLeft: 12,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+  },
+  footerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    marginTop: 4,
+  },
+  footerItem: {
+    gap: 4,
+  },
+  footerItemEnd: {
+    alignItems: 'flex-end',
+  },
+  footerLabel: {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontSize: 9,
+    fontWeight: '800',
+    letterSpacing: 1,
+  },
+  footerValue: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  upiRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  upiDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: '#35D6A3',
+  },
+});
+
+
+
+export const BalanceCard = memo(BalanceCardComponent);

src/components/BottomSheet/index.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+
+interface BottomSheetProps {
+  visible: boolean;
+  title?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export const BottomSheet = ({ visible, title, onClose, children }: BottomSheetProps) => {
+  const theme = useTheme();
+  const translateY = useRef(new Animated.Value(320)).current;
+
+  useEffect(() => {
+    Animated.timing(translateY, {
+      toValue: visible ? 0 : 320,
+      duration: 220,
+      useNativeDriver: true,
+    }).start();
+  }, [translateY, visible]);
+
+  const handleBackdropPress = () => {
+    Keyboard.dismiss();
+    onClose();
+  };
+
+  return (
+    <Modal animationType="fade" transparent visible={visible} onRequestClose={onClose}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.flex}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 10 : 0}
+      >
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }]}>
+            <TouchableWithoutFeedback onPress={() => {}}>
+              <Animated.View
+                style={[
+                  styles.sheet,
+                  {
+                    backgroundColor: theme.colors.backgroundElevated,
+                    borderTopLeftRadius: theme.radius.lg,
+                    borderTopRightRadius: theme.radius.lg,
+                    transform: [{ translateY }],
+                  },
+                ]}
+              >
+                <View style={[styles.handle, { backgroundColor: theme.colors.cardBorder }]} />
+                {title ? (
+                  <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+                ) : null}
+                <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  showsVerticalScrollIndicator={false}
+                  bounces={false}
+                  contentContainerStyle={styles.sheetScroll}
+                >
+                  {children}
+                </ScrollView>
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    paddingHorizontal: 20,
+    paddingTop: 14,
+    paddingBottom: 28,
+    gap: 12,
+    maxHeight: '80%',
+  },
+  sheetScroll: {
+    flexGrow: 1,
+  },
+  handle: {
+    width: 42,
+    height: 4,
+    borderRadius: 999,
+    alignSelf: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+});

src/components/Button/index.tsx

@@ -0,0 +1,158 @@
+import React, { memo } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { useTheme } from '../../theme';
+import { haptics } from '../../services/haptics/haptics';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'cyber';
+
+interface ButtonProps {
+  title: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+  leftAccessory?: React.ReactNode;
+}
+
+const ButtonComponent = ({
+  title,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  fullWidth = true,
+  style,
+  leftAccessory,
+}: ButtonProps) => {
+  const theme = useTheme();
+
+  const handlePress = (e: GestureResponderEvent) => {
+    if (!disabled && !loading) {
+      haptics.selection();
+      onPress?.(e);
+    }
+  };
+
+  const isSolid = variant === 'primary' || variant === 'danger' || variant === 'cyber';
+
+
+  const containerStyle = [
+    styles.button,
+    {
+      borderRadius: theme.radius.md,
+      borderColor:
+        variant === 'ghost'
+          ? 'transparent'
+          : variant === 'secondary'
+            ? theme.colors.cardBorder
+            : variant === 'cyber'
+              ? theme.colors.cyberCyan + '30'
+              : 'transparent',
+      backgroundColor:
+        variant === 'secondary' ? theme.colors.cardGlass : 'transparent',
+      width: fullWidth ? ('100%' as const) : undefined,
+      opacity: disabled || loading ? 0.6 : 1,
+    },
+    variant === 'cyber' && {
+      shadowColor: theme.colors.cyberCyan,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.5,
+      shadowRadius: 10,
+      elevation: 8,
+    },
+    style,
+  ];
+
+  const content = (
+    <View style={styles.content}>
+      {loading ? (
+        <ActivityIndicator color={theme.colors.white} />
+      ) : (
+        <>
+          {leftAccessory}
+          <Text
+            style={[
+              styles.label,
+              {
+                color:
+                  variant === 'ghost'
+                    ? theme.colors.textPrimary
+                    : variant === 'secondary' ? theme.colors.textPrimary : theme.colors.white,
+                letterSpacing: variant === 'cyber' ? 2 : 0,
+                textTransform: variant === 'cyber' ? 'uppercase' : 'none',
+              },
+            ]}
+          >
+            {title}
+          </Text>
+        </>
+      )}
+    </View>
+  );
+
+  return (
+    <Pressable disabled={disabled || loading} onPress={handlePress} style={containerStyle}>
+      {isSolid ? (
+        <LinearGradient
+          colors={
+            variant === 'danger'
+              ? [theme.colors.danger, '#FF586E']
+              : variant === 'cyber'
+                ? ['#2563EB', '#3B82F6']
+                : [theme.colors.primary, theme.colors.primary]
+          }
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={[
+            styles.gradient,
+            {
+              borderRadius: theme.radius.md,
+            },
+          ]}
+        >
+          {content}
+        </LinearGradient>
+      ) : (
+        content
+      )}
+    </Pressable>
+  );
+};
+
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  gradient: {
+    width: '100%',
+  },
+  content: {
+    minHeight: 54,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    paddingHorizontal: 18,
+  },
+  label: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+});
+
+export const Button = memo(ButtonComponent);

src/components/Card/index.tsx

@@ -0,0 +1,45 @@
+import React, { memo, type PropsWithChildren } from 'react';
+import {
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+
+interface CardProps extends PropsWithChildren {
+  style?: StyleProp<ViewStyle>;
+  variant?: 'default' | 'glass';
+}
+
+const CardComponent = ({ children, style, variant = 'default' }: CardProps) => {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.card,
+        theme.shadows.soft,
+        {
+          backgroundColor: variant === 'glass' ? theme.colors.cardGlass : theme.colors.surface,
+          borderColor: theme.colors.cardBorder,
+          borderRadius: theme.radius.lg,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    padding: 18,
+  },
+});
+
+export const Card = memo(CardComponent);

src/components/DatePicker/index.tsx

@@ -0,0 +1,637 @@
+import React, { useState, useMemo, useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+  PanResponder,
+} from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { useTheme } from '../../theme';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const DAY_SIZE = Math.floor((SCREEN_WIDTH - 80) / 7);
+
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+const MONTHS_SHORT = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+// Generate year range: 1950 → current year + 10
+const CURRENT_YEAR = new Date().getFullYear();
+const YEAR_RANGE_START = 1950;
+const YEAR_RANGE_END = CURRENT_YEAR + 10;
+const YEARS = Array.from({ length: YEAR_RANGE_END - YEAR_RANGE_START + 1 }, (_, i) => YEAR_RANGE_START + i);
+
+interface DatePickerProps {
+  label?: string;
+  placeholder?: string;
+  value?: string; // DD/MM/YYYY
+  onDateChange: (dateStr: string) => void;
+  error?: string;
+  /** Max selectable date. Defaults to today */
+  maxDate?: Date;
+  /** Min selectable date */
+  minDate?: Date;
+}
+
+type PickerMode = 'days' | 'months' | 'years';
+
+const parseDDMMYYYY = (str: string | undefined): Date | null => {
+  if (!str) return null;
+  const parts = str.split('/');
+  if (parts.length !== 3) return null;
+  const d = parseInt(parts[0], 10);
+  const m = parseInt(parts[1], 10) - 1;
+  const y = parseInt(parts[2], 10);
+  if (isNaN(d) || isNaN(m) || isNaN(y)) return null;
+  return new Date(y, m, d);
+};
+
+const formatDDMMYYYY = (date: Date): string => {
+  const d = String(date.getDate()).padStart(2, '0');
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const y = date.getFullYear();
+  return `${d}/${m}/${y}`;
+};
+
+const isSameDay = (a: Date, b: Date) =>
+  a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
+
+export const DatePicker = ({
+  label,
+  placeholder = 'DD/MM/YYYY',
+  value,
+  onDateChange,
+  error,
+  maxDate,
+  minDate,
+}: DatePickerProps) => {
+  const theme = useTheme();
+  const today = useMemo(() => new Date(), []);
+
+  const selectedDate = useMemo(() => parseDDMMYYYY(value), [value]);
+  const [visible, setVisible] = useState(false);
+  const [viewMonth, setViewMonth] = useState(selectedDate?.getMonth() ?? today.getMonth());
+  const [viewYear, setViewYear] = useState(selectedDate?.getFullYear() ?? today.getFullYear());
+  const [pickerMode, setPickerMode] = useState<PickerMode>('days');
+
+  const yearScrollRef = useRef<ScrollView>(null);
+
+  const openCalendar = useCallback(() => {
+    const ref = selectedDate ?? today;
+    setViewMonth(ref.getMonth());
+    setViewYear(ref.getFullYear());
+    setPickerMode('days');
+    setVisible(true);
+  }, [selectedDate, today]);
+
+  // ── Month navigation ──────────────────────────────────────
+  const prevMonth = useCallback(() => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear(y => y - 1);
+    } else {
+      setViewMonth(m => m - 1);
+    }
+  }, [viewMonth]);
+
+  const nextMonth = useCallback(() => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear(y => y + 1);
+    } else {
+      setViewMonth(m => m + 1);
+    }
+  }, [viewMonth]);
+
+  // ── Swipe handler (PanResponder) ──────────────────────────
+  const swipeThreshold = 50;
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        // Only capture horizontal swipes
+        return Math.abs(gestureState.dx) > 15 && Math.abs(gestureState.dy) < 30;
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dx > swipeThreshold) {
+          // Swipe right → previous month (functional updates avoid stale closure)
+          setViewMonth(m => {
+            if (m === 0) {
+              setViewYear(y => y - 1);
+              return 11;
+            }
+            return m - 1;
+          });
+        } else if (gestureState.dx < -swipeThreshold) {
+          // Swipe left → next month
+          setViewMonth(m => {
+            if (m === 11) {
+              setViewYear(y => y + 1);
+              return 0;
+            }
+            return m + 1;
+          });
+        }
+      },
+    })
+  ).current;
+
+  // ── Day calculations ──────────────────────────────────────
+  const daysInMonth = useMemo(() => new Date(viewYear, viewMonth + 1, 0).getDate(), [viewYear, viewMonth]);
+  const firstDayOfWeek = useMemo(() => new Date(viewYear, viewMonth, 1).getDay(), [viewYear, viewMonth]);
+
+  const calendarDays = useMemo(() => {
+    const days: (number | null)[] = [];
+    for (let i = 0; i < firstDayOfWeek; i++) days.push(null);
+    for (let d = 1; d <= daysInMonth; d++) days.push(d);
+    return days;
+  }, [daysInMonth, firstDayOfWeek]);
+
+  const isDayDisabled = useCallback(
+    (day: number) => {
+      const d = new Date(viewYear, viewMonth, day);
+      if (maxDate && d > maxDate) return true;
+      if (minDate && d < minDate) return true;
+      return false;
+    },
+    [viewYear, viewMonth, maxDate, minDate],
+  );
+
+  const handleSelect = (day: number) => {
+    const d = new Date(viewYear, viewMonth, day);
+    onDateChange(formatDDMMYYYY(d));
+    setVisible(false);
+  };
+
+  // ── Month picker handler ──────────────────────────────────
+  const handleMonthSelect = (monthIndex: number) => {
+    setViewMonth(monthIndex);
+    setPickerMode('days');
+  };
+
+  // ── Year picker handler ───────────────────────────────────
+  const handleYearSelect = (year: number) => {
+    setViewYear(year);
+    setPickerMode('days');
+  };
+
+  // Auto-scroll to current year when year picker opens
+  const handleOpenYearPicker = useCallback(() => {
+    setPickerMode('years');
+    // Scroll to the current viewYear position after render
+    setTimeout(() => {
+      const yearIndex = YEARS.indexOf(viewYear);
+      if (yearIndex >= 0 && yearScrollRef.current) {
+        yearScrollRef.current.scrollTo({ y: Math.max(0, (yearIndex - 2) * 48), animated: false });
+      }
+    }, 100);
+  }, [viewYear]);
+
+  // ── Render: Days grid ─────────────────────────────────────
+  const renderDaysView = () => (
+    <>
+      {/* Header: tappable month & year */}
+      <View style={styles.calendarHeader}>
+        <Pressable onPress={prevMonth} hitSlop={12} style={[styles.navBtn, { backgroundColor: `${theme.colors.primary}10` }]}>
+          <Ionicons name="chevron-back" size={20} color={theme.colors.primary} />
+        </Pressable>
+
+        <View style={styles.monthYearWrap}>
+          <Pressable onPress={() => setPickerMode('months')} style={styles.headerTappable}>
+            <Text style={[styles.monthText, { color: theme.colors.primary }]}>{MONTHS[viewMonth]}</Text>
+            <Ionicons name="chevron-down" size={14} color={theme.colors.primary} style={{ marginLeft: 4 }} />
+          </Pressable>
+          <Pressable onPress={handleOpenYearPicker} style={styles.headerTappable}>
+            <Text style={[styles.yearText, { color: theme.colors.textMuted }]}>{viewYear}</Text>
+            <Ionicons name="chevron-down" size={12} color={theme.colors.textMuted} style={{ marginLeft: 3 }} />
+          </Pressable>
+        </View>
+
+        <Pressable onPress={nextMonth} hitSlop={12} style={[styles.navBtn, { backgroundColor: `${theme.colors.primary}10` }]}>
+          <Ionicons name="chevron-forward" size={20} color={theme.colors.primary} />
+        </Pressable>
+      </View>
+
+      {/* Weekday headers */}
+      <View style={styles.weekdayRow}>
+        {WEEKDAYS.map(wd => (
+          <View key={wd} style={[styles.dayCell, { width: DAY_SIZE, height: 32 }]}>
+            <Text style={[styles.weekdayText, { color: theme.colors.textMuted }]}>{wd}</Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Days grid with swipe */}
+      <View {...panResponder.panHandlers}>
+        <View style={styles.daysGrid}>
+          {calendarDays.map((day, idx) => {
+            if (day === null) {
+              return <View key={`empty-${idx}`} style={[styles.dayCell, { width: DAY_SIZE, height: DAY_SIZE }]} />;
+            }
+
+            const dateObj = new Date(viewYear, viewMonth, day);
+            const isToday = isSameDay(dateObj, today);
+            const isSelected = selectedDate ? isSameDay(dateObj, selectedDate) : false;
+            const disabled = isDayDisabled(day);
+
+            return (
+              <Pressable
+                key={day}
+                disabled={disabled}
+                onPress={() => handleSelect(day)}
+                style={[
+                  styles.dayCell,
+                  { width: DAY_SIZE, height: DAY_SIZE },
+                  isSelected && {
+                    backgroundColor: theme.colors.primary,
+                    borderRadius: DAY_SIZE / 2,
+                  },
+                  isToday && !isSelected && {
+                    borderWidth: 1.5,
+                    borderColor: theme.colors.primary,
+                    borderRadius: DAY_SIZE / 2,
+                  },
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.dayText,
+                    { color: theme.colors.textPrimary },
+                    isSelected && { color: theme.colors.white, fontWeight: '800' },
+                    isToday && !isSelected && { color: theme.colors.primary, fontWeight: '700' },
+                    disabled && { color: theme.colors.textMuted, opacity: 0.4 },
+                  ]}
+                >
+                  {day}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+
+      {/* Footer */}
+      <View style={styles.calendarFooter}>
+        <Pressable onPress={() => setVisible(false)} style={[styles.footerBtn, { borderColor: theme.colors.cardBorder }]}>
+          <Text style={[styles.footerBtnText, { color: theme.colors.textMuted }]}>Cancel</Text>
+        </Pressable>
+        <Pressable
+          onPress={() => {
+            setViewMonth(today.getMonth());
+            setViewYear(today.getFullYear());
+            handleSelect(today.getDate());
+          }}
+          style={[styles.footerBtn, styles.todayBtn, { backgroundColor: `${theme.colors.primary}12` }]}
+        >
+          <Text style={[styles.footerBtnText, { color: theme.colors.primary, fontWeight: '700' }]}>Today</Text>
+        </Pressable>
+      </View>
+    </>
+  );
+
+  // ── Render: Month picker grid ─────────────────────────────
+  const renderMonthsView = () => (
+    <>
+      <View style={styles.pickerHeader}>
+        <Pressable onPress={() => setPickerMode('days')} hitSlop={12}>
+          <Ionicons name="arrow-back" size={22} color={theme.colors.textPrimary} />
+        </Pressable>
+        <Text style={[styles.pickerTitle, { color: theme.colors.textPrimary }]}>Select Month</Text>
+        <View style={{ width: 22 }} />
+      </View>
+
+      <View style={styles.monthGrid}>
+        {MONTHS_SHORT.map((m, idx) => {
+          const isActive = idx === viewMonth;
+          return (
+            <Pressable
+              key={m}
+              onPress={() => handleMonthSelect(idx)}
+              style={[
+                styles.monthCell,
+                {
+                  backgroundColor: isActive ? theme.colors.primary : `${theme.colors.primary}08`,
+                  borderColor: isActive ? theme.colors.primary : theme.colors.cardBorder,
+                },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.monthCellText,
+                  { color: isActive ? '#fff' : theme.colors.textPrimary },
+                ]}
+              >
+                {m}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </>
+  );
+
+  // ── Render: Year picker list ──────────────────────────────
+  const renderYearsView = () => (
+    <>
+      <View style={styles.pickerHeader}>
+        <Pressable onPress={() => setPickerMode('days')} hitSlop={12}>
+          <Ionicons name="arrow-back" size={22} color={theme.colors.textPrimary} />
+        </Pressable>
+        <Text style={[styles.pickerTitle, { color: theme.colors.textPrimary }]}>Select Year</Text>
+        <View style={{ width: 22 }} />
+      </View>
+
+      <ScrollView
+        ref={yearScrollRef}
+        style={styles.yearList}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.yearListContent}
+      >
+        {YEARS.map(year => {
+          const isActive = year === viewYear;
+          return (
+            <Pressable
+              key={year}
+              onPress={() => handleYearSelect(year)}
+              style={[
+                styles.yearRow,
+                {
+                  backgroundColor: isActive ? `${theme.colors.primary}12` : 'transparent',
+                  borderColor: isActive ? theme.colors.primary : 'transparent',
+                },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.yearRowText,
+                  {
+                    color: isActive ? theme.colors.primary : theme.colors.textPrimary,
+                    fontWeight: isActive ? '800' : '500',
+                  },
+                ]}
+              >
+                {year}
+              </Text>
+              {isActive && (
+                <Ionicons name="checkmark" size={20} color={theme.colors.primary} />
+              )}
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </>
+  );
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
+          {label.toUpperCase()}
+        </Text>
+      )}
+
+      {/* Tappable field */}
+      <Pressable
+        onPress={openCalendar}
+        style={[
+          styles.inputWrapper,
+          {
+            borderColor: error ? theme.colors.error : theme.colors.cardBorder,
+            backgroundColor: 'rgba(0, 0, 0, 0.02)',
+          },
+        ]}
+      >
+        <Ionicons name="calendar-outline" size={18} color={theme.colors.primary} style={{ marginRight: 10 }} />
+        <Text
+          style={[
+            styles.inputText,
+            { color: value ? theme.colors.textPrimary : theme.colors.textMuted },
+          ]}
+        >
+          {value || placeholder}
+        </Text>
+        <Ionicons name="chevron-down" size={16} color={theme.colors.textMuted} />
+      </Pressable>
+
+      {error && <Text style={[styles.errorText, { color: theme.colors.error }]}>{error}</Text>}
+
+      {/* Calendar Modal */}
+      <Modal transparent visible={visible} animationType="fade" onRequestClose={() => setVisible(false)}>
+        <Pressable style={[styles.overlay, { backgroundColor: theme.colors.overlay }]} onPress={() => setVisible(false)}>
+          <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)}>
+            <Pressable
+              style={[
+                styles.calendarCard,
+                {
+                  backgroundColor: theme.colors.backgroundElevated,
+                  borderColor: theme.colors.cardBorder,
+                },
+              ]}
+              onPress={() => {}} // prevent dismiss when tapping inside
+            >
+              {pickerMode === 'days' && renderDaysView()}
+              {pickerMode === 'months' && renderMonthsView()}
+              {pickerMode === 'years' && renderYearsView()}
+            </Pressable>
+          </Animated.View>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    marginLeft: 4,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 52,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+  },
+  inputText: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  errorText: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginTop: 2,
+    marginLeft: 4,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  calendarCard: {
+    width: SCREEN_WIDTH - 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+
+  // ── Header ───────────────────────────────────
+  calendarHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  navBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  monthYearWrap: {
+    alignItems: 'center',
+  },
+  headerTappable: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  monthText: {
+    fontSize: 18,
+    fontWeight: '800',
+  },
+  yearText: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginTop: 2,
+  },
+
+  // ── Days grid ────────────────────────────────
+  weekdayRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: 4,
+  },
+  weekdayText: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+  daysGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+  },
+  dayCell: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+
+  // ── Footer ───────────────────────────────────
+  calendarFooter: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 12,
+    marginTop: 16,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(0,0,0,0.05)',
+  },
+  footerBtn: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  todayBtn: {
+    borderWidth: 0,
+  },
+  footerBtnText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+
+  // ── Month / Year picker shared ───────────────
+  pickerHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  pickerTitle: {
+    fontSize: 17,
+    fontWeight: '800',
+  },
+
+  // ── Month picker grid ────────────────────────
+  monthGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+    justifyContent: 'center',
+  },
+  monthCell: {
+    width: (SCREEN_WIDTH - 100) / 3,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  monthCellText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+
+  // ── Year picker list ─────────────────────────
+  yearList: {
+    maxHeight: 300,
+  },
+  yearListContent: {
+    paddingBottom: 8,
+  },
+  yearRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    borderWidth: 1.5,
+    marginBottom: 4,
+  },
+  yearRowText: {
+    fontSize: 16,
+  },
+});

src/components/EmptyState/index.tsx

@@ -0,0 +1,69 @@
+import React, { memo } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Button } from '../Button';
+
+interface EmptyStateProps {
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+const EmptyStateComponent = ({
+  title,
+  description,
+  actionLabel,
+  onAction,
+}: EmptyStateProps) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.icon,
+          {
+            backgroundColor: theme.colors.cardGlass,
+            borderColor: theme.colors.cardBorder,
+          },
+        ]}
+      />
+      <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+      <Text style={[styles.description, { color: theme.colors.textSecondary }]}>
+        {description}
+      </Text>
+      {actionLabel && onAction ? <Button title={actionLabel} onPress={onAction} /> : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: 12,
+    paddingVertical: 16,
+  },
+  icon: {
+    width: 72,
+    height: 72,
+    borderRadius: 24,
+    borderWidth: 1,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  description: {
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+});
+
+export const EmptyState = memo(EmptyStateComponent);

src/components/Input/index.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect } from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type TextInputProps,
+} from 'react-native';
+import Animated, { 
+  useSharedValue, 
+  useAnimatedStyle, 
+  withTiming, 
+  interpolateColor,
+  withRepeat,
+  Easing
+} from 'react-native-reanimated';
+
+import { useTheme } from '../../theme';
+
+interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  leftAccessory?: React.ReactNode;
+  rightAccessory?: React.ReactNode;
+}
+
+export const Input = ({
+  label,
+  error,
+  leftAccessory,
+  rightAccessory,
+  ...props
+}: InputProps) => {
+  const theme = useTheme();
+  const focused = useSharedValue(0);
+
+  const handleFocus = () => {
+    focused.value = withTiming(1, { duration: 250 });
+  };
+
+  const handleBlur = () => {
+    focused.value = withTiming(0, { duration: 250 });
+  };
+
+  const containerAnimatedStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(
+      focused.value,
+      [0, 1],
+      [theme.colors.cardBorder, theme.colors.primary]
+    ),
+    backgroundColor: interpolateColor(
+      focused.value,
+      [0, 1],
+      ['rgba(0, 0, 0, 0.02)', '#FFFFFF']
+    ),
+    transform: [{ scale: withTiming(focused.value === 1 ? 1.01 : 1, { duration: 200 }) }],
+  }));
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
+          {label.toUpperCase()}
+        </Text>
+      )}
+      <Animated.View style={[styles.inputWrapper, containerAnimatedStyle]}>
+        {leftAccessory && <View style={styles.accessory}>{leftAccessory}</View>}
+        <TextInput
+          {...props}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={theme.colors.textMuted}
+          style={[styles.input, { color: theme.colors.textPrimary }]}
+        />
+        {rightAccessory && <View style={styles.accessory}>{rightAccessory}</View>}
+      </Animated.View>
+      {error && <Text style={[styles.errorText, { color: theme.colors.error }]}>{error}</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    marginLeft: 4,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 52,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    overflow: 'hidden',
+  },
+  input: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: '500',
+    height: '100%',
+  },
+  accessory: {
+    marginRight: 10,
+    opacity: 0.7,
+  },
+  errorText: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginTop: 2,
+    marginLeft: 4,
+  },
+});

src/components/KeyboardAwareScrollView/index.tsx

@@ -0,0 +1,76 @@
+import React, { useRef } from 'react';
+import {
+  ScrollView,
+  Platform,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type TextInput,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import { useKeyboardHandler } from '../../hooks/useKeyboardHandler';
+
+interface KeyboardAwareScrollViewProps {
+  children: React.ReactNode;
+  /** Style for the content container inside the scroll view */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** Style for the scroll view wrapper */
+  style?: StyleProp<ViewStyle>;
+  /** Extra bottom padding to add when keyboard is visible (e.g. for footers) */
+  extraPadding?: number;
+  /** Whether to show scroll indicator */
+  showsVerticalScrollIndicator?: boolean;
+}
+
+/**
+ * A drop-in ScrollView replacement that automatically adds bottom padding
+ * when the keyboard opens, ensuring all inputs remain visible.
+ *
+ * Works reliably on BOTH iOS and Android without KeyboardAvoidingView.
+ * Uses animated padding for smooth transitions.
+ */
+export const KeyboardAwareScrollView = ({
+  children,
+  contentContainerStyle,
+  style,
+  extraPadding = 40,
+  showsVerticalScrollIndicator = false,
+}: KeyboardAwareScrollViewProps) => {
+  const scrollRef = useRef<ScrollView>(null);
+  const { keyboardHeight, isVisible } = useKeyboardHandler();
+
+  // Calculate the dynamic padding: keyboard height + extra buffer
+  const bottomPad = isVisible ? keyboardHeight + extraPadding : 0;
+
+  return (
+    <ScrollView
+      ref={scrollRef}
+      style={[styles.flex, style]}
+      contentContainerStyle={[
+        contentContainerStyle,
+        { paddingBottom: (contentContainerStyle as any)?.paddingBottom || 40 + bottomPad },
+      ]}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="interactive"
+      automaticallyAdjustKeyboardInsets={false}
+      overScrollMode="always"
+      bounces
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+});

src/components/KeyboardSafeView/index.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+interface KeyboardSafeViewProps {
+  /**
+   * Content to render inside the keyboard-safe container.
+   */
+  children: React.ReactNode;
+
+  /**
+   * If true, wraps children in a ScrollView that scrolls to the focused input.
+   * Use for forms and long content screens.
+   * @default false
+   */
+  scrollable?: boolean;
+
+  /**
+   * Extra vertical offset (e.g. for headers, tab bars, safe areas).
+   * On iOS this is added to the KeyboardAvoidingView's keyboardVerticalOffset.
+   * @default 0
+   */
+  extraOffset?: number;
+
+  /**
+   * Custom style for the outer container.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Custom contentContainerStyle for the inner ScrollView (only used when scrollable=true).
+   */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether to dismiss the keyboard when tapping outside inputs.
+   * @default true
+   */
+  dismissOnTap?: boolean;
+
+  /**
+   * Whether keyboard should persist taps on inner elements.
+   * @default 'handled'
+   */
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+
+  /**
+   * ScrollView keyboardDismissMode.
+   * @default 'interactive'
+   */
+  keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+
+  /**
+   * Whether to show the scroll indicator when scrollable.
+   * @default false
+   */
+  showsVerticalScrollIndicator?: boolean;
+
+  /**
+   * Enable bounces on iOS ScrollView.
+   * @default true
+   */
+  bounces?: boolean;
+}
+
+/**
+ * A reusable keyboard-safe wrapper that handles:
+ * - KeyboardAvoidingView with correct behavior for iOS/Android
+ * - Optional ScrollView with auto-scroll to focused input
+ * - Dismiss keyboard on outside tap
+ * - Proper offsets for headers, tab bars, and safe areas
+ */
+export const KeyboardSafeView = ({
+  children,
+  scrollable = false,
+  extraOffset = 0,
+  style,
+  contentContainerStyle,
+  dismissOnTap = true,
+  keyboardShouldPersistTaps = 'handled',
+  keyboardDismissMode = 'interactive',
+  showsVerticalScrollIndicator = false,
+  bounces = true,
+}: KeyboardSafeViewProps) => {
+  // iOS: 'padding' works best, adds padding at the bottom
+  // Android: 'height' or undefined works best (Android handles it natively in most cases)
+  const behavior = Platform.OS === 'ios' ? 'padding' as const : 'height' as const;
+
+  // Base offset: accounts for navigation header height on iOS
+  // Android's windowSoftInputMode handles most of the offset natively
+  const baseOffset = Platform.OS === 'ios' ? 90 : 0;
+  const totalOffset = baseOffset + extraOffset;
+
+  const content = scrollable ? (
+    <ScrollView
+      contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      keyboardDismissMode={keyboardDismissMode}
+      bounces={bounces}
+      automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
+    >
+      {children}
+    </ScrollView>
+  ) : (
+    <View style={[styles.flex, contentContainerStyle]}>
+      {children}
+    </View>
+  );
+
+  const wrappedContent = dismissOnTap && !scrollable ? (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+      {content}
+    </TouchableWithoutFeedback>
+  ) : (
+    content
+  );
+
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior}
+      style={[styles.flex, style]}
+      keyboardVerticalOffset={totalOffset}
+    >
+      {wrappedContent}
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+});
+
+export default KeyboardSafeView;

src/components/Loader/index.tsx

@@ -0,0 +1,75 @@
+import React, { memo, useEffect, useRef } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+
+interface LoaderProps {
+  size?: 'small' | 'large';
+  style?: StyleProp<ViewStyle>;
+}
+
+const LoaderComponent = ({ size = 'large', style }: LoaderProps) => {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.loader, style]}>
+      <ActivityIndicator color={theme.colors.accent} size={size} />
+    </View>
+  );
+};
+
+interface SkeletonBlockProps {
+  height?: number;
+  width?: number | `${number}%`;
+}
+
+export const SkeletonBlock = ({ height = 18, width = '100%' }: SkeletonBlockProps) => {
+  const theme = useTheme();
+  const opacity = useRef(new Animated.Value(0.35)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.75,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.35,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      style={{
+        height,
+        width,
+        borderRadius: 999,
+        backgroundColor: theme.colors.cardGlass,
+        opacity,
+      }}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  loader: {
+    paddingVertical: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export const Loader = memo(LoaderComponent);

src/components/Modal/index.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+
+interface AppModalProps {
+  visible: boolean;
+  title: string;
+  description?: string;
+  onClose: () => void;
+  children?: React.ReactNode;
+}
+
+export const AppModal = ({
+  visible,
+  title,
+  description,
+  onClose,
+  children,
+}: AppModalProps) => {
+  const theme = useTheme();
+
+  const handleOverlayPress = () => {
+    Keyboard.dismiss();
+    onClose();
+  };
+
+  return (
+    <Modal transparent visible={visible} animationType="fade" onRequestClose={onClose}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.flex}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 10 : 0}
+      >
+        <TouchableWithoutFeedback onPress={handleOverlayPress}>
+          <View style={[styles.overlay, { backgroundColor: theme.colors.overlay }]}>
+            <TouchableWithoutFeedback onPress={() => {}}>
+              <View
+                style={[
+                  styles.content,
+                  {
+                    backgroundColor: theme.colors.backgroundElevated,
+                    borderRadius: theme.radius.lg,
+                    borderColor: theme.colors.cardBorder,
+                  },
+                ]}
+              >
+                <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+                {description ? (
+                  <Text style={[styles.description, { color: theme.colors.textSecondary }]}>
+                    {description}
+                  </Text>
+                ) : null}
+                <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  showsVerticalScrollIndicator={false}
+                  bounces={false}
+                  contentContainerStyle={styles.childrenScroll}
+                >
+                  {children}
+                </ScrollView>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 20,
+  },
+  content: {
+    borderWidth: 1,
+    padding: 20,
+    gap: 12,
+    maxHeight: '80%',
+  },
+  childrenScroll: {
+    flexGrow: 1,
+    gap: 12,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});

src/components/ScreenShell/index.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  StatusBar,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { useTheme } from '../../theme';
+import { AppHeader } from '../AppHeader';
+import { TAB_BAR_HEIGHT } from '../../utils/layoutConstants';
+
+interface ScreenShellProps {
+  title?: string;
+  subtitle?: string;
+  rightContent?: React.ReactNode;
+  scrollable?: boolean;
+  children: React.ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  transparent?: boolean;
+  /**
+   * Extra keyboard vertical offset (e.g. for screens with custom headers or tab bars).
+   * Added on top of the default offset.
+   * @default 0
+   */
+  keyboardExtraOffset?: number;
+  /**
+   * Whether to enable keyboard avoidance for this screen.
+   * @default true
+   */
+  keyboardAware?: boolean;
+  /**
+   * Whether this screen is rendered inside a bottom tab navigator
+   * with an absolutely-positioned tab bar. When true, adds bottom
+   * padding so content never hides behind the tab bar.
+   * @default true
+   */
+  withTabBar?: boolean;
+  fixedFooter?: React.ReactNode;
+}
+
+export const ScreenShell = ({
+  title,
+  subtitle,
+  rightContent,
+  scrollable = true,
+  children,
+  contentContainerStyle,
+  transparent = false,
+  keyboardExtraOffset = 0,
+  keyboardAware = true,
+  withTabBar = true,
+  fixedFooter,
+}: ScreenShellProps) => {
+  const theme = useTheme();
+
+  // iOS needs 'padding' behavior, Android handles it natively via windowSoftInputMode
+  // but we use 'height' as a fallback for Android screens that need it
+  const kavBehavior = Platform.OS === 'ios' ? 'padding' as const : 'height' as const;
+  // Base offset accounts for the navigation header + safe area
+  const baseOffset = Platform.OS === 'ios' ? 90 : 0;
+  const totalOffset = baseOffset + keyboardExtraOffset;
+
+  // Bottom spacing: if inside tab navigator, add TAB_BAR_HEIGHT + breathing room
+  // If there's a fixedFooter, we don't necessarily need tab bar padding on the scroll view,
+  // but let's leave it for safety or adjust based on layout.
+  const tabBarPadding = withTabBar ? TAB_BAR_HEIGHT + 16 : 20;
+
+  const scrollContent = (
+    <ScrollView
+      contentContainerStyle={[
+        styles.content,
+        { paddingBottom: tabBarPadding },
+        contentContainerStyle,
+      ]}
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="interactive"
+      automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
+    >
+      {children}
+    </ScrollView>
+  );
+
+  const staticContent = (
+    <View style={styles.flex}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View
+          style={[
+            styles.content,
+            styles.staticContent,
+            { paddingBottom: withTabBar ? TAB_BAR_HEIGHT : 0 },
+            contentContainerStyle,
+          ]}
+        >
+          {children}
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+
+  const content = scrollable ? scrollContent : staticContent;
+
+  const innerContent = keyboardAware ? (
+    <KeyboardAvoidingView
+      behavior={kavBehavior}
+      style={styles.flex}
+      keyboardVerticalOffset={totalOffset}
+    >
+      {content}
+    </KeyboardAvoidingView>
+  ) : (
+    content
+  );
+
+  const container = (
+    <SafeAreaView edges={['top']} style={styles.flex}>
+      {/* ✅ Status Bar Added */}
+      <StatusBar
+        barStyle={'dark-content'}
+        backgroundColor="transparent"
+        translucent
+      />
+
+      <View style={[styles.frame, transparent && styles.transparentFrame]}>
+        {title ? (
+          <AppHeader
+            title={title}
+            subtitle={subtitle}
+            rightContent={rightContent}
+          />
+        ) : null}
+
+        {innerContent}
+        {fixedFooter}
+      </View>
+    </SafeAreaView>
+  );
+
+  if (transparent) {
+    return container;
+  }
+
+  return (
+    <LinearGradient
+      colors={theme.colors.backgroundGradient}
+      style={styles.flex}
+    >
+      {container}
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  frame: {
+    flex: 1,
+    paddingHorizontal: 10,
+    gap: 18,
+  },
+  transparentFrame: {
+    paddingHorizontal: 0,
+  },
+  content: {
+    gap: 16,
+  },
+  staticContent: {
+    flex: 1,
+  },
+});
+
+export default ScreenShell;

src/components/ToastHost/index.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { selectToasts } from '../../modules/ui/store/uiSelectors';
+import { uiActions } from '../../modules/ui/store/uiSlice';
+import { useTheme } from '../../theme';
+
+interface ToastCardProps {
+  id: string;
+  title: string;
+  description?: string;
+  type: 'success' | 'error' | 'info';
+}
+
+const ToastCard = ({ id, title, description, type }: ToastCardProps) => {
+  const dispatch = useAppDispatch();
+  const theme = useTheme();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      dispatch(uiActions.dismissToast(id));
+    }, 3200);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [dispatch, id]);
+
+  const accentColor =
+    type === 'success'
+      ? theme.colors.success
+      : type === 'error'
+        ? theme.colors.danger
+        : theme.colors.info;
+
+  return (
+    <Pressable
+      onPress={() => dispatch(uiActions.dismissToast(id))}
+      style={[
+        styles.toast,
+        {
+          backgroundColor: theme.colors.backgroundElevated,
+          borderColor: theme.colors.cardBorder,
+          borderRadius: theme.radius.md,
+        },
+      ]}
+    >
+      <View style={[styles.accent, { backgroundColor: accentColor }]} />
+      <View style={styles.copy}>
+        <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: theme.colors.textSecondary }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+};
+
+export const ToastHost = () => {
+  const toasts = useAppSelector(selectToasts);
+
+  if (!toasts.length) {
+    return null;
+  }
+
+  return (
+    <SafeAreaView pointerEvents="box-none" style={styles.host}>
+      {toasts.slice(-3).map((toast) => (
+        <ToastCard key={toast.id} {...toast} />
+      ))}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  host: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    paddingHorizontal: 20,
+    gap: 10,
+  },
+  toast: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    padding: 14,
+    gap: 12,
+  },
+  accent: {
+    width: 6,
+    borderRadius: 999,
+  },
+  copy: {
+    flex: 1,
+    gap: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  description: {
+    fontSize: 12,
+    lineHeight: 18,
+  },
+});

src/components/TransactionItem/index.tsx

@@ -0,0 +1,170 @@
+import React, { memo, useMemo } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+
+import type { TransactionRecord } from '../../types/app';
+import { useTheme } from '../../theme';
+import { formatCurrency, formatDate } from '../../utils/formatters';
+
+interface TransactionItemProps {
+  item: TransactionRecord;
+}
+
+type RiskLevel = 'safe' | 'medium' | 'high';
+
+const TransactionItemComponent = ({ item }: TransactionItemProps) => {
+  const theme = useTheme();
+  const isCredit = item.direction === 'credit';
+
+  const riskLevel = useMemo<RiskLevel>(() => {
+    const sum = item.id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    if (sum % 10 < 7) return 'safe';
+    if (sum % 10 < 9) return 'medium';
+    return 'high';
+  }, [item.id]);
+
+  const riskConfig = {
+    safe: { color: theme.colors.success, label: 'SECURE', icon: 'shield-checkmark' as const },
+    medium: { color: theme.colors.warning, label: 'FLAGGED', icon: 'warning' as const },
+    high: { color: theme.colors.danger, label: 'HIGH RISK', icon: 'alert-circle' as const },
+  }[riskLevel];
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          borderBottomColor: 'rgba(255, 255, 255, 0.05)',
+        },
+      ]}
+    >
+      <View style={styles.leading}>
+        <View
+          style={[
+            styles.icon,
+            {
+              backgroundColor: isCredit
+                ? `${theme.colors.success}10`
+                : 'rgba(255, 255, 255, 0.05)',
+              borderColor: isCredit ? `${theme.colors.success}30` : 'rgba(255, 255, 255, 0.1)',
+            },
+          ]}
+        >
+          <Ionicons 
+            name={isCredit ? 'chevron-down' : 'chevron-up'} 
+            size={18} 
+            color={isCredit ? theme.colors.success : theme.colors.white} 
+          />
+        </View>
+        <View style={styles.copy}>
+          <View style={styles.titleRow}>
+            <Text style={[styles.title, { color: theme.colors.white }]}>{item.title}</Text>
+          </View>
+          <View style={styles.subtitleRow}>
+            <Text style={[styles.subtitle, { color: 'rgba(255, 255, 255, 0.5)' }]}>
+              {item.counterparty}
+            </Text>
+            <View style={styles.dot} />
+            <Text style={[styles.subtitle, { color: 'rgba(255, 255, 255, 0.5)' }]}>
+              {formatDate(item.occurredAt)}
+            </Text>
+          </View>
+        </View>
+      </View>
+      
+      <View style={styles.trailing}>
+        <Text
+          style={[
+            styles.amount,
+            { color: isCredit ? theme.colors.success : theme.colors.white },
+          ]}
+        >
+          {isCredit ? '+' : '-'}
+          {formatCurrency(item.amount)}
+        </Text>
+        <View style={[styles.riskBadge, { backgroundColor: `${riskConfig.color}10`, borderColor: `${riskConfig.color}20` }]}>
+          <Text style={[styles.riskText, { color: riskConfig.color }]}>{riskConfig.label}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 18,
+    borderBottomWidth: 1,
+  },
+  leading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+    flex: 1,
+  },
+  icon: {
+    width: 46,
+    height: 46,
+    borderRadius: 23,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  copy: {
+    gap: 4,
+    flex: 1,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '800',
+    letterSpacing: -0.3,
+  },
+  subtitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  subtitle: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  trailing: {
+    alignItems: 'flex-end',
+    gap: 4,
+  },
+  amount: {
+    fontSize: 16,
+    fontWeight: '800',
+    letterSpacing: -0.2,
+  },
+  riskBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 6,
+    borderWidth: 1,
+  },
+  riskText: {
+    fontSize: 8,
+    fontWeight: '900',
+    letterSpacing: 0.5,
+  },
+});
+
+
+export const TransactionItem = memo(TransactionItemComponent);

src/components/index.ts

@@ -0,0 +1,15 @@
+export * from './AppHeader';
+export * from './BalanceCard';
+export * from './BottomSheet';
+export * from './Button';
+export * from './Card';
+export * from './DatePicker';
+export * from './EmptyState';
+export * from './Input';
+export * from './KeyboardAwareScrollView';
+export * from './KeyboardSafeView';
+export * from './Loader';
+export * from './Modal';
+export * from './ScreenShell';
+export * from './ToastHost';
+export * from './TransactionItem';

src/config/appConfig.ts

@@ -0,0 +1,16 @@
+import { env } from './env';
+
+export const appConfig = {
+  appName: 'BankCBS',
+  supportEmail: 'support@bankcbs.dev',
+  security: {
+    sessionTimeoutMs: env.sessionTimeoutMs,
+    biometricPromptTitle: 'Verify your identity',
+  },
+  features: {
+    useMockServer: env.useMockServer,
+    enableBiometrics: true,
+    enablePushNotifications: true,
+    enableChatSupport: true,
+  },
+};

src/config/env.ts

@@ -0,0 +1,5 @@
+export const env = {
+  apiBaseUrl: 'https://sandbox.bankcbs.dev/v1',
+  useMockServer: true,
+  sessionTimeoutMs: 300000,
+};

src/constants/queryTags.ts

@@ -0,0 +1,29 @@
+export const QUERY_TAGS = [
+  'Auth',
+  'User',
+  'Accounts',
+  'Transactions',
+  'Beneficiaries',
+  'Transfer',
+  'Payments',
+  'Deposits',
+  'Services',
+  'Loans',
+  'LoanActive',
+  'LoanApplications',
+  'LoanDocuments',
+  'LoanHistory',
+  'LoanNotifications',
+  'Insurance',
+  'Cards',
+  'Profile',
+  'Branches',
+  'AgentDashboard',
+  'AgentCustomers',
+  'AgentCollections',
+  'AgentCommission',
+  'AgentLoans',
+  'AgentSms',
+] as const;
+
+export type QueryTag = (typeof QUERY_TAGS)[number];

src/constants/routes.ts

@@ -0,0 +1,33 @@
+export const ROUTES = {
+  splash: 'Splash',
+  login: 'Login',
+  otp: 'OTP',
+  mpinSetup: 'MPINSetup',
+  home: 'Home',
+  transferType: 'TransferType',
+  transferBeneficiary: 'TransferBeneficiary',
+  transferAmount: 'TransferAmount',
+  transferConfirm: 'TransferConfirm',
+  transferSuccess: 'TransferSuccess',
+  paymentsHome: 'PaymentsHome',
+  upiScan: 'UpiScan',
+  upiAmount: 'UpiAmount',
+  upiPin: 'UpiPin',
+  upiSuccess: 'UpiSuccess',
+  depositType: 'DepositType',
+  depositDetails: 'DepositDetails',
+  depositConfirm: 'DepositConfirm',
+  depositSuccess: 'DepositSuccess',
+  servicesHub: 'ServicesHub',
+  serviceRequest: 'ServiceRequest',
+  serviceSubmit: 'ServiceSubmit',
+  serviceTrack: 'ServiceTrack',
+  supportChat: 'SupportChat',
+  loanOverview: 'LoanOverview',
+  emiCalculator: 'EmiCalculator',
+  insuranceOverview: 'InsuranceOverview',
+  cardsOverview: 'CardsOverview',
+  cardControls: 'CardControls',
+  profile: 'Profile',
+  language: 'Language',
+} as const;

src/constants/translations.ts

@@ -0,0 +1,58 @@
+import type { LanguageCode } from '../types/app';
+
+export const translations: Record<LanguageCode, Record<string, string>> = {
+  en: {
+    welcomeBack: 'Welcome back',
+    secureLogin: 'Secure login',
+    verifyOtp: 'Verify OTP',
+    setupMpin: 'Set up MPIN',
+    availableBalance: 'Available balance',
+    quickActions: 'Quick actions',
+    recentTransactions: 'Recent transactions',
+    spendingAnalytics: 'Spending analytics',
+    transferMoney: 'Transfer money',
+    upiPayments: 'UPI payments',
+    depositPlans: 'Deposit plans',
+    serviceDesk: 'Service desk',
+    cardControls: 'Card controls',
+    profile: 'Profile',
+    trackRequests: 'Track requests',
+    supportChat: 'Support chat',
+  },
+  hi: {
+    welcomeBack: 'फिर से स्वागत है',
+    secureLogin: 'सुरक्षित लॉगिन',
+    verifyOtp: 'ओटीपी सत्यापित करें',
+    setupMpin: 'एमपिन सेट करें',
+    availableBalance: 'उपलब्ध बैलेंस',
+    quickActions: 'त्वरित कार्य',
+    recentTransactions: 'हाल की ट्रांजैक्शन',
+    spendingAnalytics: 'खर्च विश्लेषण',
+    transferMoney: 'पैसे ट्रांसफर करें',
+    upiPayments: 'यूपीआई भुगतान',
+    depositPlans: 'जमा योजनाएं',
+    serviceDesk: 'सेवा डेस्क',
+    cardControls: 'कार्ड नियंत्रण',
+    profile: 'प्रोफाइल',
+    trackRequests: 'अनुरोध ट्रैक करें',
+    supportChat: 'सपोर्ट चैट',
+  },
+  bn: {
+    welcomeBack: 'আবার স্বাগতম',
+    secureLogin: 'নিরাপদ লগইন',
+    verifyOtp: 'ওটিপি যাচাই করুন',
+    setupMpin: 'এমপিন সেট করুন',
+    availableBalance: 'উপলব্ধ ব্যালেন্স',
+    quickActions: 'দ্রুত কাজ',
+    recentTransactions: 'সাম্প্রতিক লেনদেন',
+    spendingAnalytics: 'খরচের বিশ্লেষণ',
+    transferMoney: 'টাকা পাঠান',
+    upiPayments: 'ইউপিআই পেমেন্ট',
+    depositPlans: 'ডিপোজিট প্ল্যান',
+    serviceDesk: 'সার্ভিস ডেস্ক',
+    cardControls: 'কার্ড কন্ট্রোল',
+    profile: 'প্রোফাইল',
+    trackRequests: 'অনুরোধ ট্র্যাক করুন',
+    supportChat: 'সাপোর্ট চ্যাট',
+  },
+};

src/hooks/useAppBootstrap.ts

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+
+import { useAppDispatch, useAppSelector } from '../app/hooks';
+import { bootstrapAuthSession, logoutSession } from '../modules/auth/store/authThunk';
+import { selectIsAuthenticated } from '../modules/auth/store/authSelectors';
+import { seedDashboardState } from '../modules/home/store/accountThunk';
+import { seedBeneficiaries } from '../modules/transfer/store/transferThunk';
+import { seedRecentPayees } from '../modules/payments/store/paymentsThunk';
+import { seedDepositProducts } from '../modules/deposit/store/depositThunk';
+import {
+  seedServiceRequests,
+  seedSupportMessages,
+} from '../modules/services/store/serviceThunk';
+import { seedLoanProducts } from '../modules/loan/store/loanThunk';
+import { seedInsurancePlans } from '../modules/insurance/store/insuranceThunk';
+import { seedCards } from '../modules/cards/store/cardsThunk';
+import { seedUserProfile } from '../modules/profile/store/userThunk';
+import { markAppReady } from '../modules/ui/store/uiThunk';
+import { registerUnauthorizedHandler } from '../services/api/interceptors';
+import { registerForPushNotifications } from '../services/notifications/pushNotifications';
+import { useSessionTimeout } from './useSessionTimeout';
+import { useToast } from './useToast';
+
+/** Dispatch all seed thunks to populate demo/mock data. */
+const seedAllData = (dispatch: ReturnType<typeof useAppDispatch>) => {
+  dispatch(seedUserProfile());
+  dispatch(seedDashboardState());
+  dispatch(seedBeneficiaries());
+  dispatch(seedRecentPayees());
+  dispatch(seedDepositProducts());
+  dispatch(seedServiceRequests());
+  dispatch(seedSupportMessages());
+  dispatch(seedLoanProducts());
+  dispatch(seedInsurancePlans());
+  dispatch(seedCards());
+};
+
+export const useAppBootstrap = () => {
+  const dispatch = useAppDispatch();
+  const toast = useToast();
+  const isAuthenticated = useAppSelector(selectIsAuthenticated);
+  const hasBootstrapped = useRef(false);
+
+  useSessionTimeout();
+
+  // Initial bootstrap on mount
+  useEffect(() => {
+    dispatch(bootstrapAuthSession());
+    seedAllData(dispatch);
+    dispatch(markAppReady());
+
+    void registerForPushNotifications();
+    hasBootstrapped.current = true;
+  }, [dispatch]);
+
+  // Re-seed all data when the user logs back in after a logout.
+  // Logout wipes all Redux state via rootReducer, so profile/dashboard/etc.
+  // need to be re-populated when isAuthenticated flips back to true.
+  useEffect(() => {
+    if (isAuthenticated && hasBootstrapped.current) {
+      seedAllData(dispatch);
+    }
+  }, [isAuthenticated, dispatch]);
+
+  useEffect(() => {
+    const unregister = registerUnauthorizedHandler(() => {
+      dispatch(logoutSession());
+      toast('Signed out', 'info', 'Your session was refreshed for security reasons.');
+    });
+
+    return unregister;
+  }, [dispatch, toast]);
+};

src/hooks/useKeyboardHandler.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Keyboard, Platform, type KeyboardEvent } from 'react-native';
+
+interface KeyboardState {
+  /** Whether the keyboard is currently visible. */
+  isVisible: boolean;
+  /** The keyboard height in points. 0 when hidden. */
+  keyboardHeight: number;
+}
+
+/**
+ * Hook that tracks keyboard visibility and height.
+ * Provides a dismiss function for convenience.
+ *
+ * Usage:
+ * ```ts
+ * const { isVisible, keyboardHeight, dismiss } = useKeyboardHandler();
+ * ```
+ */
+export function useKeyboardHandler() {
+  const [state, setState] = useState<KeyboardState>({
+    isVisible: false,
+    keyboardHeight: 0,
+  });
+
+  const heightRef = useRef(0);
+
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const onShow = (e: KeyboardEvent) => {
+      const height = e.endCoordinates.height;
+      heightRef.current = height;
+      setState({ isVisible: true, keyboardHeight: height });
+    };
+
+    const onHide = () => {
+      heightRef.current = 0;
+      setState({ isVisible: false, keyboardHeight: 0 });
+    };
+
+    const showSub = Keyboard.addListener(showEvent, onShow);
+    const hideSub = Keyboard.addListener(hideEvent, onHide);
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+
+  const dismiss = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  return {
+    ...state,
+    dismiss,
+  };
+}

src/hooks/usePullToRefresh.ts

@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react';
+
+export const usePullToRefresh = (refreshAction: () => Promise<unknown> | void) => {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await Promise.resolve(refreshAction());
+    setRefreshing(false);
+  }, [refreshAction]);
+
+  return {
+    refreshing,
+    onRefresh,
+  };
+};

src/hooks/useSessionTimeout.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { AppState, type AppStateStatus } from 'react-native';
+
+import { useAppDispatch } from '../app/hooks';
+import { logoutSession } from '../modules/auth/store/authThunk';
+import { uiActions } from '../modules/ui/store/uiSlice';
+import { sessionManager } from '../services/security/sessionManager';
+import { useToast } from './useToast';
+
+export const useSessionTimeout = () => {
+  const dispatch = useAppDispatch();
+  const toast = useToast();
+
+  useEffect(() => {
+    const handleAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState === 'active') {
+        if (sessionManager.hasExpired()) {
+          dispatch(uiActions.setSessionExpired(true));
+          dispatch(logoutSession());
+          toast('Session expired', 'error', 'Please log in again to continue securely.');
+        }
+
+        sessionManager.touch();
+      }
+
+      if (nextState === 'background' || nextState === 'inactive') {
+        sessionManager.touch();
+      }
+    };
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, [dispatch, toast]);
+};

src/hooks/useToast.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+
+import { useAppDispatch } from '../app/hooks';
+import { uiActions } from '../modules/ui/store/uiSlice';
+import { haptics } from '../services/haptics/haptics';
+
+export const useToast = () => {
+  const dispatch = useAppDispatch();
+
+  return useCallback(
+    (title: string, type: 'success' | 'error' | 'info', description?: string) => {
+      if (type === 'success') {
+        haptics.success();
+      } else if (type === 'error') {
+        haptics.error();
+      } else {
+        haptics.selection();
+      }
+
+      dispatch(
+        uiActions.showToast({
+          id: `${Date.now()}_${type}`,
+          title,
+          type,
+          description,
+        }),
+      );
+    },
+    [dispatch],
+  );
+};

src/hooks/useTranslation.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+import { translations } from '../constants/translations';
+import { useAppSelector } from '../app/hooks';
+import { selectUserLanguage } from '../modules/profile/store/userSelectors';
+
+export const useTranslation = () => {
+  const language = useAppSelector(selectUserLanguage);
+
+  const t = useCallback(
+    (key: keyof (typeof translations)['en']): string =>
+      translations[language][key] ?? translations.en[key] ?? key,
+    [language],
+  );
+
+  return {
+    language,
+    t,
+  };
+};

src/modules/agent/components/AgentEmptyState.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+import { useTheme } from '../../../theme';
+
+interface AgentEmptyStateProps {
+  title: string;
+  description: string;
+  icon?: string;
+  actionTitle?: string;
+  onAction?: () => void;
+}
+
+export const AgentEmptyState = ({
+  title,
+  description,
+  icon = 'document-text-outline',
+  actionTitle,
+  onAction,
+}: AgentEmptyStateProps) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.iconContainer, { backgroundColor: `${theme.colors.primary}10` }]}>
+        <Ionicons name={icon as any} size={48} color={theme.colors.primary} />
+      </View>
+      <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+      <Text style={[styles.description, { color: theme.colors.textMuted }]}>{description}</Text>
+      
+      {actionTitle && onAction && (
+        <Pressable 
+          style={[styles.button, { backgroundColor: theme.colors.primary }]}
+          onPress={onAction}
+        >
+          <Text style={[styles.buttonText, { color: theme.colors.white }]}>{actionTitle}</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 32,
+    minHeight: 300,
+  },
+  iconContainer: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: 24,
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

src/modules/agent/components/AgentMiniChart.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useTheme } from '../../../theme';
+
+interface AgentMiniChartProps {
+  data: number[];
+  color?: string;
+  height?: number;
+  labels?: string[];
+  type?: 'bar' | 'line';
+}
+
+export const AgentMiniChart = ({
+  data,
+  color,
+  height = 100,
+  labels,
+  type = 'bar',
+}: AgentMiniChartProps) => {
+  const theme = useTheme();
+  const chartColor = color || theme.colors.primary;
+  
+  const maxValue = Math.max(...data, 1);
+  const animationProgress = useSharedValue(0);
+
+  useEffect(() => {
+    animationProgress.value = 0;
+    animationProgress.value = withSpring(1, { damping: 15 });
+  }, [data]);
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.chartArea, { height }]}>
+        {data.map((val, i) => {
+          const barHeight = (val / maxValue) * height;
+          
+          const animatedStyle = useAnimatedStyle(() => {
+            return {
+              height: barHeight * animationProgress.value,
+              opacity: animationProgress.value,
+            };
+          });
+
+          return (
+            <View key={`bar-${i}`} style={styles.barContainer}>
+              <Animated.View 
+                style={[
+                  styles.bar,
+                  { backgroundColor: chartColor },
+                  animatedStyle,
+                ]} 
+              />
+            </View>
+          );
+        })}
+      </View>
+      
+      {labels && (
+        <View style={styles.labelsArea}>
+          {labels.map((label, i) => (
+            <Text key={`label-${i}`} style={[styles.label, { color: theme.colors.textMuted }]}>
+              {label}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  chartArea: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    gap: 4,
+  },
+  barContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    height: '100%',
+  },
+  bar: {
+    width: '100%',
+    maxWidth: 24,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+  },
+  labelsArea: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 8,
+  },
+  label: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 10,
+    fontWeight: '600',
+  },
+});

src/modules/agent/components/AgentProgressRing.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+  withDelay,
+  Easing,
+} from 'react-native-reanimated';
+import { useTheme } from '../../../theme';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface AgentProgressRingProps {
+  progress: number; // 0 to 100
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  label?: string;
+  value?: string;
+}
+
+export const AgentProgressRing = ({
+  progress,
+  size = 120,
+  strokeWidth = 10,
+  color,
+  label,
+  value,
+}: AgentProgressRingProps) => {
+  const theme = useTheme();
+  const ringColor = color || theme.colors.primary;
+  
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  
+  const animatedProgress = useSharedValue(0);
+
+  useEffect(() => {
+    animatedProgress.value = 0;
+    animatedProgress.value = withDelay(
+      300,
+      withTiming(progress, {
+        duration: 1500,
+        easing: Easing.out(Easing.cubic),
+      })
+    );
+  }, [progress]);
+
+  const animatedProps = useAnimatedProps(() => {
+    const strokeDashoffset = circumference - (animatedProgress.value / 100) * circumference;
+    return {
+      strokeDashoffset,
+    };
+  });
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Svg width={size} height={size}>
+        {/* Background Circle */}
+        <Circle
+          stroke={`${ringColor}20`}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+        {/* Progress Circle */}
+        <AnimatedCircle
+          stroke={ringColor}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          animatedProps={animatedProps}
+          strokeLinecap="round"
+          rotation="-90"
+          origin={`${size / 2}, ${size / 2}`}
+        />
+      </Svg>
+      <View style={styles.content}>
+        {value && <Text style={[styles.value, { color: theme.colors.textPrimary, fontSize: size * 0.25 }]}>{value}</Text>}
+        {label && <Text style={[styles.label, { color: theme.colors.textMuted, fontSize: size * 0.1 }]}>{label}</Text>}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  value: {
+    fontSize: 24,
+    fontWeight: '800',
+    letterSpacing: -0.5,
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: '600',
+    marginTop: 2,
+  },
+});

src/modules/agent/components/AgentSectionHeader.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { useTheme } from '../../../theme';
+
+interface AgentSectionHeaderProps {
+  title: string;
+  subtitle?: string;
+  actionTitle?: string;
+  onAction?: () => void;
+}
+
+export const AgentSectionHeader = ({
+  title,
+  subtitle,
+  actionTitle,
+  onAction,
+}: AgentSectionHeaderProps) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.titleContainer}>
+        <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+        {subtitle && (
+          <Text style={[styles.subtitle, { color: theme.colors.textMuted }]}>{subtitle}</Text>
+        )}
+      </View>
+      {actionTitle && onAction && (
+        <Pressable onPress={onAction}>
+          <Text style={[styles.action, { color: theme.colors.primary }]}>{actionTitle}</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    marginBottom: 16,
+  },
+  titleContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  subtitle: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  action: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

src/modules/agent/components/AgentSkeletonLoader.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, DimensionValue } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  withSequence,
+} from 'react-native-reanimated';
+import { useTheme } from '../../../theme';
+
+interface AgentSkeletonLoaderProps {
+  type: 'card' | 'list' | 'dashboard';
+}
+
+export const AgentSkeletonLoader = ({ type }: AgentSkeletonLoaderProps) => {
+  const theme = useTheme();
+  const opacity = useSharedValue(0.5);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 800 }),
+        withTiming(0.5, { duration: 800 })
+      ),
+      -1,
+      true
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const SkeletonBlock = ({ width = '100%', height = 20, borderRadius = 4, mb = 0 }: { width?: DimensionValue; height?: number; borderRadius?: number; mb?: number }) => (
+    <Animated.View
+      style={[
+        {
+          width,
+          height,
+          borderRadius,
+          marginBottom: mb,
+          backgroundColor: theme.colors.cardBorder,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+
+  if (type === 'dashboard') {
+    return (
+      <View style={styles.container}>
+        <View style={styles.row}>
+          <SkeletonBlock width="48%" height={120} borderRadius={16} />
+          <SkeletonBlock width="48%" height={120} borderRadius={16} />
+        </View>
+        <SkeletonBlock height={24} width="40%" mb={16} mt={24} />
+        <SkeletonBlock height={180} borderRadius={16} mb={16} />
+      </View>
+    );
+  }
+
+  if (type === 'list') {
+    return (
+      <View style={styles.container}>
+        {[1, 2, 3, 4, 5].map((i) => (
+          <View key={i} style={[styles.card, { borderColor: theme.colors.cardBorder }]}>
+            <View style={styles.row}>
+              <SkeletonBlock width={40} height={40} borderRadius={20} />
+              <View style={{ flex: 1, marginLeft: 12 }}>
+                <SkeletonBlock width="60%" mb={8} />
+                <SkeletonBlock width="40%" height={14} />
+              </View>
+            </View>
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.card, { borderColor: theme.colors.cardBorder }]}>
+      <SkeletonBlock width="40%" height={24} mb={16} />
+      <SkeletonBlock height={60} mb={12} />
+      <SkeletonBlock height={60} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  card: {
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 1,
+    marginBottom: 12,
+  },
+});

src/modules/agent/components/AgentStatCard.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+import Animated, { FadeInUp } from 'react-native-reanimated';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { useTheme } from '../../../theme';
+
+interface AgentStatCardProps {
+  title: string;
+  value: string;
+  icon: string;
+  trend?: number;
+  trendText?: string;
+  color?: string;
+  index?: number;
+  gradient?: [string, string];
+  onPress?: () => void;
+}
+
+export const AgentStatCard = ({
+  title,
+  value,
+  icon,
+  trend,
+  trendText,
+  color,
+  index = 0,
+  gradient,
+  onPress,
+}: AgentStatCardProps) => {
+  const theme = useTheme();
+  const baseColor = color || theme.colors.primary;
+  
+  const isPositive = trend && trend > 0;
+  const isNegative = trend && trend < 0;
+  
+  const content = (
+    <View style={styles.content}>
+      <View style={styles.header}>
+        <View style={[styles.iconFrame, { backgroundColor: `${baseColor}20` }]}>
+          <Ionicons name={icon as any} size={18} color={baseColor} />
+        </View>
+        {trend !== undefined && (
+          <View style={[styles.trendBadge, { backgroundColor: isPositive ? `${theme.colors.success}20` : isNegative ? `${theme.colors.danger}20` : `${theme.colors.textMuted}20` }]}>
+            <Ionicons 
+              name={isPositive ? 'trending-up' : isNegative ? 'trending-down' : 'remove'} 
+              size={12} 
+              color={isPositive ? theme.colors.success : isNegative ? theme.colors.danger : theme.colors.textMuted} 
+            />
+            <Text style={[styles.trendText, { color: isPositive ? theme.colors.success : isNegative ? theme.colors.danger : theme.colors.textMuted }]}>
+              {Math.abs(trend)}%
+            </Text>
+          </View>
+        )}
+      </View>
+      
+      <View style={styles.body}>
+        <Text style={[styles.value, { color: gradient ? theme.colors.white : theme.colors.textPrimary }]}>{value}</Text>
+        <Text style={[styles.title, { color: gradient ? 'rgba(255,255,255,0.8)' : theme.colors.textMuted }]}>{title}</Text>
+        {trendText && (
+          <Text style={[styles.trendDesc, { color: gradient ? 'rgba(255,255,255,0.6)' : theme.colors.textMuted }]}>{trendText}</Text>
+        )}
+      </View>
+
+      {/* Tap indicator arrow */}
+      {onPress && (
+        <View style={styles.tapIndicator}>
+          <Ionicons name="chevron-forward" size={14} color={gradient ? 'rgba(255,255,255,0.4)' : theme.colors.textMuted} />
+        </View>
+      )}
+    </View>
+  );
+
+  const cardInner = gradient ? (
+    <LinearGradient
+      colors={gradient}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={styles.gradient}
+    >
+      {content}
+    </LinearGradient>
+  ) : content;
+
+  return (
+    <Animated.View 
+      entering={FadeInUp.delay(index * 100).springify()}
+      style={[
+        styles.card, 
+        { 
+          backgroundColor: theme.colors.surface,
+          borderColor: theme.colors.cardBorder,
+        }
+      ]}
+    >
+      {onPress ? (
+        <Pressable
+          onPress={onPress}
+          style={({ pressed }) => [
+            styles.pressable,
+            pressed && styles.pressed,
+          ]}
+        >
+          {cardInner}
+        </Pressable>
+      ) : cardInner}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    borderRadius: 16,
+    borderWidth: 1,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+    minWidth: 140,
+  },
+  pressable: {
+    flex: 1,
+  },
+  pressed: {
+    opacity: 0.75,
+    transform: [{ scale: 0.97 }],
+  },
+  gradient: {
+    flex: 1,
+  },
+  content: {
+    padding: 16,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 16,
+  },
+  iconFrame: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  trendBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 6,
+    gap: 4,
+  },
+  trendText: {
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  body: {
+    gap: 4,
+  },
+  value: {
+    fontSize: 22,
+    fontWeight: '800',
+    letterSpacing: -0.5,
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  trendDesc: {
+    fontSize: 10,
+    marginTop: 4,
+  },
+  tapIndicator: {
+    position: 'absolute',
+    bottom: 16,
+    right: 16,
+  },
+});
+

src/modules/agent/components/CollectionEntryCard.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+import { useTheme } from '../../../theme';
+import type { CollectionEntry } from '../types/agentTypes';
+import { formatAgentCurrency, formatTime } from '../utils/agentFormatters';
+
+interface CollectionEntryCardProps {
+  entry: CollectionEntry;
+  onPress?: () => void;
+}
+
+export const CollectionEntryCard = ({ entry, onPress }: CollectionEntryCardProps) => {
+  const theme = useTheme();
+
+  const isCollected = entry.status === 'collected';
+  const isPartial = entry.status === 'partial';
+  const isPending = entry.status === 'pending';
+
+  const statusColor = isCollected 
+    ? theme.colors.success 
+    : isPartial 
+      ? theme.colors.warning 
+      : theme.colors.textMuted;
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.card,
+        {
+          backgroundColor: theme.colors.surface,
+          borderColor: theme.colors.cardBorder,
+          opacity: pressed ? 0.9 : 1,
+        },
+      ]}
+      onPress={onPress}
+    >
+      <View style={styles.leftContent}>
+        <View style={[styles.iconContainer, { backgroundColor: `${statusColor}15` }]}>
+          <Ionicons 
+            name={isCollected ? 'checkmark-circle' : isPartial ? 'pie-chart' : 'time'} 
+            size={20} 
+            color={statusColor} 
+          />
+        </View>
+        <View style={styles.details}>
+          <Text style={[styles.name, { color: theme.colors.textPrimary }]}>{entry.customerName}</Text>
+          <View style={styles.metaRow}>
+            <Text style={[styles.meta, { color: theme.colors.textMuted }]}>{entry.accountType} • </Text>
+            <Text style={[styles.meta, { color: theme.colors.textMuted }]}>
+              {isPending ? 'Pending' : entry.collectedAt ? formatTime(entry.collectedAt) : ''}
+            </Text>
+          </View>
+        </View>
+      </View>
+      
+      <View style={styles.rightContent}>
+        <Text style={[styles.amount, { color: theme.colors.textPrimary }]}>
+          {formatAgentCurrency(isPending ? entry.emiAmount : entry.collectedAmount)}
+        </Text>
+        {!isPending && (
+          <Text style={[styles.mode, { color: theme.colors.textMuted }]}>
+            via {entry.mode.toUpperCase()}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 1,
+    marginBottom: 12,
+  },
+  leftContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  details: {
+    gap: 4,
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  meta: {
+    fontSize: 12,
+  },
+  rightContent: {
+    alignItems: 'flex-end',
+    gap: 4,
+  },
+  amount: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  mode: {
+    fontSize: 10,
+    fontWeight: '600',
+  },
+});