Build optix dashboard is added

2026-07-22 14:22:50 +05:30
parent 07770393f0
commit dcb70de432
44 changed files with 1370 additions and 45 deletions
--- a/App.tsx
+++ b/App.tsx
@@ -1,45 +1,23 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import { NewAppScreen } from '@react-native/new-app-screen';
-import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
-import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
-
-function App() {
-  const isDarkMode = useColorScheme() === 'dark';
+import React from 'react';
+import { StatusBar, StyleSheet, View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import  HomeScreen from './src/screens/HomeScreen/homeScreen';
+import { COLORS } from './src/constants/color';

+export default function App() {
  return (
    <SafeAreaProvider>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
-    </SafeAreaProvider>
-  );
-}
-
-function AppContent() {
-  const safeAreaInsets = useSafeAreaInsets();
-
-  return (
      <View style={styles.container}>
-      <NewAppScreen
-        templateFileName="App.tsx"
-        safeAreaInsets={safeAreaInsets}
-      />
+        <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
+        <HomeScreen />
      </View>
+    </SafeAreaProvider>
  );
 }

 const styles = StyleSheet.create({
  container: {
    flex: 1,
+    backgroundColor: COLORS.background,
  },
 });
-
-export default App;
--- a/android/app/src/main/assets/fonts/AntDesign.ttf
+++ b/android/app/src/main/assets/fonts/AntDesign.ttf
--- a/android/app/src/main/assets/fonts/Entypo.ttf
+++ b/android/app/src/main/assets/fonts/Entypo.ttf
--- a/android/app/src/main/assets/fonts/EvilIcons.ttf
+++ b/android/app/src/main/assets/fonts/EvilIcons.ttf
--- a/android/app/src/main/assets/fonts/Feather.ttf
+++ b/android/app/src/main/assets/fonts/Feather.ttf
--- a/android/app/src/main/assets/fonts/FontAwesome.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome.ttf
--- a/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf
--- a/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf
--- a/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf
--- a/android/app/src/main/assets/fonts/FontAwesome6_Brands.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome6_Brands.ttf
--- a/android/app/src/main/assets/fonts/FontAwesome6_Regular.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome6_Regular.ttf
--- a/android/app/src/main/assets/fonts/FontAwesome6_Solid.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome6_Solid.ttf
--- a/android/app/src/main/assets/fonts/Fontisto.ttf
+++ b/android/app/src/main/assets/fonts/Fontisto.ttf
--- a/android/app/src/main/assets/fonts/Foundation.ttf
+++ b/android/app/src/main/assets/fonts/Foundation.ttf
--- a/android/app/src/main/assets/fonts/Ionicons.ttf
+++ b/android/app/src/main/assets/fonts/Ionicons.ttf
--- a/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf
+++ b/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf
--- a/android/app/src/main/assets/fonts/MaterialIcons.ttf
+++ b/android/app/src/main/assets/fonts/MaterialIcons.ttf
--- a/android/app/src/main/assets/fonts/Octicons.ttf
+++ b/android/app/src/main/assets/fonts/Octicons.ttf
--- a/android/app/src/main/assets/fonts/SimpleLineIcons.ttf
+++ b/android/app/src/main/assets/fonts/SimpleLineIcons.ttf
--- a/android/app/src/main/assets/fonts/Zocial.ttf
+++ b/android/app/src/main/assets/fonts/Zocial.ttf
--- a/android/link-assets-manifest.json
+++ b/android/link-assets-manifest.json
@@ -0,0 +1,81 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
+      "sha1": "4e77868439280fb434d4697c7b911271406c81f3"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
+      "sha1": "12b5670eb178138f77285d5f2c246d3cc5fa67d6"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
+      "sha1": "91d377ea3cf47490b256c2ed081704a7dabdae0c"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Feather.ttf",
+      "sha1": "e6604258b1ced5efd51360875d782fca65381d47"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
+      "sha1": "13b1eab65a983c7a73bc7997c479d66943f7c6cb"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
+      "sha1": "3fa2d67cef22da5c3f3eb5730c6afbd6fecf0372"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
+      "sha1": "7d849a3981a716e2ba4a84634bc57d0b8054a6a3"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
+      "sha1": "c1b9fae262f42868c075ac865a8ab34920e20a2c"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome6_Brands.ttf",
+      "sha1": "7ce89c71d5a51ac65b159c71422783dd86529c66"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome6_Regular.ttf",
+      "sha1": "775e2ecfc18d22b177274453d4c014ca6be63208"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome6_Solid.ttf",
+      "sha1": "2b8e11389d98122399667cf64941eb58497dc128"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
+      "sha1": "c090a3ec96a3f1bb9b615c2f3f204ce0dcdcdbc3"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
+      "sha1": "4b2bce6c792493a4a5716b6fec2dbefe89492c3f"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
+      "sha1": "86e07c3d974eb09099e6e5a9b3b8310303cf0feb"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
+      "sha1": "4c2a838b00dbb5e8bb1b368fce0de534e8eb241c"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
+      "sha1": "7e02c3f005532ff4d24148567c84089756a7848a"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
+      "sha1": "56acefc0731f35ee23b195b1c8cb5fa94a0db97b"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
+      "sha1": "9ffb81a5a11112e292f2cc323e98486bad597599"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
+      "sha1": "6a48a962b06cc3acbdfd61df0d9a34744eea5e8d"
+    }
+  ]
+}
--- a/index.js
+++ b/index.js
@@ -1,7 +1,6 @@
 /**
 * @format
 */
