feat(app): initial commit
This commit is contained in:
uttam
commit
adff512db9
8
.eslintrc.js
Normal file
8
.eslintrc.js
Normal file
@ -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 }],
|
||||||
|
},
|
||||||
|
};
|
||||||
80
.gitignore
vendored
Normal file
80
.gitignore
vendored
Normal file
@ -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.*
|
||||||
|
|
||||||
5
.prettierrc.js
Normal file
5
.prettierrc.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
arrowParens: 'avoid',
|
||||||
|
singleQuote: true,
|
||||||
|
trailingComma: 'all',
|
||||||
|
};
|
||||||
1
.watchmanconfig
Normal file
1
.watchmanconfig
Normal file
@ -0,0 +1 @@
|
|||||||
|
{}
|
||||||
17
Gemfile
Normal file
17
Gemfile
Normal file
@ -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'
|
||||||
97
README.md
Normal file
97
README.md
Normal file
@ -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.
|
||||||
9
__tests__/App.test.tsx
Normal file
9
__tests__/App.test.tsx
Normal file
@ -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 />);
|
||||||
|
});
|
||||||
|
});
|
||||||
125
android/app/build.gradle
Normal file
125
android/app/build.gradle
Normal file
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
BIN
android/app/debug.keystore
Normal file
BIN
android/app/debug.keystore
Normal file
Binary file not shown.
10
android/app/proguard-rules.pro
vendored
Normal file
10
android/app/proguard-rules.pro
vendored
Normal file
@ -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:
|
||||||
27
android/app/src/main/AndroidManifest.xml
Normal file
27
android/app/src/main/AndroidManifest.xml
Normal file
@ -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>
|
||||||
22
android/app/src/main/java/com/convex_crm/MainActivity.kt
Normal file
22
android/app/src/main/java/com/convex_crm/MainActivity.kt
Normal file
@ -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)
|
||||||
|
}
|
||||||
27
android/app/src/main/java/com/convex_crm/MainApplication.kt
Normal file
27
android/app/src/main/java/com/convex_crm/MainApplication.kt
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
37
android/app/src/main/res/drawable/rn_edit_text_material.xml
Normal file
37
android/app/src/main/res/drawable/rn_edit_text_material.xml
Normal file
@ -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>
|
||||||
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
Normal file
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
Normal file
BIN
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
3
android/app/src/main/res/values/strings.xml
Normal file
3
android/app/src/main/res/values/strings.xml
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<resources>
|
||||||
|
<string name="app_name">convex CRM</string>
|
||||||
|
</resources>
|
||||||
9
android/app/src/main/res/values/styles.xml
Normal file
9
android/app/src/main/res/values/styles.xml
Normal file
@ -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>
|
||||||
21
android/build.gradle
Normal file
21
android/build.gradle
Normal file
@ -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"
|
||||||
44
android/gradle.properties
Normal file
44
android/gradle.properties
Normal file
@ -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
|
||||||
BIN
android/gradle/wrapper/gradle-wrapper.jar
vendored
Normal file
BIN
android/gradle/wrapper/gradle-wrapper.jar
vendored
Normal file
Binary file not shown.
7
android/gradle/wrapper/gradle-wrapper.properties
vendored
Normal file
7
android/gradle/wrapper/gradle-wrapper.properties
vendored
Normal file
@ -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
|
||||||
248
android/gradlew
vendored
Normal file
248
android/gradlew
vendored
Normal file
@ -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" "$@"
|
||||||
98
android/gradlew.bat
vendored
Normal file
98
android/gradlew.bat
vendored
Normal file
@ -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
|
||||||
6
android/settings.gradle
Normal file
6
android/settings.gradle
Normal file
@ -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')
|
||||||
4
app.json
Normal file
4
app.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"name": "convex_CRM",
|
||||||
|
"displayName": "convex CRM"
|
||||||
|
}
|
||||||
41
app/App.tsx
Normal file
41
app/App.tsx
Normal file
@ -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 },
|
||||||
|
});
|
||||||
182
app/features/addLead/addLead.screen.tsx
Normal file
182
app/features/addLead/addLead.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
77
app/features/addLead/addLead.styles.ts
Normal file
77
app/features/addLead/addLead.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/addLead/index.ts
Normal file
2
app/features/addLead/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './addLead.screen';
|
||||||
|
export * from './addLead.styles'
|
||||||
64
app/features/customers/customers.screen.tsx
Normal file
64
app/features/customers/customers.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
86
app/features/customers/customers.styles.ts
Normal file
86
app/features/customers/customers.styles.ts
Normal file
@ -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,
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/customers/index.ts
Normal file
2
app/features/customers/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './customers.screen';
|
||||||
|
export * from './customers.styles'
|
||||||
124
app/features/dashboard/dashboard.screen.tsx
Normal file
124
app/features/dashboard/dashboard.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
157
app/features/dashboard/dashboard.styles.ts
Normal file
157
app/features/dashboard/dashboard.styles.ts
Normal file
@ -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,
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/dashboard/index.ts
Normal file
2
app/features/dashboard/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './dashboard.screen';
|
||||||
|
export * from './dashboard.styles'
|
||||||
50
app/features/estimates/estimates.screen.tsx
Normal file
50
app/features/estimates/estimates.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
73
app/features/estimates/estimates.styles.ts
Normal file
73
app/features/estimates/estimates.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/estimates/index.ts
Normal file
2
app/features/estimates/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './estimates.screen';
|
||||||
|
export * from './estimates.styles'
|
||||||
2
app/features/invoices/index.ts
Normal file
2
app/features/invoices/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './invoices.screen';
|
||||||
|
export * from './invoices.styles';
|
||||||
50
app/features/invoices/invoices.screen.tsx
Normal file
50
app/features/invoices/invoices.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
73
app/features/invoices/invoices.styles.ts
Normal file
73
app/features/invoices/invoices.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/leads/index.ts
Normal file
2
app/features/leads/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './leads.screen';
|
||||||
|
export * from './leads.styles'
|
||||||
79
app/features/leads/leads.screen.tsx
Normal file
79
app/features/leads/leads.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
109
app/features/leads/leads.styles.ts
Normal file
109
app/features/leads/leads.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/login/index.ts
Normal file
2
app/features/login/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './login.screen';
|
||||||
|
export * from './login.styles'
|
||||||
173
app/features/login/login.screen.tsx
Normal file
173
app/features/login/login.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
128
app/features/login/login.styles.ts
Normal file
128
app/features/login/login.styles.ts
Normal file
@ -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,
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/profile/index.ts
Normal file
2
app/features/profile/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './profile.screen';
|
||||||
|
export * from './profile.styles';
|
||||||
119
app/features/profile/profile.screen.tsx
Normal file
119
app/features/profile/profile.screen.tsx
Normal file
@ -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 & 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
118
app/features/profile/profile.styles.ts
Normal file
118
app/features/profile/profile.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/projects/index.ts
Normal file
2
app/features/projects/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './projects.screen';
|
||||||
|
export * from './projects.styles';
|
||||||
62
app/features/projects/projects.screen.tsx
Normal file
62
app/features/projects/projects.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
90
app/features/projects/projects.styles.ts
Normal file
90
app/features/projects/projects.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/proposals/index.ts
Normal file
2
app/features/proposals/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './proposals.screen';
|
||||||
|
export * from './proposals.styles';
|
||||||
53
app/features/proposals/proposals.screen.tsx
Normal file
53
app/features/proposals/proposals.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
76
app/features/proposals/proposals.styles.ts
Normal file
76
app/features/proposals/proposals.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/tasks/index.ts
Normal file
2
app/features/tasks/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './tasks.screen';
|
||||||
|
export * from './tasks.styles';
|
||||||
50
app/features/tasks/tasks.screen.tsx
Normal file
50
app/features/tasks/tasks.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
65
app/features/tasks/tasks.styles.ts
Normal file
65
app/features/tasks/tasks.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
2
app/features/tickets/index.ts
Normal file
2
app/features/tickets/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './tickets.screen';
|
||||||
|
export * from './tickets.styles';
|
||||||
48
app/features/tickets/tickets.screen.tsx
Normal file
48
app/features/tickets/tickets.screen.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
64
app/features/tickets/tickets.styles.ts
Normal file
64
app/features/tickets/tickets.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
12
app/mock-data/customDraswe.ts
Normal file
12
app/mock-data/customDraswe.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
7
app/mock-data/customers.ts
Normal file
7
app/mock-data/customers.ts
Normal file
@ -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 },
|
||||||
|
];
|
||||||
6
app/mock-data/dashboard.ts
Normal file
6
app/mock-data/dashboard.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
5
app/mock-data/estimates.ts
Normal file
5
app/mock-data/estimates.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
5
app/mock-data/invoices.ts
Normal file
5
app/mock-data/invoices.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
7
app/mock-data/leads.ts
Normal file
7
app/mock-data/leads.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
5
app/mock-data/projects.ts
Normal file
5
app/mock-data/projects.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
5
app/mock-data/proposal.ts
Normal file
5
app/mock-data/proposal.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
5
app/mock-data/tasks.ts
Normal file
5
app/mock-data/tasks.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
5
app/mock-data/tickets.ts
Normal file
5
app/mock-data/tickets.ts
Normal file
@ -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' },
|
||||||
|
];
|
||||||
16
app/navigation/authStack.tsx
Normal file
16
app/navigation/authStack.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
90
app/navigation/customDrawerContent.style.ts
Normal file
90
app/navigation/customDrawerContent.style.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
103
app/navigation/customDrawerContent.tsx
Normal file
103
app/navigation/customDrawerContent.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
64
app/navigation/drawerStack.tsx
Normal file
64
app/navigation/drawerStack.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
23
app/navigation/rootNavigator.tsx
Normal file
23
app/navigation/rootNavigator.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
36
app/navigation/tabStack.styles.ts
Normal file
36
app/navigation/tabStack.styles.ts
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
});
|
||||||
80
app/navigation/tabStack.tsx
Normal file
80
app/navigation/tabStack.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
69
app/theme/ThemeContext.tsx
Normal file
69
app/theme/ThemeContext.tsx
Normal file
@ -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);
|
||||||
39
app/theme/colors.ts
Normal file
39
app/theme/colors.ts
Normal file
@ -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;
|
||||||
3
app/theme/index.ts
Normal file
3
app/theme/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export { colors } from './colors';
|
||||||
|
export { ThemeProvider, useTheme } from './ThemeContext';
|
||||||
|
export type { ThemeMode, ThemeColors } from './ThemeContext';
|
||||||
2
app/types/react-native-vector-icons.d.ts
vendored
Normal file
2
app/types/react-native-vector-icons.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
// Declaration for react-native-vector-icons/Ionicons module
|
||||||
|
declare module 'react-native-vector-icons/Ionicons';
|
||||||
0
app/utils/api.ts
Normal file
0
app/utils/api.ts
Normal file
BIN
app/utils/assets/background.png
Normal file
BIN
app/utils/assets/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
2
app/utils/assets/index.ts
Normal file
2
app/utils/assets/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export const backGroundImage = require('./background.png')
|
||||||
|
|
||||||
BIN
app/utils/assets/splashScreen.png
Normal file
BIN
app/utils/assets/splashScreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
39
app/utils/route.ts
Normal file
39
app/utils/route.ts
Normal file
@ -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;
|
||||||
|
};
|
||||||
|
|
||||||
6
babel.config.js
Normal file
6
babel.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: ['module:@react-native/babel-preset'],
|
||||||
|
plugins: ['react-native-worklets/plugin'],
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
5
index.js
Normal file
5
index.js
Normal file
@ -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);
|
||||||
11
ios/.xcode.env
Normal file
11
ios/.xcode.env
Normal file
@ -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)
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user