feat(app): initial commit

2026-07-15 21:36:48 +05:30 · 2026-07-15 21:36:48 +05:30 · adff512db9
commit adff512db9
114 changed files with 11515 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+  rules: {
+    // Navigation render props (tabBarIcon, headerLeft etc.) are props, not render-time component definitions
+    'react/no-unstable-nested-components': ['warn', { allowAsProps: true }],
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,80 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+.kotlin/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Environment configurations
+.env
+.env.*
+
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,5 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+};
--- a/.watchmanconfig
+++ b/.watchmanconfig
@ -0,0 +1 @@
+{}
--- a/17
+++ b/17
@ -0,0 +1,17 @@
+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'
+gem 'nkf'
--- a/README.md
+++ b/README.md
@ -0,0 +1,97 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
+
+## Step 1: Start Metro
+
+First, you will need to run **Metro**, the JavaScript build tool for React Native.
+
+To start the Metro dev server, run the following command from the root of your React Native project:
+
+```sh
+# Using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Build and run your app
+
+With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
+
+### Android
+
+```sh
+# Using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### iOS
+
+For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+
+The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+
+```sh
+bundle install
+```
+
+Then, and every time you update your native dependencies, run:
+
+```sh
+bundle exec pod install
+```
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+```sh
+# Using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+
+This is one way to run your app — you can also build it directly from Android Studio or Xcode.
+
+## Step 3: Modify your app
+
+Now that you have successfully run the app, let's make changes!
+
+Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
+
+When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
+
+- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
+- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
--- a/tests/App.test.tsx
+++ b/tests/App.test.tsx
@ -0,0 +1,9 @@
+import React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import App from '../app/App';
+
+test('renders correctly', async () => {
+  await ReactTestRenderer.act(() => {
+    ReactTestRenderer.create(<App />);
+  });
+});
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -0,0 +1,125 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+
+
+/**
+ * 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. Default is "debug", "debugOptimized".
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "liteDebugOptimized", "prodDebug", "prodDebugOptimized"]
+
+    /* 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.convex_crm"
+    defaultConfig {
+        applicationId "com.convex_crm"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        resValue "string", "build_config_package", "com.convex_crm"
+    }
+    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
+    }
+}
+
--- a/android/app/debug.keystore
+++ b/android/app/debug.keystore
--- a/android/app/proguard-rules.pro
+++ b/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:
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@ -0,0 +1,27 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <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>
--- a/android/app/src/main/java/com/convex_crm/MainActivity.kt
+++ b/android/app/src/main/java/com/convex_crm/MainActivity.kt
@ -0,0 +1,22 @@
+package com.convex_crm
+
+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 = "convex_CRM"
+
+  /**
+   * 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)
+}
--- a/android/app/src/main/java/com/convex_crm/MainApplication.kt
+++ b/android/app/src/main/java/com/convex_crm/MainApplication.kt
@ -0,0 +1,27 @@
+package com.convex_crm
+
+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)
+  }
+}
--- a/android/app/src/main/res/drawable/rn_edit_text_material.xml
+++ b/android/app/src/main/res/drawable/rn_edit_text_material.xml
@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>
--- a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">convex CRM</string>
+</resources>
--- a/android/app/src/main/res/values/styles.xml
+++ b/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>
--- a/android/build.gradle
+++ b/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"
--- a/android/gradle.properties
+++ b/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
--- a/android/gradle/wrapper/gradle-wrapper.jar
+++ b/android/gradle/wrapper/gradle-wrapper.jar
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/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.3.1-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
--- a/android/gradlew
+++ b/android/gradlew
@ -0,0 +1,248 @@
+#!/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
+
+
+
+# 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" )
+
+    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" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
--- a/android/gradlew.bat
+++ b/android/gradlew.bat
@ -0,0 +1,98 @@
+@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
+
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/android/settings.gradle
+++ b/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 = 'convex_CRM'
+include ':app'
+includeBuild('../node_modules/@react-native/gradle-plugin')
--- a/app.json
+++ b/app.json
@ -0,0 +1,4 @@
+{
+  "name": "convex_CRM",
+  "displayName": "convex CRM"
+}
--- a/app/App.tsx
+++ b/app/App.tsx
@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, StatusBar } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { RootNavigator } from './navigation/rootNavigator';
+import { ThemeProvider, useTheme } from './theme';
+
+const ThemedStatusBar = () => {
+  const { theme: colors, isDark } = useTheme();
+
+  useEffect(() => {
+    StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content', true);
+    StatusBar.setBackgroundColor(colors.background, true);
+  }, [colors, isDark]);
+
+  return (
+    <StatusBar
+      barStyle={isDark ? 'light-content' : 'dark-content'}
+      backgroundColor={colors.background}
+    />
+  );
+};
+
+const App = () => {
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <SafeAreaProvider>
+        <ThemeProvider>
+          <ThemedStatusBar />
+          <RootNavigator />
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+};
+
+export default App;
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+});
--- a/app/features/addLead/addLead.screen.tsx
+++ b/app/features/addLead/addLead.screen.tsx
@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  Alert,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './addLead.styles';
+import { useTheme } from '../../theme';
+
+export const AddLeadScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+  const [name, setName] = useState('');
+  const [company, setCompany] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [value, setValue] = useState('');
+
+  const handleSubmit = () => {
+    if (!name.trim() || !company.trim() || !email.trim()) {
+      Alert.alert('Error', 'Please fill in Name, Company, and Email fields.');
+      return;
+    }
+
+    Alert.alert(
+      'Success',
+      `Lead "${name}" for "${company}" has been created!`,
+      [
+        {
+          text: 'OK',
+          onPress: () => {
+            setName('');
+            setCompany('');
+            setEmail('');
+            setPhone('');
+            setValue('');
+          },
+        },
+      ],
+    );
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContainer}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.formCard}>
+          <Text style={styles.sectionHeader}>Lead Information</Text>
+
+          {/* Name Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Lead Name *</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="person-outline"
+                size={18}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="John Doe"
+                placeholderTextColor={colors.textMuted}
+                value={name}
+                onChangeText={setName}
+              />
+            </View>
+          </View>
+
+          {/* Company Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Company *</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="business-outline"
+                size={18}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="Acme Corp"
+                placeholderTextColor={colors.textMuted}
+                value={company}
+                onChangeText={setCompany}
+              />
+            </View>
+          </View>
+
+          {/* Email Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Email Address *</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="mail-outline"
+                size={18}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="johndoe@acme.com"
+                placeholderTextColor={colors.textMuted}
+                keyboardType="email-address"
+                autoCapitalize="none"
+                value={email}
+                onChangeText={setEmail}
+              />
+            </View>
+          </View>
+
+          {/* Phone Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Phone Number</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="call-outline"
+                size={18}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="+1 (555) 000-0000"
+                placeholderTextColor={colors.textMuted}
+                keyboardType="phone-pad"
+                value={phone}
+                onChangeText={setPhone}
+              />
+            </View>
+          </View>
+
+          {/* Deal Value Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Estimated Value ($)</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="cash-outline"
+                size={18}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="5,000"
+                placeholderTextColor={colors.textMuted}
+                keyboardType="numeric"
+                value={value}
+                onChangeText={setValue}
+              />
+            </View>
+          </View>
+
+          <TouchableOpacity
+            style={styles.submitButton}
+            activeOpacity={0.8}
+            onPress={handleSubmit}
+          >
+            <Icon
+              name="checkmark"
+              size={20}
+              color="#FFFFFF"
+              style={styles.buttonIcon}
+            />
+            <Text style={styles.submitButtonText}>Create New Lead</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
--- a/app/features/addLead/addLead.styles.ts
+++ b/app/features/addLead/addLead.styles.ts
@ -0,0 +1,77 @@
+import { StyleSheet } from 'react-native';
+
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    scrollContainer: {
+      padding: 16,
+    },
+    formCard: {
+      backgroundColor: colors.card,
+      borderRadius: 16,
+      padding: 20,
+      shadowColor: '#0F172A',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    sectionHeader: {
+      fontSize: 16,
+      fontWeight: '700',
+      color: colors.text,
+      marginBottom: 20,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border,
+      paddingBottom: 10,
+    },
+    inputContainer: {
+      marginBottom: 16,
+    },
+    label: {
+      fontSize: 13,
+      fontWeight: '600',
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: colors.border,
+      paddingHorizontal: 12,
+    },
+    inputIcon: {
+      marginRight: 8,
+    },
+    input: {
+      flex: 1,
+      height: 46,
+      color: colors.text,
+      fontSize: 14,
+    },
+    submitButton: {
+      backgroundColor: colors.icon,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 10,
+      height: 48,
+      marginTop: 12,
+    },
+    buttonIcon: {
+      marginRight: 8,
+    },
+    submitButtonText: {
+      color: '#FFFFFF',
+      fontSize: 15,
+      fontWeight: '700',
+    },
+  });
--- a/app/features/addLead/index.ts
+++ b/app/features/addLead/index.ts
@ -0,0 +1,2 @@
+export * from './addLead.screen';
+export * from './addLead.styles'
--- a/app/features/customers/customers.screen.tsx
+++ b/app/features/customers/customers.screen.tsx
@ -0,0 +1,64 @@
+import React from 'react';
+import { Text, View, FlatList, TouchableOpacity, Linking } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './customers.styles';
+import { MOCK_CUSTOMERS } from '../../mock-data/customers';
+import { useTheme } from '../../theme';
+
+export const CustomersScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  const handleCall = (phone: string) => {
+    Linking.openURL(`tel:${phone}`).catch(() => {});
+  };
+
+  const handleEmail = (email: string) => {
+    Linking.openURL(`mailto:${email}`).catch(() => {});
+  };
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={MOCK_CUSTOMERS}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={({ item }) => (
+          <View style={styles.customerCard}>
+            <View style={styles.cardHeader}>
+              <View>
+                <Text style={styles.customerName}>{item.name}</Text>
+                <Text style={styles.contactPerson}>
+                  Contact: {item.contactPerson}
+                </Text>
+              </View>
+              <View style={styles.badge}>
+                <Text style={styles.badgeText}>
+                  {item.activeProjects} active projects
+                </Text>
+              </View>
+            </View>
+
+            <View style={styles.cardFooter}>
+              <TouchableOpacity
+                style={[styles.actionButton, styles.callButton]}
+                onPress={() => handleCall(item.phone)}
+              >
+                <Icon name="call" size={16} color={colors.icon} />
+                <Text style={styles.callButtonText}>Call</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[styles.actionButton, styles.emailButton]}
+                onPress={() => handleEmail(item.email)}
+              >
+                <Icon name="mail" size={16} color={colors.textSecondary} />
+                <Text style={styles.emailButtonText}>Email</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
--- a/app/features/customers/customers.styles.ts
+++ b/app/features/customers/customers.styles.ts
@ -0,0 +1,86 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  listContent: {
+    padding: 16,
+  },
+  customerCard: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 14,
+  },
+  customerName: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  contactPerson: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginTop: 4,
+  },
+  badge: {
+    backgroundColor: colors.border,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: colors.icon,
+  },
+  cardFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingTop: 12,
+  },
+  actionButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 0.48,
+    height: 38,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  callButton: {
+    borderColor: colors.border,
+    backgroundColor: colors.border,
+  },
+  callButtonText: {
+    color: colors.icon,
+    fontWeight: '600',
+    fontSize: 13,
+    marginLeft: 6,
+  },
+  emailButton: {
+    borderColor: colors.border,
+    backgroundColor: colors.surface,
+  },
+  emailButtonText: {
+    color: colors.textSecondary,
+    fontWeight: '600',
+    fontSize: 13,
+    marginLeft: 6,
+  },
+});
--- a/app/features/customers/index.ts
+++ b/app/features/customers/index.ts
@ -0,0 +1,2 @@
+export * from './customers.screen';
+export * from './customers.styles'
--- a/app/features/dashboard/dashboard.screen.tsx
+++ b/app/features/dashboard/dashboard.screen.tsx
@ -0,0 +1,124 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import { Text, View, ScrollView, TouchableOpacity } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useNavigation } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './dashboard.styles';
+import { statCards } from '../../mock-data/dashboard';
+import { useTheme } from '../../theme';
+
+export const DashboardScreen = () => {
+  const navigation = useNavigation<any>();
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  const handleLogout = async () => {
+    try {
+      await AsyncStorage.removeItem('userToken');
+      await AsyncStorage.removeItem('tenancyName');
+    } catch (e) {
+      console.error(e);
+    }
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
+    });
+  };
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      {/* Hero Welcome banner */}
+      <View style={styles.heroCard}>
+        <View>
+          <Text style={styles.heroGreeting}>Welcome Back,</Text>
+          <Text style={styles.heroName}>Workspace Admin</Text>
+          <Text style={styles.heroInfo}>Convex CRM • Active session</Text>
+        </View>
+        <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+          <Icon name="log-out-outline" size={22} color="#EF4444" />
+        </TouchableOpacity>
+      </View>
+
+      {/* Grid of Stats */}
+      <Text style={styles.sectionTitle}>Overview Metrics</Text>
+      <View style={styles.statsGrid}>
+        {statCards.map((stat, idx) => (
+          <View key={idx} style={styles.statCard}>
+            <View style={styles.statHeader}>
+              <View
+                style={[
+                  styles.statIconContainer,
+                  { backgroundColor: `${stat.color}15` },
+                ]}
+              >
+                <Icon name={stat.icon} size={20} color={stat.color} />
+              </View>
+              <Text
+                style={[
+                  styles.statChange,
+                  {
+                    color: stat.change.startsWith('+') ? '#10B981' : '#EF4444',
+                  },
+                ]}
+              >
+                {stat.change}
+              </Text>
+            </View>
+            <Text style={styles.statCount}>{stat.count}</Text>
+            <Text style={styles.statTitle}>{stat.title}</Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Recent Activity Section */}
+      <View style={styles.sectionHeader}>
+        <Text style={styles.sectionTitle}>Recent Activity</Text>
+        <TouchableOpacity>
+          <Text style={styles.seeAllLink}>See All</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.activityList}>
+        <View style={styles.activityItem}>
+          <View style={[styles.activityBadge, { backgroundColor: '#10B981' }]}>
+            <Icon name="person-add" size={14} color="#FFF" />
+          </View>
+          <View style={styles.activityDetails}>
+            <Text style={styles.activityTitle}>New Lead Created</Text>
+            <Text style={styles.activityDesc}>
+              Sarah Jenkins added by System Import
+            </Text>
+            <Text style={styles.activityTime}>2 minutes ago</Text>
+          </View>
+        </View>
+
+        <View style={styles.activityItem}>
+          <View style={[styles.activityBadge, { backgroundColor: '#3B82F6' }]}>
+            <Icon name="document-text" size={14} color="#FFF" />
+          </View>
+          <View style={styles.activityDetails}>
+            <Text style={styles.activityTitle}>Invoice #1042 Sent</Text>
+            <Text style={styles.activityDesc}>
+              Sent to Acme Corp for $1,250.00
+            </Text>
+            <Text style={styles.activityTime}>1 hour ago</Text>
+          </View>
+        </View>
+
+        <View style={styles.activityItem}>
+          <View style={[styles.activityBadge, { backgroundColor: '#F59E0B' }]}>
+            <Icon name="chatbubble-ellipses" size={14} color="#FFF" />
+          </View>
+          <View style={styles.activityDetails}>
+            <Text style={styles.activityTitle}>Ticket #2045 Replied</Text>
+            <Text style={styles.activityDesc}>
+              Support agent responded to email query
+            </Text>
+            <Text style={styles.activityTime}>3 hours ago</Text>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
--- a/app/features/dashboard/dashboard.styles.ts
+++ b/app/features/dashboard/dashboard.styles.ts
@ -0,0 +1,157 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  content: {
+    padding: 16,
+  },
+  heroCard: {
+    backgroundColor: colors.drawerHeader,
+    borderRadius: 16,
+    padding: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  heroGreeting: {
+    fontSize: 14,
+    color: '#94A3B8',
+  },
+  heroName: {
+    fontSize: 22,
+    fontWeight: '800',
+    color: '#FFFFFF',
+    marginTop: 2,
+  },
+  heroInfo: {
+    fontSize: 12,
+    color: colors.icon,
+    marginTop: 8,
+    fontWeight: '600',
+  },
+  logoutButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+    marginTop: 8,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: colors.text,
+    marginBottom: 12,
+  },
+  seeAllLink: {
+    fontSize: 14,
+    color: colors.icon,
+    fontWeight: '600',
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+  },
+  statCard: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    width: '48%',
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  statHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  statIconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  statChange: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  statCount: {
+    fontSize: 22,
+    fontWeight: '800',
+    color: colors.text,
+  },
+  statTitle: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginTop: 4,
+  },
+  activityList: {
+    backgroundColor: colors.card,
+    borderRadius: 16,
+    padding: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  activityItem: {
+    flexDirection: 'row',
+    marginBottom: 16,
+  },
+  activityBadge: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 2,
+  },
+  activityDetails: {
+    marginLeft: 12,
+    flex: 1,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 12,
+  },
+  activityTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  activityDesc: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginTop: 2,
+  },
+  activityTime: {
+    fontSize: 11,
+    color: colors.textMuted,
+    marginTop: 6,
+  },
+});
--- a/app/features/dashboard/index.ts
+++ b/app/features/dashboard/index.ts
@ -0,0 +1,2 @@
+export * from './dashboard.screen';
+export * from './dashboard.styles'
--- a/app/features/estimates/estimates.screen.tsx
+++ b/app/features/estimates/estimates.screen.tsx
@ -0,0 +1,50 @@
+import React from 'react';
+import { Text, View, FlatList } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './estimates.styles';
+import { MOCK_ESTIMATES } from '../../mock-data/estimates';
+import { useTheme } from '../../theme';
+
+export const EstimatesScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={MOCK_ESTIMATES}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={({ item }) => (
+          <View style={styles.card}>
+            <View style={styles.header}>
+              <View style={styles.titleWrapper}>
+                <Icon
+                  name="calculator-outline"
+                  size={20}
+                  color={item.color}
+                  style={styles.icon}
+                />
+                <Text style={styles.title}>{item.number}</Text>
+              </View>
+              <Text style={styles.value}>{item.value}</Text>
+            </View>
+            <View style={styles.body}>
+              <Text style={styles.client}>Client: {item.client}</Text>
+              <Text style={styles.date}>Date: {item.date}</Text>
+            </View>
+            <View style={styles.footer}>
+              <View
+                style={[styles.badge, { backgroundColor: `${item.color}15` }]}
+              >
+                <Text style={[styles.badgeText, { color: item.color }]}>
+                  {item.status}
+                </Text>
+              </View>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
--- a/app/features/estimates/estimates.styles.ts
+++ b/app/features/estimates/estimates.styles.ts
@ -0,0 +1,73 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  listContent: {
+    padding: 16,
+  },
+  card: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 10,
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  value: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: colors.text,
+  },
+  body: {
+    paddingVertical: 12,
+  },
+  client: {
+    fontSize: 13,
+    color: colors.textSecondary,
+  },
+  date: {
+    fontSize: 12,
+    color: colors.textMuted,
+    marginTop: 4,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});
--- a/app/features/estimates/index.ts
+++ b/app/features/estimates/index.ts
@ -0,0 +1,2 @@
+export * from './estimates.screen';
+export * from './estimates.styles'
--- a/app/features/invoices/index.ts
+++ b/app/features/invoices/index.ts
@ -0,0 +1,2 @@
+export * from './invoices.screen';
+export * from './invoices.styles';
--- a/app/features/invoices/invoices.screen.tsx
+++ b/app/features/invoices/invoices.screen.tsx
@ -0,0 +1,50 @@
+import React from 'react';
+import { Text, View, FlatList } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './invoices.styles';
+import { MOCK_INVOICES } from '../../mock-data/invoices';
+import { useTheme } from '../../theme';
+
+export const InvoicesScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={MOCK_INVOICES}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={({ item }) => (
+          <View style={styles.card}>
+            <View style={styles.header}>
+              <View style={styles.titleWrapper}>
+                <Icon
+                  name="card-outline"
+                  size={20}
+                  color={item.color}
+                  style={styles.icon}
+                />
+                <Text style={styles.title}>{item.invoiceNo}</Text>
+              </View>
+              <Text style={styles.amount}>{item.amount}</Text>
+            </View>
+            <View style={styles.body}>
+              <Text style={styles.client}>Client: {item.client}</Text>
+              <Text style={styles.dueDate}>Due Date: {item.dueDate}</Text>
+            </View>
+            <View style={styles.footer}>
+              <View
+                style={[styles.badge, { backgroundColor: `${item.color}15` }]}
+              >
+                <Text style={[styles.badgeText, { color: item.color }]}>
+                  {item.status}
+                </Text>
+              </View>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
--- a/app/features/invoices/invoices.styles.ts
+++ b/app/features/invoices/invoices.styles.ts
@ -0,0 +1,73 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  listContent: {
+    padding: 16,
+  },
+  card: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 10,
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  amount: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: colors.text,
+  },
+  body: {
+    paddingVertical: 12,
+  },
+  client: {
+    fontSize: 13,
+    color: colors.textSecondary,
+  },
+  dueDate: {
+    fontSize: 12,
+    color: colors.textMuted,
+    marginTop: 4,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});
--- a/app/features/leads/index.ts
+++ b/app/features/leads/index.ts
@ -0,0 +1,2 @@
+export * from './leads.screen';
+export * from './leads.styles'
--- a/app/features/leads/leads.screen.tsx
+++ b/app/features/leads/leads.screen.tsx
@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  Text,
+  View,
+  FlatList,
+  TextInput,
+  TouchableOpacity,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './leads.styles';
+import { MOCK_LEADS } from '../../mock-data/leads';
+import { useTheme } from '../../theme';
+
+export const LeadsScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.searchWrapper}>
+          <Icon
+            name="search-outline"
+            size={20}
+            color={colors.textSecondary}
+            style={styles.searchIcon}
+          />
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Search leads, companies..."
+            placeholderTextColor={colors.textMuted}
+          />
+        </View>
+        <TouchableOpacity style={styles.filterButton}>
+          <Icon name="filter-outline" size={20} color={colors.text} />
+        </TouchableOpacity>
+      </View>
+
+      <FlatList
+        data={MOCK_LEADS}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={({ item }) => (
+          <View style={styles.leadCard}>
+            <View style={styles.cardHeader}>
+              <View>
+                <Text style={styles.leadName}>{item.name}</Text>
+                <Text style={styles.leadCompany}>{item.company}</Text>
+              </View>
+              <View
+                style={[
+                  styles.statusBadge,
+                  { backgroundColor: `${item.color}15` },
+                ]}
+              >
+                <Text style={[styles.statusText, { color: item.color }]}>
+                  {item.status}
+                </Text>
+              </View>
+            </View>
+            <View style={styles.cardFooter}>
+              <View style={styles.infoRow}>
+                <Icon
+                  name="mail-outline"
+                  size={16}
+                  color={colors.textSecondary}
+                />
+                <Text style={styles.infoValue}>{item.email}</Text>
+              </View>
+              <TouchableOpacity style={styles.actionButton}>
+                <Icon name="chevron-forward" size={18} color={colors.icon} />
+              </TouchableOpacity>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
--- a/app/features/leads/leads.styles.ts
+++ b/app/features/leads/leads.styles.ts
@ -0,0 +1,109 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 16,
+    alignItems: 'center',
+  },
+  searchWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    marginRight: 10,
+  },
+  searchIcon: {
+    marginRight: 8,
+  },
+  searchInput: {
+    flex: 1,
+    height: 44,
+    color: colors.text,
+    fontSize: 14,
+  },
+  filterButton: {
+    width: 44,
+    height: 44,
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  listContent: {
+    padding: 16,
+    paddingTop: 0,
+  },
+  leadCard: {
+    backgroundColor: colors.card,
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 12,
+  },
+  leadName: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  leadCompany: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginTop: 2,
+  },
+  statusBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  statusText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  cardFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingTop: 12,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  infoValue: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginLeft: 8,
+  },
+  actionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: colors.border,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
--- a/app/features/login/index.ts
+++ b/app/features/login/index.ts
@ -0,0 +1,2 @@
+export * from './login.screen';
+export * from './login.styles'
--- a/app/features/login/login.screen.tsx
+++ b/app/features/login/login.screen.tsx
@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useNavigation } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './login.styles';
+import { useTheme } from '../../theme';
+
+export const LoginScreen = () => {
+  const navigation = useNavigation<any>();
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+  const [tenancy, setTenancy] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async () => {
+    setError('');
+    if (!tenancy.trim()) {
+      setError('Tenancy name is required');
+      return;
+    }
+    if (!email.trim()) {
+      setError('Email address is required');
+      return;
+    }
+    if (!password.trim()) {
+      setError('Password is required');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const mockToken = 'dummy-jwt-token-for-crm';
+      await AsyncStorage.setItem('userToken', mockToken);
+      await AsyncStorage.setItem('tenancyName', tenancy);
+      setLoading(false);
+
+      navigation.reset({
+        index: 0,
+        routes: [{ name: 'DrawerStack' }], // root-level stack name stays as-is
+      });
+    } catch {
+      setLoading(false);
+      setError('Failed to sign in. Please try again.');
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContainer}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.headerContainer}>
+          <View style={styles.logoCircle}>
+            <Icon name="cube" size={40} color={colors.icon} />
+          </View>
+          <Text style={styles.title}>Convex CRM</Text>
+          <Text style={styles.subtitle}>
+            Enter details to access your workspace
+          </Text>
+        </View>
+
+        <View style={styles.formCard}>
+          {error ? (
+            <View style={styles.errorBanner}>
+              <Icon name="alert-circle" size={20} color="#EF4444" />
+              <Text style={styles.errorText}>{error}</Text>
+            </View>
+          ) : null}
+
+          {/* Tenancy Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Tenancy Name</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="business-outline"
+                size={20}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="company-name"
+                placeholderTextColor={colors.textMuted}
+                value={tenancy}
+                onChangeText={setTenancy}
+                autoCapitalize="none"
+                autoCorrect={false}
+              />
+            </View>
+          </View>
+
+          {/* Email Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Email Address</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="mail-outline"
+                size={20}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="name@company.com"
+                placeholderTextColor={colors.textMuted}
+                value={email}
+                onChangeText={setEmail}
+                keyboardType="email-address"
+                autoCapitalize="none"
+                autoCorrect={false}
+              />
+            </View>
+          </View>
+
+          {/* Password Field */}
+          <View style={styles.inputContainer}>
+            <Text style={styles.label}>Password</Text>
+            <View style={styles.inputWrapper}>
+              <Icon
+                name="lock-closed-outline"
+                size={20}
+                color={colors.textSecondary}
+                style={styles.inputIcon}
+              />
+              <TextInput
+                style={styles.input}
+                placeholder="••••••••"
+                placeholderTextColor={colors.textMuted}
+                value={password}
+                onChangeText={setPassword}
+                secureTextEntry
+                autoCapitalize="none"
+                autoCorrect={false}
+              />
+            </View>
+          </View>
+
+          {/* Sign In Button */}
+          <TouchableOpacity
+            style={styles.button}
+            activeOpacity={0.8}
+            onPress={handleLogin}
+            disabled={loading}
+          >
+            <Text style={styles.buttonText}>
+              {loading ? 'Signing In...' : 'Sign In'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.footer}>
+          <Text style={styles.footerText}>Secure SSL encrypted workspace</Text>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
--- a/app/features/login/login.styles.ts
+++ b/app/features/login/login.styles.ts
@ -0,0 +1,128 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    scrollContainer: {
+      flexGrow: 1,
+      justifyContent: 'center',
+      padding: 24,
+    },
+    headerContainer: {
+      alignItems: 'center',
+      marginBottom: 32,
+    },
+    logoCircle: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      backgroundColor: colors.border,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 16,
+      shadowColor: colors.icon,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 10,
+      elevation: 8,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: '800',
+      color: colors.text,
+      letterSpacing: 0.5,
+    },
+    subtitle: {
+      fontSize: 14,
+      color: colors.textSecondary,
+      marginTop: 8,
+      textAlign: 'center',
+    },
+    formCard: {
+      backgroundColor: colors.card,
+      borderRadius: 16,
+      padding: 24,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 10 },
+      shadowOpacity: 0.25,
+      shadowRadius: 15,
+      elevation: 10,
+    },
+    errorBanner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: '#451A1A',
+      borderRadius: 8,
+      padding: 12,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: '#7F1D1D',
+    },
+    errorText: {
+      color: '#FCA5A5',
+      fontSize: 13,
+      marginLeft: 8,
+      flex: 1,
+    },
+    inputContainer: {
+      marginBottom: 20,
+    },
+    label: {
+      fontSize: 13,
+      fontWeight: '600',
+      color: colors.textSecondary,
+      marginBottom: 8,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderBottomColor: colors.border,
+      borderColor: colors.border,
+      paddingHorizontal: 12,
+    },
+    inputIcon: {
+      marginRight: 10,
+    },
+    input: {
+      flex: 1,
+      height: 48,
+      color: colors.text,
+      fontSize: 15,
+    },
+    button: {
+      backgroundColor: colors.icon,
+      borderRadius: 10,
+      height: 50,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 8,
+      shadowColor: colors.icon,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.4,
+      shadowRadius: 6,
+      elevation: 5,
+    },
+    buttonText: {
+      color: '#FFFFFF',
+      fontSize: 16,
+      fontWeight: '700',
+      letterSpacing: 0.5,
+    },
+    footer: {
+      alignItems: 'center',
+      marginTop: 32,
+    },
+    footerText: {
+      fontSize: 12,
+      color: colors.textMuted,
+    },
+  });
--- a/app/features/profile/index.ts
+++ b/app/features/profile/index.ts
@ -0,0 +1,2 @@
+export * from './profile.screen';
+export * from './profile.styles';
--- a/app/features/profile/profile.screen.tsx
+++ b/app/features/profile/profile.screen.tsx
@ -0,0 +1,119 @@
+import React from 'react';
+import { Text, View, TouchableOpacity, ScrollView, Switch } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useNavigation } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './profile.styles';
+import { useTheme } from '../../theme';
+
+export const ProfileScreen = () => {
+  const navigation = useNavigation<any>();
+  const { theme: colors, isDark, toggleTheme } = useTheme();
+  const styles = getStyles(colors);
+
+  const handleLogout = async () => {
+    try {
+      await AsyncStorage.removeItem('userToken');
+      await AsyncStorage.removeItem('tenancyName');
+    } catch (e) {
+      console.error(e);
+    }
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
+    });
+  };
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      {/* Profile Header */}
+      <View style={styles.profileHeader}>
+        <View style={styles.avatarCircle}>
+          <Text style={styles.avatarInitial}>A</Text>
+        </View>
+        <Text style={styles.profileName}>Workspace Administrator</Text>
+        <Text style={styles.profileRole}>Owner / Administrator</Text>
+      </View>
+
+      {/* Account Details list */}
+      <View style={styles.sectionCard}>
+        <Text style={styles.sectionHeader}>Workspace Details</Text>
+
+        <View style={styles.infoRow}>
+          <Text style={styles.infoLabel}>Tenancy</Text>
+          <Text style={styles.infoValue}>convex-crm-tenant</Text>
+        </View>
+
+        <View style={styles.infoRow}>
+          <Text style={styles.infoLabel}>Email</Text>
+          <Text style={styles.infoValue}>admin@convex.com</Text>
+        </View>
+
+        <View style={styles.infoRow}>
+          <Text style={styles.infoLabel}>Status</Text>
+          <Text style={styles.infoValueStatus}>Active</Text>
+        </View>
+      </View>
+
+      {/* Settings list */}
+      <View style={styles.sectionCard}>
+        <Text style={styles.sectionHeader}>Preferences</Text>
+
+        <View style={styles.preferenceRow}>
+          <View style={styles.preferenceLabelGroup}>
+            <Icon
+              name={isDark ? 'moon' : 'moon-outline'}
+              size={20}
+              color={colors.textSecondary}
+              style={styles.icon}
+            />
+            <Text style={styles.preferenceText}>Dark Mode</Text>
+          </View>
+          <Switch
+            value={isDark}
+            onValueChange={toggleTheme}
+            trackColor={{ false: '#767577', true: colors.icon }}
+            thumbColor={isDark ? '#ffffff' : '#f4f3f4'}
+          />
+        </View>
+
+        <TouchableOpacity style={styles.preferenceRow}>
+          <View style={styles.preferenceLabelGroup}>
+            <Icon
+              name="notifications-outline"
+              size={20}
+              color={colors.textSecondary}
+              style={styles.icon}
+            />
+            <Text style={styles.preferenceText}>Push Notifications</Text>
+          </View>
+          <Icon name="chevron-forward" size={18} color={colors.textMuted} />
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.preferenceRow}>
+          <View style={styles.preferenceLabelGroup}>
+            <Icon
+              name="shield-checkmark-outline"
+              size={20}
+              color={colors.textSecondary}
+              style={styles.icon}
+            />
+            <Text style={styles.preferenceText}>Security &amp; Privacy</Text>
+          </View>
+          <Icon name="chevron-forward" size={18} color={colors.textMuted} />
+        </TouchableOpacity>
+      </View>
+
+      {/* Sign Out Button */}
+      <TouchableOpacity style={styles.signOutButton} onPress={handleLogout}>
+        <Icon
+          name="log-out-outline"
+          size={20}
+          color="#FFFFFF"
+          style={styles.buttonIcon}
+        />
+        <Text style={styles.signOutButtonText}>Sign Out from Workspace</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
--- a/app/features/profile/profile.styles.ts
+++ b/app/features/profile/profile.styles.ts
@ -0,0 +1,118 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  content: {
+    padding: 16,
+  },
+  profileHeader: {
+    alignItems: 'center',
+    marginVertical: 24,
+  },
+  avatarCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: colors.icon,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatarInitial: {
+    color: '#FFFFFF',
+    fontSize: 32,
+    fontWeight: '800',
+  },
+  profileName: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  profileRole: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginTop: 4,
+  },
+  sectionCard: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 20,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  sectionHeader: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: colors.text,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 8,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 14,
+  },
+  infoLabel: {
+    fontSize: 14,
+    color: colors.textSecondary,
+  },
+  infoValue: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.text,
+  },
+  infoValueStatus: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#10B981',
+  },
+  preferenceRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  preferenceLabelGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: 12,
+  },
+  preferenceText: {
+    fontSize: 14,
+    color: colors.text,
+    fontWeight: '500',
+  },
+  signOutButton: {
+    backgroundColor: '#EF4444',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+    height: 48,
+    marginTop: 10,
+  },
+  buttonIcon: {
+    marginRight: 8,
+  },
+  signOutButtonText: {
+    color: '#FFFFFF',
+    fontSize: 15,
+    fontWeight: '700',
+  },
+});
--- a/app/features/projects/index.ts
+++ b/app/features/projects/index.ts
@ -0,0 +1,2 @@
+export * from './projects.screen';
+export * from './projects.styles';
--- a/app/features/projects/projects.screen.tsx
+++ b/app/features/projects/projects.screen.tsx
@ -0,0 +1,62 @@
+import React from 'react';
+import { Text, View, FlatList } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './projects.styles';
+import { MOCK_PROJECTS } from '../../mock-data/projects';
+import { useTheme } from '../../theme';
+
+export const ProjectsScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  const renderItem = ({ item }: { item: any }) => (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <View style={styles.titleWrapper}>
+          <Icon
+            name="rocket-outline"
+            size={20}
+            color={item.color}
+            style={styles.icon}
+          />
+          <Text style={styles.title}>{item.name}</Text>
+        </View>
+      </View>
+      <View style={styles.body}>
+        <Text style={styles.lead}>Lead: {item.lead}</Text>
+        <View style={styles.progressRow}>
+          <Text style={styles.progressLabel}>Progress</Text>
+          <Text style={styles.progressValue}>
+            {Math.round(item.progress * 100)}%
+          </Text>
+        </View>
+        <View style={styles.progressBarBg}>
+          <View
+            style={[
+              styles.progressBarFill,
+              { width: `${item.progress * 100}%`, backgroundColor: item.color },
+            ]}
+          />
+        </View>
+      </View>
+      <View style={styles.footer}>
+        <View style={[styles.badge, { backgroundColor: `${item.color}15` }]}>
+          <Text style={[styles.badgeText, { color: item.color }]}>
+            {item.status}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={MOCK_PROJECTS}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={renderItem}
+      />
+    </View>
+  );
+};
--- a/app/features/projects/projects.styles.ts
+++ b/app/features/projects/projects.styles.ts
@ -0,0 +1,90 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  listContent: {
+    padding: 16,
+  },
+  card: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 10,
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: colors.text,
+    flex: 1,
+  },
+  body: {
+    paddingVertical: 12,
+  },
+  lead: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginBottom: 12,
+  },
+  progressRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  progressLabel: {
+    fontSize: 12,
+    color: colors.textMuted,
+  },
+  progressValue: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  progressBarBg: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: colors.border,
+  },
+  progressBarFill: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginTop: 4,
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});
--- a/app/features/proposals/index.ts
+++ b/app/features/proposals/index.ts
@ -0,0 +1,2 @@
+export * from './proposals.screen';
+export * from './proposals.styles';
--- a/app/features/proposals/proposals.screen.tsx
+++ b/app/features/proposals/proposals.screen.tsx
@ -0,0 +1,53 @@
+import React from 'react';
+import { Text, View, FlatList } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './proposals.styles';
+import { MOCK_PROPOSALS } from '../../mock-data/proposal';
+import { useTheme } from '../../theme';
+
+export const ProposalsScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={MOCK_PROPOSALS}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={({ item }) => (
+          <View style={styles.card}>
+            <View style={styles.header}>
+              <View style={styles.titleWrapper}>
+                <Icon
+                  name="document-text-outline"
+                  size={20}
+                  color={item.iconColor}
+                  style={styles.icon}
+                />
+                <Text style={styles.title}>{item.title}</Text>
+              </View>
+              <Text style={styles.value}>{item.value}</Text>
+            </View>
+            <View style={styles.body}>
+              <Text style={styles.client}>Client: {item.client}</Text>
+              <Text style={styles.date}>Sent: {item.date}</Text>
+            </View>
+            <View style={styles.footer}>
+              <View
+                style={[
+                  styles.badge,
+                  { backgroundColor: `${item.iconColor}15` },
+                ]}
+              >
+                <Text style={[styles.badgeText, { color: item.iconColor }]}>
+                  {item.status}
+                </Text>
+              </View>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
--- a/app/features/proposals/proposals.styles.ts
+++ b/app/features/proposals/proposals.styles.ts
@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  listContent: {
+    padding: 16,
+  },
+  card: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 10,
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: colors.text,
+    flex: 1,
+  },
+  value: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: colors.text,
+  },
+  body: {
+    paddingVertical: 12,
+  },
+  client: {
+    fontSize: 13,
+    color: colors.textSecondary,
+  },
+  date: {
+    fontSize: 12,
+    color: colors.textMuted,
+    marginTop: 4,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+  },
+});
--- a/app/features/tasks/index.ts
+++ b/app/features/tasks/index.ts
@ -0,0 +1,2 @@
+export * from './tasks.screen';
+export * from './tasks.styles';
--- a/app/features/tasks/tasks.screen.tsx
+++ b/app/features/tasks/tasks.screen.tsx
@ -0,0 +1,50 @@
+import React from 'react';
+import { Text, View, FlatList } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './tasks.styles';
+import { MOCK_TASKS } from '../../mock-data/tasks';
+import { useTheme } from '../../theme';
+
+export const TasksScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={MOCK_TASKS}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={({ item }) => (
+          <View style={styles.card}>
+            <View style={styles.header}>
+              <View style={styles.titleWrapper}>
+                <Icon
+                  name="checkbox-outline"
+                  size={20}
+                  color={item.color}
+                  style={styles.icon}
+                />
+                <Text style={styles.title}>{item.title}</Text>
+              </View>
+            </View>
+            <View style={styles.body}>
+              <Text style={styles.project}>
+                {item.project ? `Project: ${item.project}` : item.comment}
+              </Text>
+            </View>
+            <View style={styles.footer}>
+              <View
+                style={[styles.badge, { backgroundColor: `${item.color}15` }]}
+              >
+                <Text style={[styles.badgeText, { color: item.color }]}>
+                  {item.priority} Priority
+                </Text>
+              </View>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
--- a/app/features/tasks/tasks.styles.ts
+++ b/app/features/tasks/tasks.styles.ts
@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  listContent: {
+    padding: 16,
+  },
+  card: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 10,
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: colors.text,
+    flex: 1,
+  },
+  body: {
+    paddingVertical: 12,
+  },
+  project: {
+    fontSize: 13,
+    color: colors.textSecondary,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});
--- a/app/features/tickets/index.ts
+++ b/app/features/tickets/index.ts
@ -0,0 +1,2 @@
+export * from './tickets.screen';
+export * from './tickets.styles';
--- a/app/features/tickets/tickets.screen.tsx
+++ b/app/features/tickets/tickets.screen.tsx
@ -0,0 +1,48 @@
+import React from 'react';
+import { Text, View, FlatList } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { getStyles } from './tickets.styles';
+import { MOCK_TICKETS } from '../../mock-data/tickets';
+import { useTheme } from '../../theme';
+
+export const TicketsScreen = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={MOCK_TICKETS}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.listContent}
+        renderItem={({ item }) => (
+          <View style={styles.card}>
+            <View style={styles.header}>
+              <View style={styles.titleWrapper}>
+                <Icon
+                  name="bug-outline"
+                  size={20}
+                  color={item.color}
+                  style={styles.icon}
+                />
+                <Text style={styles.title}>{item.ticketId}</Text>
+              </View>
+            </View>
+            <View style={styles.body}>
+              <Text style={styles.subject}>{item.subject}</Text>
+            </View>
+            <View style={styles.footer}>
+              <View
+                style={[styles.badge, { backgroundColor: `${item.color}15` }]}
+              >
+                <Text style={[styles.badgeText, { color: item.color }]}>
+                  {item.severity}
+                </Text>
+              </View>
+            </View>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
--- a/app/features/tickets/tickets.styles.ts
+++ b/app/features/tickets/tickets.styles.ts
@ -0,0 +1,64 @@
+import { StyleSheet } from 'react-native';
+import { ThemeColors } from '../../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  listContent: {
+    padding: 16,
+  },
+  card: {
+    backgroundColor: colors.card,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    paddingBottom: 10,
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: colors.text,
+  },
+  body: {
+    paddingVertical: 12,
+  },
+  subject: {
+    fontSize: 14,
+    color: colors.textSecondary,
+    fontWeight: '500',
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});
--- a/app/mock-data/customDraswe.ts
+++ b/app/mock-data/customDraswe.ts
@ -0,0 +1,12 @@
+import { route } from "../utils/route";
+ 
+export const menuItems = [
+    { label: 'Home / Tabs', route: 'home', icon: 'home-outline' },
+    { label: 'Customers',   route: route.customers,  icon: 'business-outline' },
+    { label: 'Proposals',   route: route.proposals,  icon: 'document-text-outline' },
+    { label: 'Estimates',   route: route.estimates,  icon: 'calculator-outline' },
+    { label: 'Invoices',    route: route.invoices,   icon: 'card-outline' },
+    { label: 'Projects',    route: route.projects,   icon: 'rocket-outline' },
+    { label: 'Tasks',       route: route.tasks,      icon: 'checkbox-outline' },
+    { label: 'Tickets',     route: route.tickets,    icon: 'bug-outline' },
+  ];
--- a/app/mock-data/customers.ts
+++ b/app/mock-data/customers.ts
@ -0,0 +1,7 @@
+export const MOCK_CUSTOMERS = [
+  { id: '1', name: 'Acme Corporation', contactPerson: 'Alice Vance', phone: '+1 (555) 019-2834', email: 'billing@acme.com', activeProjects: 3 },
+  { id: '2', name: 'Stark Industries', contactPerson: 'Tony Stark', phone: '+1 (555) 012-9842', email: 'pepper@stark.com', activeProjects: 5 },
+  { id: '3', name: 'Wayne Enterprises', contactPerson: 'Bruce Wayne', phone: '+1 (555) 014-7291', email: 'lucius@wayne.co', activeProjects: 1 },
+  { id: '4', name: 'Oscorp Tech', contactPerson: 'Norman Osborn', phone: '+1 (555) 017-3849', email: 'norman@oscorp.org', activeProjects: 2 },
+  { id: '5', name: 'Umbrella Corp', contactPerson: 'Albert Wesker', phone: '+1 (555) 015-8492', email: 'wesker@umbrella.com', activeProjects: 0 },
+];
--- a/app/mock-data/dashboard.ts
+++ b/app/mock-data/dashboard.ts
@ -0,0 +1,6 @@
+  export const statCards = [
+    { title: 'Total Leads', count: '1,248', change: '+12%', icon: 'people', color: '#6366F1' },
+    { title: 'Deals Value', count: '$45,820', change: '+8.4%', icon: 'cash', color: '#10B981' },
+    { title: 'Invoices Paid', count: '94%', change: '+3%', icon: 'checkmark-circle', color: '#3B82F6' },
+    { title: 'Active Tickets', count: '14', change: '-2', icon: 'ticket', color: '#F59E0B' },
+  ];
--- a/app/mock-data/estimates.ts
+++ b/app/mock-data/estimates.ts
@ -0,0 +1,5 @@
+export const MOCK_ESTIMATES = [
+  { id: '1', number: 'EST-2026-001', client: 'Apex Global', value: '$8,400', status: 'Approved', date: 'Jul 12, 2026', color: '#10B981' },
+  { id: '2', number: 'EST-2026-002', client: 'Nova Retail', value: '$12,850', status: 'Pending Review', date: 'Jul 14, 2026', color: '#F59E0B' },
+  { id: '3', number: 'EST-2026-003', client: 'Horizon Consulting', value: '$3,200', status: 'Draft', date: 'Jul 15, 2026', color: '#64748B' },
+];
--- a/app/mock-data/invoices.ts
+++ b/app/mock-data/invoices.ts
@ -0,0 +1,5 @@
+export const MOCK_INVOICES = [
+  { id: '1', invoiceNo: 'INV-1024', client: 'Acme Corp', amount: '$1,250.00', status: 'Paid', dueDate: 'Jul 20, 2026', color: '#10B981' },
+  { id: '2', invoiceNo: 'INV-1025', client: 'Stark Industries', amount: '$5,400.00', status: 'Unpaid', dueDate: 'Jul 30, 2026', color: '#F59E0B' },
+  { id: '3', invoiceNo: 'INV-1026', client: 'Wayne Enterprises', amount: '$12,000.00', status: 'Overdue', dueDate: 'Jul 05, 2026', color: '#EF4444' },
+];
--- a/app/mock-data/leads.ts
+++ b/app/mock-data/leads.ts
@ -0,0 +1,7 @@
+export const MOCK_LEADS = [
+  { id: '1', name: 'Robert Chen', company: 'Apex Global', email: 'robert@apex.com', status: 'New', color: '#6366F1' },
+  { id: '2', name: 'Melanie Cruz', company: 'Nova Retail', email: 'cruz@novaretail.io', status: 'Contacted', color: '#3B82F6' },
+  { id: '3', name: 'David Miller', company: 'Starlight Tech', email: 'd.miller@starlight.com', status: 'Qualified', color: '#10B981' },
+  { id: '4', name: 'Diana Ross', company: 'Horizon Consulting', email: 'diana@horizon.co', status: 'Lost', color: '#EF4444' },
+  { id: '5', name: 'Gary Vance', company: 'Nexus Logistics', email: 'vance@nexus.com', status: 'Negotiating', color: '#F59E0B' },
+];
--- a/app/mock-data/projects.ts
+++ b/app/mock-data/projects.ts
@ -0,0 +1,5 @@
+export const MOCK_PROJECTS = [
+  { id: '1', name: 'CRM Mobile Application', lead: 'Sarah Jenkins', progress: 0.75, status: 'In Progress', color: '#6366F1' },
+  { id: '2', name: 'Sales Pipeline Optimization', lead: 'Dave Miller', progress: 1.0, status: 'Completed', color: '#10B981' },
+  { id: '3', name: 'Billing API Refactoring', lead: 'Melanie Cruz', progress: 0.2, status: 'Behind Schedule', color: '#EF4444' },
+];
--- a/app/mock-data/proposal.ts
+++ b/app/mock-data/proposal.ts
@ -0,0 +1,5 @@
+export const MOCK_PROPOSALS = [
+  { id: '1', title: 'Enterprise CRM Migration', client: 'Acme Corp', value: '$25,000', status: 'Sent', date: 'Jul 10, 2026', iconColor: '#3B82F6' },
+  { id: '2', title: 'Security Auditing & Hardening', client: 'Wayne Ent.', value: '$18,500', status: 'Accepted', date: 'Jul 08, 2026', iconColor: '#10B981' },
+  { id: '3', title: 'API Integration Workshop', client: 'Stark Ind.', value: '$4,999', status: 'Declined', date: 'Jul 02, 2026', iconColor: '#EF4444' },
+];
--- a/app/mock-data/tasks.ts
+++ b/app/mock-data/tasks.ts
@ -0,0 +1,5 @@
+export const MOCK_TASKS = [
+  { id: '1', title: 'Prepare sales forecast presentation', project: 'Sales Optimization', priority: 'High', color: '#EF4444' },
+  { id: '2', title: 'Draft proposal for Apex Global', comment: 'Waiting for legal', priority: 'Medium', color: '#F59E0B' },
+  { id: '3', title: 'Follow up on ticket #204', comment: 'Quick support review', priority: 'Low', color: '#10B981' },
+];
--- a/app/mock-data/tickets.ts
+++ b/app/mock-data/tickets.ts
@ -0,0 +1,5 @@
+export const MOCK_TICKETS = [
+  { id: '1', ticketId: 'TCK-402', subject: 'Cannot sign in to tenant workspace', severity: 'Critical', color: '#EF4444' },
+  { id: '2', ticketId: 'TCK-403', subject: 'Invoice PDF generation layout alignment issue', severity: 'Minor', color: '#3B82F6' },
+  { id: '3', ticketId: 'TCK-404', subject: 'New Lead notification latency in Android client', severity: 'Major', color: '#F59E0B' },
+];
--- a/app/navigation/authStack.tsx
+++ b/app/navigation/authStack.tsx
@ -0,0 +1,16 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { LoginScreen } from '../features/login';
+import { route, RouteParams } from '../utils/route';
+
+export type AuthStackParamList = Pick<RouteParams, 'login'>;
+
+const Stack = createNativeStackNavigator<AuthStackParamList>();
+
+export const AuthStack = () => {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name={route.login} component={LoginScreen} />
+    </Stack.Navigator>
+  );
+}
--- a/app/navigation/customDrawerContent.style.ts
+++ b/app/navigation/customDrawerContent.style.ts
@ -0,0 +1,90 @@
+import { StyleSheet } from 'react-native';
+
+import { ThemeColors } from '../theme';
+
+export const getStyles = (colors: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.drawerBg,
+    },
+    header: {
+      backgroundColor: colors.drawerHeader,
+      padding: 24,
+      paddingTop: 48,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    logoCircle: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: colors.icon,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    headerDetails: {
+      marginLeft: 14,
+      flex: 1,
+    },
+    tenantName: {
+      fontSize: 16,
+      fontWeight: '800',
+      color: '#FFFFFF',
+    },
+    adminEmail: {
+      fontSize: 12,
+      color: '#94A3B8',
+      marginTop: 2,
+    },
+    scrollContent: {
+      paddingVertical: 16,
+    },
+    menuContainer: {
+      paddingHorizontal: 12,
+    },
+    itemWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderRadius: 10,
+      marginBottom: 6,
+    },
+    itemWrapperActive: {
+      backgroundColor: colors.border,
+    },
+    itemIcon: {
+      marginRight: 14,
+    },
+    itemLabel: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.textSecondary,
+    },
+    itemLabelActive: {
+      color: colors.icon,
+      fontWeight: '700',
+    },
+    footer: {
+      borderTopWidth: 1,
+      borderTopColor: colors.border,
+      padding: 16,
+      paddingBottom: 24,
+    },
+    logoutButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderRadius: 10,
+    },
+    logoutIcon: {
+      marginRight: 14,
+    },
+    logoutText: {
+      fontSize: 14,
+      fontWeight: '700',
+      color: '#EF4444',
+    },
+  });
--- a/app/navigation/customDrawerContent.tsx
+++ b/app/navigation/customDrawerContent.tsx
@ -0,0 +1,103 @@
+import React from 'react';
+import { Text, View, TouchableOpacity, ScrollView } from 'react-native';
+import { DrawerContentComponentProps } from '@react-navigation/drawer';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { menuItems } from '../mock-data/customDraswe';
+import { useTheme } from '../theme';
+import { getStyles } from './customDrawerContent.style';
+
+interface DrawerItemProps {
+  label: string;
+  iconName: string;
+  focused: boolean;
+  onPress: () => void;
+}
+
+const DrawerItem = ({ label, iconName, focused, onPress }: DrawerItemProps) => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <TouchableOpacity
+      style={[styles.itemWrapper, focused && styles.itemWrapperActive]}
+      activeOpacity={0.7}
+      onPress={onPress}
+    >
+      <Icon
+        name={iconName}
+        size={22}
+        color={focused ? colors.icon : colors.textSecondary}
+        style={styles.itemIcon}
+      />
+      <Text style={[styles.itemLabel, focused && styles.itemLabelActive]}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export const CustomDrawerContent = (props: DrawerContentComponentProps) => {
+  const { state, navigation } = props;
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  const handleLogout = async () => {
+    try {
+      await AsyncStorage.removeItem('userToken');
+      await AsyncStorage.removeItem('tenancyName');
+    } catch (e) {
+      console.error(e);
+    }
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
+    });
+  };
+  const activeRouteName = state.routeNames[state.index];
+
+  return (
+    <View style={styles.container}>
+      {/* Drawer Header Profile */}
+      <View style={styles.header}>
+        <View style={styles.logoCircle}>
+          <Icon name="cube" size={28} color="#FFFFFF" />
+        </View>
+        <View style={styles.headerDetails}>
+          <Text style={styles.tenantName}>Convex CRM</Text>
+          <Text style={styles.adminEmail}>admin@convex.com</Text>
+        </View>
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={styles.menuContainer}>
+          {menuItems.map(item => {
+            const isFocused = activeRouteName === item.route;
+            return (
+              <DrawerItem
+                key={item.route}
+                label={item.label}
+                iconName={item.icon}
+                focused={isFocused}
+                onPress={() => navigation.navigate(item.route)}
+              />
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      {/* Drawer Footer / Sign Out */}
+      <View style={styles.footer}>
+        <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+          <Icon
+            name="log-out-outline"
+            size={20}
+            color="#EF4444"
+            style={styles.logoutIcon}
+          />
+          <Text style={styles.logoutText}>Log Out</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
--- a/app/navigation/drawerStack.tsx
+++ b/app/navigation/drawerStack.tsx
@ -0,0 +1,64 @@
+import React from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { TabStack } from './tabStack';
+import { CustomDrawerContent } from './customDrawerContent';
+import { CustomersScreen } from '../features/customers';
+import { ProposalsScreen } from '../features/proposals';
+import { EstimatesScreen } from '../features/estimates';
+import { InvoicesScreen } from '../features/invoices';
+import { ProjectsScreen } from '../features/projects';
+import { TasksScreen } from '../features/tasks';
+import { TicketsScreen } from '../features/tickets';
+import { route, RouteParams } from '../utils/route';
+import { useTheme } from '../theme';
+
+export type DrawerStackParamList = { home: undefined } & Pick<
+  RouteParams,
+  | 'customers'
+  | 'proposals'
+  | 'estimates'
+  | 'invoices'
+  | 'projects'
+  | 'tasks'
+  | 'tickets'
+>;
+
+const Drawer = createDrawerNavigator<DrawerStackParamList>();
+
+export const DrawerStack = () => {
+  const { theme: colors } = useTheme();
+  return (
+    <Drawer.Navigator
+      drawerContent={CustomDrawerContent}
+      screenOptions={{
+        swipeEnabled: false,
+        headerStyle: {
+          backgroundColor: colors.header,
+          elevation: 0,
+          shadowOpacity: 0,
+        },
+        headerTitleStyle: {
+          fontSize: 16,
+          fontWeight: '700',
+          color: colors.text,
+        },
+        headerTitleAlign: 'center',
+        headerTintColor: colors.text,
+      }}
+    >
+      {/* Tab Navigator has its own headers per tab, so hide Drawer header for home */}
+      <Drawer.Screen
+        name="home"
+        component={TabStack}
+        options={{ headerShown: false }}
+      />
+      <Drawer.Screen name={route.customers} component={CustomersScreen} />
+      <Drawer.Screen name={route.proposals} component={ProposalsScreen} />
+      <Drawer.Screen name={route.estimates} component={EstimatesScreen} />
+      <Drawer.Screen name={route.invoices} component={InvoicesScreen} />
+      <Drawer.Screen name={route.projects} component={ProjectsScreen} />
+      <Drawer.Screen name={route.tasks} component={TasksScreen} />
+      <Drawer.Screen name={route.tickets} component={TicketsScreen} />
+    </Drawer.Navigator>
+  );
+};
--- a/app/navigation/rootNavigator.tsx
+++ b/app/navigation/rootNavigator.tsx
@ -0,0 +1,23 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {AuthStack} from './authStack';
+import {DrawerStack} from './drawerStack';
+
+export type RootStackParamList = {
+  AuthStack: undefined;
+  DrawerStack: undefined;
+};
+
+const RootStack = createNativeStackNavigator<RootStackParamList>();
+
+export const RootNavigator = () => {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator screenOptions={{ headerShown: false }} initialRouteName="AuthStack">
+        <RootStack.Screen name="AuthStack" component={AuthStack} />
+        <RootStack.Screen name="DrawerStack" component={DrawerStack} />
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+}
--- a/app/navigation/tabStack.styles.ts
+++ b/app/navigation/tabStack.styles.ts
@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+
+import { ThemeColors } from '../theme';
+
+export const getStyles = (colors: ThemeColors) => StyleSheet.create({
+  tabBar: {
+    backgroundColor: colors.tabBar,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    height: 60,
+    paddingBottom: 8,
+    paddingTop: 8,
+  },
+  tabBarLabel: {
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  header: {
+    backgroundColor: colors.header,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    elevation: 0,
+    shadowOpacity: 0,
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '800',
+    color: colors.text,
+  },
+  drawerButton: {
+    paddingHorizontal: 16,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
--- a/app/navigation/tabStack.tsx
+++ b/app/navigation/tabStack.tsx
@ -0,0 +1,80 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { DrawerNavigationProp } from '@react-navigation/drawer';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { route, RouteParams } from '../utils/route';
+import {DashboardScreen} from '../features/dashboard';
+import { LeadsScreen } from '../features/leads';
+import { AddLeadScreen } from '../features/addLead';
+import { CustomersScreen } from '../features/customers';
+import { ProfileScreen } from '../features/profile';
+import { useTheme } from '../theme';
+import { getStyles } from './tabStack.styles';
+
+export type TabStackParamList = Pick<RouteParams, 'dashboard' | 'leads' | 'addLead' | 'customers' | 'profile'>;
+
+const Tab = createBottomTabNavigator<TabStackParamList>();
+
+export const TabStack = () => {
+  const { theme: colors } = useTheme();
+  const styles = getStyles(colors);
+
+  return (
+    <Tab.Navigator
+      screenOptions={({ route: tabRoute }) => ({
+        tabBarIcon: ({ focused, color, size }) => {
+          let iconName = 'square';
+          if (tabRoute.name === route.dashboard) {
+            iconName = focused ? 'grid' : 'grid-outline';
+          } else if (tabRoute.name === route.leads) {
+            iconName = focused ? 'funnel' : 'funnel-outline';
+          } else if (tabRoute.name === route.addLead) {
+            iconName = focused ? 'add-circle' : 'add-circle-outline';
+          } else if (tabRoute.name === route.customers) {
+            iconName = focused ? 'business' : 'business-outline';
+          } else if (tabRoute.name === route.profile) {
+            iconName = focused ? 'person' : 'person-outline';
+          }
+          return <Icon name={iconName} size={size} color={color} />;
+        },
+        tabBarActiveTintColor: colors.icon,
+        tabBarInactiveTintColor: colors.textMuted,
+        tabBarStyle: styles.tabBar,
+        tabBarLabelStyle: styles.tabBarLabel,
+        headerStyle: styles.header,
+        headerTitleStyle: styles.headerTitle,
+        headerTitleAlign: 'center',
+      })}
+    >
+      <Tab.Screen
+        name={route.dashboard}
+        component={DashboardScreen}
+        options={({ navigation }) => ({
+          headerTitle: 'Convex CRM',
+          headerLeft: () => (
+            <TouchableOpacity
+              style={styles.drawerButton}
+              activeOpacity={0.7}
+              onPress={() => {
+                const parentNav = navigation.getParent<DrawerNavigationProp<any>>();
+                if (parentNav) {
+                  parentNav.openDrawer();
+                } else {
+                  (navigation as any).openDrawer?.();
+                }
+              }}
+            >
+              <Icon name="menu-outline" size={26} color={colors.text} />
+            </TouchableOpacity>
+          ),
+        })}
+      />
+      <Tab.Screen name={route.leads} component={LeadsScreen} />
+      <Tab.Screen name={route.addLead} component={AddLeadScreen} />
+      <Tab.Screen name={route.customers} component={CustomersScreen} />
+      <Tab.Screen name={route.profile} component={ProfileScreen} />
+    </Tab.Navigator>
+  );
+};
+
--- a/app/theme/ThemeContext.tsx
+++ b/app/theme/ThemeContext.tsx
@ -0,0 +1,69 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from 'react';
+import { useColorScheme } from 'react-native';
+import { colors } from './colors';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ThemeColors = typeof colors.light | typeof colors.dark;
+
+interface ThemeContextValue {
+  mode: ThemeMode;
+  theme: ThemeColors;
+  toggleTheme: () => void;
+  isDark: boolean;
+  setMode: (mode: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  mode: 'system',
+  theme: colors.light,
+  toggleTheme: () => {},
+  isDark: false,
+  setMode: () => {},
+});
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const systemColorScheme = useColorScheme(); // 'light' | 'dark' | null
+  const [userMode, setUserMode] = useState<ThemeMode>('system');
+
+  // Determine current effective mode
+  const getEffectiveMode = (): 'light' | 'dark' => {
+    if (userMode === 'system') {
+      return systemColorScheme === 'dark' ? 'dark' : 'light';
+    }
+    return userMode;
+  };
+
+  const effectiveMode = getEffectiveMode();
+  const isDark = effectiveMode === 'dark';
+  const theme = isDark ? colors.dark : colors.light;
+
+  const toggleTheme = () => {
+    setUserMode(prev => {
+      if (prev === 'system') {
+        return systemColorScheme === 'dark' ? 'light' : 'dark';
+      }
+      return prev === 'light' ? 'dark' : 'light';
+    });
+  };
+
+  const value: ThemeContextValue = {
+    mode: userMode,
+    theme,
+    toggleTheme,
+    isDark,
+    setMode: setUserMode,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+// Simple hook — use this everywhere
+export const useTheme = () => useContext(ThemeContext);
--- a/app/theme/colors.ts
+++ b/app/theme/colors.ts
@ -0,0 +1,39 @@
+// Palette derived from the app background (blue/navy/cyan)
+export const colors = {
+  // Brand
+  primary: '#1565C0',     // deep blue (dark bg accent / light primary)
+  primaryLight: '#1E90FF', // bright sky blue
+  accent: '#4FC3F7',       // cyan highlight
+
+  // Light theme
+  light: {
+    background: '#F0F6FF',
+    surface: '#FFFFFF',
+    border: '#BBDEFB',
+    text: '#0A1A6B',
+    textSecondary: '#1E3A8A',
+    textMuted: '#5C7BA8',
+    icon: '#1565C0',
+    tabBar: '#FFFFFF',
+    header: '#FFFFFF',
+    drawerBg: '#FFFFFF',
+    drawerHeader: '#0A237A',
+    card: '#FFFFFF',
+  },
+
+  // Dark theme
+  dark: {
+    background: '#07112A',
+    surface: '#0D1F4A',
+    border: '#1A3575',
+    text: '#E3F0FF',
+    textSecondary: '#A8C8F5',
+    textMuted: '#5C7BA8',
+    icon: '#4FC3F7',
+    tabBar: '#0D1F4A',
+    header: '#0D1F4A',
+    drawerBg: '#0A1A6B',
+    drawerHeader: '#07112A',
+    card: '#0D1F4A',
+  },
+} as const;
--- a/app/theme/index.ts
+++ b/app/theme/index.ts
@ -0,0 +1,3 @@
+export { colors } from './colors';
+export { ThemeProvider, useTheme } from './ThemeContext';
+export type { ThemeMode, ThemeColors } from './ThemeContext';
--- a/app/types/react-native-vector-icons.d.ts
+++ b/app/types/react-native-vector-icons.d.ts
@ -0,0 +1,2 @@
+// Declaration for react-native-vector-icons/Ionicons module
+declare module 'react-native-vector-icons/Ionicons';
--- a/app/utils/api.ts
+++ b/app/utils/api.ts
--- a/app/utils/assets/background.png
+++ b/app/utils/assets/background.png
--- a/app/utils/assets/index.ts
+++ b/app/utils/assets/index.ts
@ -0,0 +1,2 @@
+export const backGroundImage = require('./background.png')
+
--- a/app/utils/assets/splashScreen.png
+++ b/app/utils/assets/splashScreen.png
--- a/app/utils/route.ts
+++ b/app/utils/route.ts
@ -0,0 +1,39 @@
+// ─── Route Name Constants ────────────────────────────────────────────────────
+export const route = {
+  // Auth
+  login: 'login',
+
+  // Main tabs
+  dashboard: 'dashboard',
+  leads: 'leads',
+  customers: 'customers',
+  proposals: 'proposals',
+  estimates: 'estimates',
+  invoices: 'invoices',
+  projects: 'projects',
+  tasks: 'tasks',
+  tickets: 'tickets',
+
+  // Sub screens
+  addLead: 'addLead',
+  profile: 'profile',
+} as const;
+
+// ─── Route Param Types ────────────────────────────────────────────────────────
+// Use `undefined` for screens that take no params.
+// Add typed params here when a screen needs them, e.g. addLead: { leadId: string }
+export type RouteParams = {
+  login: undefined;
+  dashboard: undefined;
+  leads: undefined;
+  customers: undefined;
+  proposals: undefined;
+  estimates: undefined;
+  invoices: undefined;
+  projects: undefined;
+  tasks: undefined;
+  tickets: undefined;
+  addLead: undefined;
+  profile: undefined;
+};
+
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
+};
+
+
--- a/index.js
+++ b/index.js
@ -0,0 +1,5 @@
+import { AppRegistry } from 'react-native';
+import App from './app/App';
+import { name as appName } from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);
--- a/ios/.xcode.env
+++ b/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)
--- a/Show More
+++ b/Show More
				`@ -0,0 +1,2 @@`
				`export const backGroundImage = require('./background.png')`