-
 import { AppRegistry } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';
--- a/ios/BuildOptix.xcodeproj/project.pbxproj
+++ b/ios/BuildOptix.xcodeproj/project.pbxproj
@@ -11,6 +11,25 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		761780ED2CA45674006654EE /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 761780EC2CA45674006654EE /* AppDelegate.swift */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		35493C0C292A4CBAA1815B40 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C4AC39F9749C41118B88631E /* AntDesign.ttf */; };
+		BEB71CD7BFFF4F67A3396FAB /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B67EEA02C9A474EA015824B /* Entypo.ttf */; };
+		5A3DFD7BA7C64F35AF649AB4 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6D61E643BF6A49498E661F76 /* EvilIcons.ttf */; };
+		4B1521B5AB4047E29FA6E2F8 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 72B699129215411394AD1BDC /* Feather.ttf */; };
+		632F21CDE25A4F4FA3C9F0CC /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 65B2E6F9FBCC4CFA9D82F449 /* FontAwesome.ttf */; };
+		44FBB6B5F88749BC8210BB06 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0687A3E977FD4F4AB2111775 /* FontAwesome5_Brands.ttf */; };
+		BE4ED3ECF7914336ABE4D575 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6E03228D50094A769F1E5E5E /* FontAwesome5_Regular.ttf */; };
+		51A7AA073B004B15B0738891 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 64D8FB5DD07C4FB9AA3BBF0E /* FontAwesome5_Solid.ttf */; };
+		087243800FE1443DB93CEA52 /* FontAwesome6_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2D2521772E404891AF670589 /* FontAwesome6_Brands.ttf */; };
+		10D5C30D720844B98B4E9B0C /* FontAwesome6_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3489D48365394B67900DBD37 /* FontAwesome6_Regular.ttf */; };
+		6C9AD2C6525646AC86EA26B3 /* FontAwesome6_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = AD6A93783A254AD0ABAEEDA6 /* FontAwesome6_Solid.ttf */; };
+		539B9217E4794F15986DDB2D /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CC8CEE18284D459091B4B6D4 /* Fontisto.ttf */; };
+		5D6530BE81D94414A7C94588 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 12FFF95D326E46E3AA0DDBDE /* Foundation.ttf */; };
+		9AAC9E10277D4B8D8106FD27 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D05B2F649F2C4123A0D3D042 /* Ionicons.ttf */; };
+		AA36E243B9624DFF92DB2276 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C135756F31B449E3B692CB0F /* MaterialCommunityIcons.ttf */; };
+		2EF3ECEDF90E4000BF4F18B6 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F752F67E92644D9A83F5E30D /* MaterialIcons.ttf */; };
+		2931958586CC40E988CC9579 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 984AEAAEBFBC40BAAC34B6F5 /* Octicons.ttf */; };
+		4890F838D5A44F9299F9E45E /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4483EF4054B4492CA8F3A365 /* SimpleLineIcons.ttf */; };
+		13E1F0E14F1741EB9C497572 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F09C00F7ED9745A394C7B049 /* Zocial.ttf */; };
 /* End PBXBuildFile section */

 /* Begin PBXFileReference section */
@@ -24,6 +43,25 @@
 		761780EC2CA45674006654EE /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = BuildOptix/AppDelegate.swift; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = BuildOptix/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		C4AC39F9749C41118B88631E /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		1B67EEA02C9A474EA015824B /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		6D61E643BF6A49498E661F76 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		72B699129215411394AD1BDC /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		65B2E6F9FBCC4CFA9D82F449 /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		0687A3E977FD4F4AB2111775 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		6E03228D50094A769F1E5E5E /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		64D8FB5DD07C4FB9AA3BBF0E /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		2D2521772E404891AF670589 /* FontAwesome6_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome6_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome6_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		3489D48365394B67900DBD37 /* FontAwesome6_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome6_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome6_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		AD6A93783A254AD0ABAEEDA6 /* FontAwesome6_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome6_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome6_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		CC8CEE18284D459091B4B6D4 /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		12FFF95D326E46E3AA0DDBDE /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		D05B2F649F2C4123A0D3D042 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C135756F31B449E3B692CB0F /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		F752F67E92644D9A83F5E30D /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		984AEAAEBFBC40BAAC34B6F5 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		4483EF4054B4492CA8F3A365 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		F09C00F7ED9745A394C7B049 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -74,6 +112,7 @@
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
 				BBD78D7AC51CEA395F1C20DB /* Pods */,
+				E5220B1959FB4EB4B93C1E94 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -97,6 +136,33 @@
 			path = Pods;
 			sourceTree = "<group>";
 		};
+		E5220B1959FB4EB4B93C1E94 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				C4AC39F9749C41118B88631E /* AntDesign.ttf */,
+				1B67EEA02C9A474EA015824B /* Entypo.ttf */,
+				6D61E643BF6A49498E661F76 /* EvilIcons.ttf */,
+				72B699129215411394AD1BDC /* Feather.ttf */,
+				65B2E6F9FBCC4CFA9D82F449 /* FontAwesome.ttf */,
+				0687A3E977FD4F4AB2111775 /* FontAwesome5_Brands.ttf */,
+				6E03228D50094A769F1E5E5E /* FontAwesome5_Regular.ttf */,
+				64D8FB5DD07C4FB9AA3BBF0E /* FontAwesome5_Solid.ttf */,
+				2D2521772E404891AF670589 /* FontAwesome6_Brands.ttf */,
+				3489D48365394B67900DBD37 /* FontAwesome6_Regular.ttf */,
+				AD6A93783A254AD0ABAEEDA6 /* FontAwesome6_Solid.ttf */,
+				CC8CEE18284D459091B4B6D4 /* Fontisto.ttf */,
+				12FFF95D326E46E3AA0DDBDE /* Foundation.ttf */,
+				D05B2F649F2C4123A0D3D042 /* Ionicons.ttf */,
+				C135756F31B449E3B692CB0F /* MaterialCommunityIcons.ttf */,
+				F752F67E92644D9A83F5E30D /* MaterialIcons.ttf */,
+				984AEAAEBFBC40BAAC34B6F5 /* Octicons.ttf */,
+				4483EF4054B4492CA8F3A365 /* SimpleLineIcons.ttf */,
+				F09C00F7ED9745A394C7B049 /* Zocial.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */

 /* Begin PBXNativeTarget section */
@@ -159,6 +225,25 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				35493C0C292A4CBAA1815B40 /* AntDesign.ttf in Resources */,
+				BEB71CD7BFFF4F67A3396FAB /* Entypo.ttf in Resources */,
+				5A3DFD7BA7C64F35AF649AB4 /* EvilIcons.ttf in Resources */,
+				4B1521B5AB4047E29FA6E2F8 /* Feather.ttf in Resources */,
+				632F21CDE25A4F4FA3C9F0CC /* FontAwesome.ttf in Resources */,
+				44FBB6B5F88749BC8210BB06 /* FontAwesome5_Brands.ttf in Resources */,
+				BE4ED3ECF7914336ABE4D575 /* FontAwesome5_Regular.ttf in Resources */,
+				51A7AA073B004B15B0738891 /* FontAwesome5_Solid.ttf in Resources */,
+				087243800FE1443DB93CEA52 /* FontAwesome6_Brands.ttf in Resources */,
+				10D5C30D720844B98B4E9B0C /* FontAwesome6_Regular.ttf in Resources */,
+				6C9AD2C6525646AC86EA26B3 /* FontAwesome6_Solid.ttf in Resources */,
+				539B9217E4794F15986DDB2D /* Fontisto.ttf in Resources */,
+				5D6530BE81D94414A7C94588 /* Foundation.ttf in Resources */,
+				9AAC9E10277D4B8D8106FD27 /* Ionicons.ttf in Resources */,
+				AA36E243B9624DFF92DB2276 /* MaterialCommunityIcons.ttf in Resources */,
+				2EF3ECEDF90E4000BF4F18B6 /* MaterialIcons.ttf in Resources */,
+				2931958586CC40E988CC9579 /* Octicons.ttf in Resources */,
+				4890F838D5A44F9299F9E45E /* SimpleLineIcons.ttf in Resources */,
+				13E1F0E14F1741EB9C497572 /* Zocial.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
--- a/ios/BuildOptix/Info.plist
+++ b/ios/BuildOptix/Info.plist
@@ -28,14 +28,13 @@
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	  <!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -55,5 +54,27 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>FontAwesome6_Brands.ttf</string>
+		<string>FontAwesome6_Regular.ttf</string>
+		<string>FontAwesome6_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>
--- a/ios/link-assets-manifest.json
+++ b/ios/link-assets-manifest.json
@@ -0,0 +1,81 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
+      "sha1": "4e77868439280fb434d4697c7b911271406c81f3"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
+      "sha1": "12b5670eb178138f77285d5f2c246d3cc5fa67d6"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
+      "sha1": "91d377ea3cf47490b256c2ed081704a7dabdae0c"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Feather.ttf",
+      "sha1": "e6604258b1ced5efd51360875d782fca65381d47"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
+      "sha1": "13b1eab65a983c7a73bc7997c479d66943f7c6cb"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
+      "sha1": "3fa2d67cef22da5c3f3eb5730c6afbd6fecf0372"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
+      "sha1": "7d849a3981a716e2ba4a84634bc57d0b8054a6a3"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
+      "sha1": "c1b9fae262f42868c075ac865a8ab34920e20a2c"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome6_Brands.ttf",
+      "sha1": "7ce89c71d5a51ac65b159c71422783dd86529c66"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome6_Regular.ttf",
+      "sha1": "775e2ecfc18d22b177274453d4c014ca6be63208"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/FontAwesome6_Solid.ttf",
+      "sha1": "2b8e11389d98122399667cf64941eb58497dc128"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
+      "sha1": "c090a3ec96a3f1bb9b615c2f3f204ce0dcdcdbc3"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
+      "sha1": "4b2bce6c792493a4a5716b6fec2dbefe89492c3f"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
+      "sha1": "86e07c3d974eb09099e6e5a9b3b8310303cf0feb"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
+      "sha1": "4c2a838b00dbb5e8bb1b368fce0de534e8eb241c"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
+      "sha1": "7e02c3f005532ff4d24148567c84089756a7848a"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
+      "sha1": "56acefc0731f35ee23b195b1c8cb5fa94a0db97b"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
+      "sha1": "9ffb81a5a11112e292f2cc323e98486bad597599"
+    },
+    {
+      "path": "node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
+      "sha1": "6a48a962b06cc3acbdfd61df0d9a34744eea5e8d"
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
        "@react-native/new-app-screen": "0.86.0",
        "react": "19.2.3",
        "react-native": "0.86.0",
-        "react-native-safe-area-context": "^5.5.2"
+        "react-native-safe-area-context": "^5.8.0",
+        "react-native-svg": "^15.15.5",
+        "react-native-vector-icons": "^10.3.0"
      },
      "devDependencies": {
        "@babel/core": "^7.25.2",
@@ -26,6 +28,7 @@
        "@react-native/typescript-config": "0.86.0",
        "@types/jest": "^29.5.13",
        "@types/react": "^19.2.0",
+        "@types/react-native-vector-icons": "^6.4.18",
        "@types/react-test-renderer": "^19.1.0",
        "eslint": "^8.19.0",
        "jest": "^29.6.3",
@@ -3501,6 +3504,27 @@
        "csstype": "^3.2.2"
      }
    },
+    "node_modules/@types/react-native": {
+      "version": "0.70.19",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
+      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-native-vector-icons": {
+      "version": "6.4.18",
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
+      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-native": "^0.70"
+      }
+    },
    "node_modules/@types/react-test-renderer": {
      "version": "19.1.0",
      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-19.1.0.tgz",
@@ -4459,6 +4483,12 @@
      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
    "node_modules/brace-expansion": {
      "version": "5.0.7",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
@@ -5049,6 +5079,47 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
    "node_modules/csstype": {
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -5277,6 +5348,61 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -5332,6 +5458,18 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
    "node_modules/env-paths": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -8780,6 +8918,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
    "node_modules/media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -9402,6 +9546,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
    "node_modules/nullthrows": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -9424,7 +9580,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -9954,7 +10109,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.4.0",
@@ -9966,7 +10120,6 @@
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/punycode": {
@@ -10183,6 +10336,75 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-svg": {
+      "version": "15.15.5",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.15.5.tgz",
+      "integrity": "sha512-L4go5jA+GWutdJ/JucuN20cjAbMg1HmMtAP+wZ+3JLCf6Jd0bhXQHxciRP/AQm/FlrIEZwkMcHNZP+FXAiic0w==",
+      "license": "MIT",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.3.0.tgz",
+      "integrity": "sha512-IFQ0RE57819hOUdFvgK4FowM5aMXg7C7XKsuGLevqXkkIJatc3QopN0wYrb2IrzUgmdpfP+QVIbI3S6h7M0btw==",
+      "deprecated": "react-native-vector-icons package has moved to a new model of per-icon-family packages. See the https://github.com/oblador/react-native-vector-icons/blob/master/MIGRATION.md on how to migrate",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.2.tgz",
+      "integrity": "sha512-Nt9ZJjXTv5R8MHbqby/wXQ6Gi0Bb3TcYZkR1bzuL4yB2OxWPkXknz513gEF0GoA6tn00UpbPvERW8rzCuWCA6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/react-native/node_modules/commander": {
      "version": "12.1.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -10,10 +10,12 @@
    "test": "jest"
  },
  "dependencies": {
+    "@react-native/new-app-screen": "0.86.0",
    "react": "19.2.3",
    "react-native": "0.86.0",
-    "@react-native/new-app-screen": "0.86.0",
-    "react-native-safe-area-context": "^5.5.2"
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-svg": "^15.15.5",
+    "react-native-vector-icons": "^10.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
@@ -28,6 +30,7 @@
    "@react-native/typescript-config": "0.86.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.2.0",
+    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-test-renderer": "^19.1.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
--- a/react-native.config.js
+++ b/react-native.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  assets: ['./node_modules/react-native-vector-icons/Fonts'],
+};
--- a/src/components/actionGrid.tsx
+++ b/src/components/actionGrid.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { styles } from '../styles/ActionGridStyles';
+import { actions } from '../constants/data';
+
+
+
+export default function ActionGrid() {
+  return (
+    <View style={styles.grid}>
+      {actions.map((action) => (
+        <TouchableOpacity key={action.id} style={styles.button}>
+
+          <Ionicons
+            name={action.icon}
+            size={28}
+            color={action.color}
+          />
+
+          <Text style={styles.text}>
+            {action.label}
+          </Text>
+
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { COLORS } from '../constants/color';
+  import { HeaderProps } from '../types/type';
+  import { styles } from '../styles/HeaderStyles';
+
+
+
+export default function Header({
+  userName,
+  locationName,
+  badgeCount = 0,
+}: HeaderProps) {
+  return (
+    <View style={styles.container}>
+
+      <View>
+
+        <Text style={styles.greeting}>
+          Good morning, {userName}
+        </Text>
+
+        <TouchableOpacity style={styles.locationContainer}>
+          <Text style={styles.location}>
+            {locationName}
+          </Text>
+
+          <Ionicons
+            name="chevron-down"
+            size={20}
+            color={COLORS.textSecondary}
+          />
+        </TouchableOpacity>
+
+      </View>
+
+      <TouchableOpacity style={styles.notificationBtn}>
+
+        <Ionicons
+          name="notifications-outline"
+          size={24}
+          color={COLORS.textPrimary}
+        />
+
+        {badgeCount > 0 && (
+          <View style={styles.badge}>
+            <Text style={styles.badgeText}>
+              {badgeCount}
+            </Text>
+          </View>
+        )}
+
+      </TouchableOpacity>
+
+    </View>
+  );
+}
--- a/src/components/siteHealthCard.tsx
+++ b/src/components/siteHealthCard.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { COLORS } from '../constants/color';
+import { styles } from '../styles/SiteHealthCardStyles';
+import Card from '../utils/card';
+
+export default function SiteHealthCard() {
+  return (
+    <Card style={styles.card}>
+
+      {/* Circle */}
+      <View style={styles.circleContainer}>
+
+        <Svg width={120} height={120} viewBox="0 0 100 100">
+
+          <Circle
+            cx="50"
+            cy="50"
+            r="40"
+            stroke={COLORS.cardBorder}
+            strokeWidth={8}
+            fill="none"
+          />
+
+          <Circle
+            cx="50"
+            cy="50"
+            r="40"
+            stroke={COLORS.green}
+            strokeWidth={8}
+            strokeDasharray="251"
+            strokeDashoffset="60"
+            strokeLinecap="round"
+            fill="none"
+          />
+
+        </Svg>
+
+        <Text style={styles.circleText}>
+          SITE HEALTH
+        </Text>
+
+      </View>
+
+      {/* Right Side Data */}
+      <View style={styles.details}>
+
+        <View style={styles.row}>
+          <Text style={styles.label}>Assets online</Text>
+          <Text style={styles.value}>
+            <Text style={styles.bold}>242</Text> / 251
+          </Text>
+        </View>
+
+        <View style={styles.row}>
+          <Text style={styles.label}>Active alarms</Text>
+          <Text style={[styles.value, { color: COLORS.red }]}>
+            3 critical
+          </Text>
+        </View>
+
+        <View style={styles.row}>
+          <Text style={styles.label}>Energy today</Text>
+          <Text style={styles.value}>
+            <Text style={styles.bold}>4,218</Text> kWh
+          </Text>
+        </View>
+
+        <View style={styles.row}>
+          <Text style={styles.label}>vs yesterday</Text>
+          <Text style={[styles.value, { color: COLORS.green }]}>
+            -6.2%
+          </Text>
+        </View>
+
+      </View>
+
+    </Card>
+  );
+}
--- a/src/components/statCard.tsx
+++ b/src/components/statCard.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import { StatCardProps } from '../types/type';
+import Card from '../utils/card';
+import { styles } from '../styles/StatCardStyle';
+
+
+
+export default function StatCard({
+  title,
+  icon,
+  iconColor,
+  value,
+  subValue,
+  highlightValueColor,
+}: StatCardProps) {
+  return (
+    <Card style={{ flex: 1 }}>
+
+      <View style={styles.header}>
+        <Ionicons
+          name={icon}
+          size={20}
+          color={iconColor}
+        />
+
+        <Text
+          style={[
+            styles.title,
+            { color: iconColor }
+          ]}
+        >
+          {title}
+        </Text>
+      </View>
+
+      <View style={styles.valueContainer}>
+
+        <Text
+          style={[
+            styles.value,
+            highlightValueColor && { color: highlightValueColor },
+          ]}
+        >
+          {value}
+        </Text>
+
+        {subValue ? (
+          <Text style={styles.subValue}>
+            {subValue}
+          </Text>
+        ) : null}
+
+      </View>
+
+    </Card>
+  );
+}
--- a/src/constants/color.ts
+++ b/src/constants/color.ts
@@ -0,0 +1,18 @@
+export const COLORS = {
+  background: '#0B131F',
+  cardBg: '#152132',
+  cardBorder: '#1F2E45',
+  textPrimary: '#FFFFFF',
+  textSecondary: '#8A9BB4',
+  
+  // Accents
+  green: '#00E676',
+  red: '#FF4D4D',
+  orange: '#FF9800',
+  cyan: '#00E5FF',
+  yellow: '#FFD600',
+  
+  // Tab Bar
+  tabActive: '#FF9800',
+  tabInactive: '#60728B',
+};
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -0,0 +1,57 @@
+import { COLORS } from "./color";
+
+export const actions = [
+  {
+    id: 1,
+    label: 'Scan',
+    icon: 'scan-outline',
+    color: COLORS.orange,
+  },
+  {
+    id: 2,
+    label: 'Optix AI',
+    icon: 'sparkles-outline',
+    color: COLORS.orange,
+  },
+  {
+    id: 3,
+    label: 'Check In',
+    icon: 'log-in-outline',
+    color: COLORS.cyan,
+  },
+  {
+    id: 4,
+    label: 'Air',
+    icon: 'pulse-outline',
+    color: COLORS.cyan,
+  },
+];
+
+export const cards = [
+  {
+    title: "Critical Alarms",
+    value: "3",
+    color: "#FF4C4C",
+    icon: "warning-outline",
+  },
+  {
+    title: "Energy Today",
+    value: "4,218",
+    unit: "kWh",
+    color: "#F6A52D",
+    icon: "flash-outline",
+  },
+  {
+    title: "Equipment Online",
+    value: "242 / 251",
+    color: "#34E27A",
+    icon: "cube-outline",
+  },
+  {
+    title: "Air Quality",
+    value: "78",
+    unit: "AQI",
+    color: "#47C3FF",
+    icon: "pulse-outline",
+  },
+];
--- a/src/navigation/bottonTabBar.tsx
+++ b/src/navigation/bottonTabBar.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import { styles } from '../styles/BottontabStyle';
+import { COLORS } from '../constants/color';
+
+export default function BottomTabBar() {
+  return (
+    <View style={styles.container}>
+
+      {/* Home */}
+      <TouchableOpacity style={styles.tab}>
+        <Ionicons name="home" size={22} color={COLORS.tabActive} />
+        <Text style={[styles.label, { color: COLORS.tabActive }]}>
+          Home
+        </Text>
+      </TouchableOpacity>
+
+      {/* Assets */}
+      <TouchableOpacity style={styles.tab}>
+        <Ionicons name="cube-outline" size={22} color={COLORS.tabInactive} />
+        <Text style={styles.label}>
+          Assets
+        </Text>
+      </TouchableOpacity>
+
+      {/* Scan Button */}
+      <View style={styles.scanContainer}>
+        <TouchableOpacity style={styles.scanButton}>
+          <Ionicons name="scan" size={28} color="#000" />
+        </TouchableOpacity>
+
+        <Text style={[styles.label, { color: COLORS.tabActive }]}>
+          Scan
+        </Text>
+      </View>
+
+      {/* Alarms */}
+      <TouchableOpacity style={styles.tab}>
+        <Ionicons
+          name="notifications-outline"
+          size={22}
+          color={COLORS.tabInactive}
+        />
+        <Text style={styles.label}>
+          Alarms
+        </Text>
+      </TouchableOpacity>
+
+      {/* More */}
+      <TouchableOpacity style={styles.tab}>
+        <Ionicons
+          name="ellipsis-horizontal"
+          size={22}
+          color={COLORS.tabInactive}
+        />
+        <Text style={styles.label}>
+          More
+        </Text>
+      </TouchableOpacity>
+
+    </View>
+  );
+}
--- a/src/screens/HomeScreen/homeScreen.tsx
+++ b/src/screens/HomeScreen/homeScreen.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView,Text  } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import { cards } from '../../constants/data';
+import { COLORS } from '../../constants/color';
+import  Header from '../../components/header';
+import  SiteHealthCard  from '../../components/siteHealthCard';
+import  ActionGrid  from '../../components/actionGrid';
+import  StatCard  from '../../components/statCard';
+import  BottomTabBar  from '../../navigation/bottonTabBar';
+import Card from '../../utils/card';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+export default function HomeScreen()  {
+  return (
+    <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
+      
+      {/* 2. Main container needs flex: 1 */}
+      <View style={{ flex: 1, backgroundColor: COLORS.background }}>
+        <ScrollView contentContainerStyle={styles.scrollContent}>
+          {/* Your content */}
+        <Header
+            userName="Arjun"
+            locationName="Godrej One — Vikhroli"
+            badgeCount={3}
+          />
+          <SiteHealthCard/>
+          <ActionGrid/>
+         
+<View style={styles.gridRow}>
+  {cards.slice(2, 4).map((card) => (
+    <StatCard
+      key={card.title}
+      title={card.title.toUpperCase()}
+      icon={card.icon}
+      iconColor={card.color}
+      value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value}
+      subValue={
+        card.unit
+          ? card.unit
+          : card.value.includes('/')
+          ? `/ ${card.value.split('/')[1].trim()}`
+          : undefined
+      }
+      highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined}
+    />
+  ))}
+</View>
+
+        <View style={styles.gridRow}>
+  {cards.slice(0, 2).map((card) => (
+    <StatCard
+      key={card.title}
+      title={card.title.toUpperCase()}
+      icon={card.icon}
+      iconColor={card.color}
+      value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value}
+      subValue={
+        card.unit
+          ? card.unit
+          : card.value.includes('/')
+          ? `/ ${card.value.split('/')[1].trim()}`
+          : undefined
+      }
+      highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined}
+    />
+  ))}
+</View>
+ <Card style={styles.card}>
+
+      <View style={styles.header}>
+
+        <Ionicons
+          name="sparkles-outline"
+          size={22}
+          color={COLORS.orange}
+        />
+
+        <Text style={styles.title}>
+          OPTIX AI RECOMMENDATION
+        </Text>
+
+      </View>
+
+      <Text style={styles.message}>
+        Chiller CH-02 running 14% below efficiency curve.
+        Shifting load to CH-01 saves ≈ ₹8,400/day.
+      </Text>
+
+    </Card>
+
+        </ScrollView>
+
+        <BottomTabBar />
+      
+        
+        
+      </View>
+  
+      </SafeAreaProvider>
+    
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.background,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 20,
+  },
+  gridRow: {
+    
+    flexDirection: 'row',
+    flexGrow:1,
+    
+    marginBottom: 8,
+    gap:10
+  },
+  card: {
+
+    borderColor: COLORS.orange,
+
+    marginHorizontal: 10,
+
+    marginTop: 10,
+
+    marginBottom: 20,
+  },
+
+  header: {
+    flexDirection: 'row',
+
+    alignItems: 'center',
+
+    marginBottom: 10,
+  },
+
+  title: {
+    color: COLORS.orange,
+
+    fontSize: 18,
+
+    fontWeight: 'bold',
+
+    marginLeft: 8,
+  },
+
+  message: {
+    color: COLORS.textPrimary,
+
+    fontSize: 16,
+
+    lineHeight: 24,
+
+    marginLeft: 20,
+  },
+});
--- a/src/styles/ActionGridStyles.ts
+++ b/src/styles/ActionGridStyles.ts
@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../constants/color';
+
+export const styles = StyleSheet.create({
+
+  grid: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+  },
+
+  button: {
+    flex: 1,
+    backgroundColor: COLORS.cardBg,
+    borderRadius: 16,
+
+    paddingVertical: 18,
+
+    marginHorizontal: 5,
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  text: {
+    color: COLORS.textPrimary,
+
+    fontSize: 14,
+
+    fontWeight: '600',
+
+    marginTop: 8,
+  },
+
+});
--- a/src/styles/BottontabStyle.ts
+++ b/src/styles/BottontabStyle.ts
@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../constants/color';
+
+export const styles = StyleSheet.create({
+
+  container: {
+    flexDirection: 'row',
+
+    justifyContent: 'space-around',
+
+    alignItems: 'flex-end',
+
+    backgroundColor: COLORS.background,
+
+    borderTopWidth: 1,
+
+    borderTopColor: COLORS.cardBorder,
+
+    paddingVertical: 10,
+  },
+
+  tab: {
+    flex: 1,
+
+    alignItems: 'center',
+  },
+
+  label: {
+    color: COLORS.tabInactive,
+
+    fontSize: 12,
+
+    marginTop: 4,
+  },
+
+  scanContainer: {
+    alignItems: 'center',
+
+    marginTop: -20,
+  },
+
+  scanButton: {
+    width: 60,
+
+    height: 60,
+
+    borderRadius: 30,
+
+    backgroundColor: COLORS.orange,
+
+    justifyContent: 'center',
+
+    alignItems: 'center',
+
+    elevation: 6,
+  },
+
+});
--- a/src/styles/HeaderStyles.ts
+++ b/src/styles/HeaderStyles.ts
@@ -0,0 +1,66 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../constants/color';
+
+export const styles = StyleSheet.create({
+
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+
+    paddingTop: 25,      // space above
+    paddingHorizontal: 10,
+
+    marginBottom: 25,
+  },
+
+  greeting: {
+    color: COLORS.textSecondary,
+    fontSize: 16,
+    marginBottom: 8,
+  },
+
+  locationContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  location: {
+    color: COLORS.textPrimary,
+    fontSize: 26,
+    fontWeight: 'bold',
+    marginRight: 6,
+  },
+
+  notificationBtn: {
+    width: 48,
+    height: 48,
+    borderRadius: 15,
+    backgroundColor: COLORS.cardBg,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  badge: {
+    position: 'absolute',
+    top: -3,
+    right: -3,
+
+    backgroundColor: COLORS.red,
+
+    borderRadius: 10,
+
+    width: 20,
+    height: 20,
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  badgeText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+
+});
--- a/src/styles/SiteHealthCardStyles.ts
+++ b/src/styles/SiteHealthCardStyles.ts
@@ -0,0 +1,68 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../constants/color';
+
+export const styles = StyleSheet.create({
+
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom:20
+  },
+
+  circleContainer: {
+    justifyContent: 'center',
+
+    alignItems: 'center',
+
+    marginRight: 20,
+
+    position: 'relative',
+  },
+
+  circleText: {
+    position: 'absolute',
+
+    color: COLORS.textSecondary,
+
+    fontSize: 10,
+
+    fontWeight: 'bold',
+
+    textAlign: 'center',
+
+    width: 70,
+  },
+
+  details: {
+    flex: 1,
+  },
+
+  row: {
+    flexDirection: 'row',
+
+    justifyContent: 'space-between',
+
+    alignItems: 'center',
+
+    marginBottom: 12,
+  },
+
+  label: {
+    color: COLORS.textSecondary,
+
+    fontSize: 14,
+  },
+
+  value: {
+    color: COLORS.textPrimary,
+
+    fontSize: 15,
+  },
+
+  bold: {
+    fontSize: 18,
+
+    fontWeight: 'bold',
+  },
+
+});
--- a/src/styles/StatCardStyle.ts
+++ b/src/styles/StatCardStyle.ts
@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../constants/color';
+
+export const styles = StyleSheet.create({
+
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  title: {
+    fontSize: 12,
+    fontWeight: 'bold',
+
+    marginLeft: 6,
+  },
+
+  valueContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+
+    marginTop: 12,
+  },
+
+  value: {
+    color: COLORS.textPrimary,
+
+    fontSize: 30,
+
+    fontWeight: 'bold',
+  },
+
+  subValue: {
+    color: COLORS.textSecondary,
+
+    fontSize: 14,
+
+    marginLeft: 6,
+    marginBottom: 4,
+  },
+
+});
--- a/src/styles/cardStyle.ts
+++ b/src/styles/cardStyle.ts
@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../constants/color';
+
+export const styles = StyleSheet.create({
+
+  card: {
+    backgroundColor: COLORS.cardBg,
+
+    borderRadius: 18,
+
+    borderWidth: 1,
+
+    borderColor: COLORS.cardBorder,
+
+    padding: 16,
+    
+  },
+
+});
--- a/src/types/type.ts
+++ b/src/types/type.ts
@@ -0,0 +1,18 @@
+export interface HeaderProps {
+  userName: string;
+  locationName: string;
+  badgeCount?: number;
+}
+
+export interface StatCardProps {
+  title: string;
+  icon: string;
+  iconColor: string;
+  value: string;
+  subValue?: string;
+  highlightValueColor?: string;
+}
+export interface CardProps {
+  children: React.ReactNode;
+  style?: object;
+}
--- a/src/utils/card.tsx
+++ b/src/utils/card.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { styles } from '../styles/cardStyle';
+import { CardProps } from '../types/type';
+
+
+
+export default function Card({ children, style }: CardProps) {
+  return (
+    <View style={[styles.card, style]}>
+      {children}
+    </View>
+  );
+}