diff --git a/App.tsx b/App.tsx index 59b3ead..316c24d 100644 --- a/App.tsx +++ b/App.tsx @@ -12,13 +12,16 @@ import { useSafeAreaInsets, } from 'react-native-safe-area-context'; import AppNavigator from './src/navigation/AppNavigator'; +import { PaperProvider } from 'react-native-paper'; function App() { const isDarkMode = useColorScheme() === 'dark'; return ( - + + + ); } diff --git a/package-lock.json b/package-lock.json index d325043..82d8250 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "@react-native-vector-icons/ionicons": "^12.3.0", + "@react-native-vector-icons/material-icons": "^12.3.0", "@react-native/new-app-screen": "0.81.1", "@react-navigation/bottom-tabs": "^7.4.7", "@react-navigation/elements": "^2.6.4", @@ -21,8 +22,11 @@ "react": "19.1.0", "react-native": "0.81.1", "react-native-keychain": "^10.0.0", + "react-native-linear-gradient": "^2.8.3", + "react-native-paper": "^5.14.5", "react-native-safe-area-context": "^5.6.1", - "react-native-screens": "^4.16.0" + "react-native-screens": "^4.16.0", + "react-native-walkthrough-tooltip": "^1.6.0" }, "devDependencies": { "@babel/core": "^7.25.2", @@ -1994,6 +1998,28 @@ "dev": true, "license": "MIT" }, + "node_modules/@callstack/react-theme-provider": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz", + "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==", + "license": "MIT", + "dependencies": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz", + "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@egjs/hammerjs": { "version": "2.0.17", "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", @@ -3064,6 +3090,22 @@ "react-native": "*" } }, + "node_modules/@react-native-vector-icons/material-icons": { + "version": "12.3.0", + "resolved": "https://registry.npmjs.org/@react-native-vector-icons/material-icons/-/material-icons-12.3.0.tgz", + "integrity": "sha512-W9rhgfc8zKKXhZa/099un/RSNFgO6aHhJR2r6rodvTlO+ZRXq2GbU38CMBwhomJxyErcfmlR7En6wSdtLykYVQ==", + "license": "MIT", + "dependencies": { + "@react-native-vector-icons/common": "^12.3.0" + }, + "engines": { + "node": ">= 18.0.0" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/@react-native/assets-registry": { "version": "0.81.1", "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.1.tgz", @@ -3700,7 +3742,6 @@ "version": "19.1.12", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", - "devOptional": true, "license": "MIT", "dependencies": { "csstype": "^3.0.2" @@ -5310,7 +5351,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true, "license": "MIT" }, "node_modules/data-view-buffer": { @@ -7209,7 +7249,6 @@ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", "license": "BSD-3-Clause", - "peer": true, "dependencies": { "react-is": "^16.7.0" } @@ -7218,8 +7257,7 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/html-escaper": { "version": "2.0.2", @@ -12219,7 +12257,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" @@ -12769,7 +12806,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", @@ -12781,7 +12817,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/proxy-from-env": { @@ -12946,6 +12981,12 @@ } } }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==", + "license": "MIT" + }, "node_modules/react-freeze": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz", @@ -13060,6 +13101,61 @@ "node": ">=16" } }, + "node_modules/react-native-linear-gradient": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz", + "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==", + "license": "MIT", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-paper": { + "version": "5.14.5", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.14.5.tgz", + "integrity": "sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ==", + "license": "MIT", + "workspaces": [ + "example", + "docs" + ], + "dependencies": { + "@callstack/react-theme-provider": "^3.0.9", + "color": "^3.1.2", + "use-latest-callback": "^0.2.3" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-safe-area-context": "*" + } + }, + "node_modules/react-native-paper/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "license": "MIT", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, + "node_modules/react-native-paper/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "license": "MIT", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/react-native-paper/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "license": "MIT" + }, "node_modules/react-native-safe-area-context": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz", @@ -13085,6 +13181,19 @@ "react-native": "*" } }, + "node_modules/react-native-walkthrough-tooltip": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-native-walkthrough-tooltip/-/react-native-walkthrough-tooltip-1.6.0.tgz", + "integrity": "sha512-8DHpcqsF+2VULYnKJCSZtllhlFUFiZcWCwOlw5RLkS451ElxPWJn9ShOFVZtkPMcwQAirq3SovumVM7Y/li0Fw==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.6.1", + "react-fast-compare": "^2.0.4" + }, + "peerDependencies": { + "@types/react": ">=16.8.24" + } + }, "node_modules/react-native/node_modules/commander": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", diff --git a/package.json b/package.json index 658e6ae..d5eae8e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@react-native-vector-icons/ionicons": "^12.3.0", + "@react-native-vector-icons/material-icons": "^12.3.0", "@react-native/new-app-screen": "0.81.1", "@react-navigation/bottom-tabs": "^7.4.7", "@react-navigation/elements": "^2.6.4", @@ -23,8 +24,11 @@ "react": "19.1.0", "react-native": "0.81.1", "react-native-keychain": "^10.0.0", + "react-native-linear-gradient": "^2.8.3", + "react-native-paper": "^5.14.5", "react-native-safe-area-context": "^5.6.1", - "react-native-screens": "^4.16.0" + "react-native-screens": "^4.16.0", + "react-native-walkthrough-tooltip": "^1.6.0" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index 39a34ec..91dfc43 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -6,6 +6,7 @@ import LoginScreen from "../screens/LoginScreen"; import OtpVerificationScreen from "../screens/OtpVarificationScreen"; import BottomTabs from "./BottomTabs"; import SplashScreen from "../screens/SplashScreen"; +import OrganizerRegisterScreen from "../screens/OrgnizerRagister"; const Stack = createNativeStackNavigator(); export type RootStackParamList = { @@ -14,6 +15,7 @@ const Stack = createNativeStackNavigator(); Home:undefined HomeTabs:undefined splash: undefined + OrganizerRegister:undefined }; @@ -40,9 +42,10 @@ export default function AppNavigator() { return ( - + + diff --git a/src/navigation/BottomTabs.tsx b/src/navigation/BottomTabs.tsx index 0b3c21b..72810e9 100644 --- a/src/navigation/BottomTabs.tsx +++ b/src/navigation/BottomTabs.tsx @@ -1,31 +1,40 @@ import React from "react"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; -import { View, Text } from "react-native"; +import { View, Text, StyleSheet, Platform } from "react-native"; import { Ionicons } from '@react-native-vector-icons/ionicons'; +import GroupScreen from "../screens/GroupScreen"; const Tab = createBottomTabNavigator(); -// Dummy screens for now +const TAB_CONFIG = { + activeColor: "#eb87a3ff", // coffee-like orange + inactiveColor: "#000000ff", + backgroundColor: "#e3e9efff", + height: 80, + iconSize: 30, + labelSize: 12, + labelWeight: "600", +}; + +// Dummy Screens function HomeScreen() { return ( - - 🏠 Home + + 🏠 Home ); } - function ProfileScreen() { return ( - - 👤 Profile + + 👤 Profile ); } - function SettingsScreen() { return ( - - ⚙️ Settings + + ⚙️ Settings ); } @@ -35,24 +44,64 @@ export default function BottomTabs() { ({ headerShown: false, - tabBarShowLabel: true, - tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 }, - tabBarActiveTintColor: "#FF7A00", - tabBarInactiveTintColor: "gray", - tabBarIcon: ({ color, size }) => { + tabBarStyle: styles.tabBar, + tabBarActiveTintColor: TAB_CONFIG.activeColor, + tabBarInactiveTintColor: TAB_CONFIG.inactiveColor, + tabBarLabelStyle: { + fontSize: TAB_CONFIG.labelSize, + fontWeight: TAB_CONFIG.labelWeight as any, + marginBottom: Platform.OS === "ios" ? 0 : 5, + }, + tabBarIcon: ({ color, focused }) => { let iconName: string = "home-outline"; - if (route.name === "Home") iconName = "home-outline"; - else if (route.name === "Profile") iconName = "person-outline"; - else if (route.name === "Settings") iconName = "settings-outline"; + if (route.name === "Home") iconName = focused ? "home" : "home-outline"; + else if (route.name === "Profile") + iconName = focused ? "person" : "person-outline"; + else if (route.name === "Settings") + iconName = focused ? "settings" : "settings-outline"; + else if (route.name === "Group") + iconName = focused ? "people" : "people-outline"; - return ; + return ; }, })} > + ); } + +const styles = StyleSheet.create({ + screen: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#dae4ed", + }, + text: { + fontSize: 20, + fontWeight: "600", + color: "#111", + }, + tabBar: { + position: "absolute", + bottom: 0, + left: 0, + right: 0, + height: TAB_CONFIG.height, + backgroundColor: TAB_CONFIG.backgroundColor, + borderTopLeftRadius: 30, + borderTopRightRadius: 30, + shadowColor: "#000", + shadowOpacity: 0.10, + shadowOffset: { width: 0, height: -2 }, + shadowRadius: 8, + elevation: 20, + paddingTop:10, + borderTopWidth: 0, + }, +}); diff --git a/src/screens/GroupCreation.tsx b/src/screens/GroupCreation.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/GroupScreen.tsx b/src/screens/GroupScreen.tsx new file mode 100644 index 0000000..3c43e35 --- /dev/null +++ b/src/screens/GroupScreen.tsx @@ -0,0 +1,55 @@ +import React, { useState } from "react"; +import { View, Text, StyleSheet } from "react-native"; +import { FAB, Portal, Provider } from "react-native-paper"; +import Tooltip from "react-native-walkthrough-tooltip"; +import { MaterialIcons } from '@react-native-vector-icons/material-icons'; + +export default function GroupScreen() { + const [tooltipVisible, setTooltipVisible] = useState(false); + + return ( + + + Groups + + + } + onPress={() => setTooltipVisible(true)} + /> + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#dae4ed", + padding: 16, + }, + title: { + fontSize: 22, + fontWeight: "bold", + color: "#333", + }, + fab: { + position: "absolute", + right: 20, + bottom: 90, + width: 70, + height: 70, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#dae4ed", + borderRadius: 60, + }, + tooltipText: { + color: "#fff", + fontSize: 14, + fontWeight: "500", + }, +}); diff --git a/src/screens/OrgnizerRagister.tsx b/src/screens/OrgnizerRagister.tsx new file mode 100644 index 0000000..b9bf3c5 --- /dev/null +++ b/src/screens/OrgnizerRagister.tsx @@ -0,0 +1,149 @@ +import React, { useState } from "react"; +import { + View, + Text, + TextInput, + Pressable, + StyleSheet, + Alert, + KeyboardAvoidingView, + Platform, + ScrollView, +} from "react-native"; +import axios from "axios"; +import { ORGRAGISTRATION } from "../utils/ApiUrls"; +import * as Keychain from "react-native-keychain"; + +const theme = { + primary: "#111", + accent: "#FF7A00", + background: "#F9F9F9", + text: "#1A1A1A", + subText: "#6B6B6B", + outline: "#E5E5E5", +}; + +export default function OrganizerRegisterScreen() { + const [bankAccountNumber, setBankAccountNumber] = useState(""); + const [bankName, setBankName] = useState(""); + const [branchCode, setBranchCode] = useState(""); + const [loading, setLoading] = useState(false); +const handleSubmit = async () => { + if (!bankAccountNumber || !bankName || !branchCode) { + Alert.alert("Error", "All fields are required."); + return; + } + + try { + setLoading(true); + + // 🔑 get token from Keychain + const creds = await Keychain.getGenericPassword(); + const token = creds ? creds.password : null; + + if (!token) { + Alert.alert("Error", "No token found. Please log in again."); + setLoading(false); + return; + } + + const payload = { + bankAccountNumber, + bankName, + branchCode, + }; + + const res = await axios.post( + ORGRAGISTRATION, // your API endpoint + payload, + { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, // 👈 token added here + }, + } + ); + + console.log("✅ Organizer Registered:", res.data); + Alert.alert("Success", "Organizer registered successfully!"); + } catch (err: any) { + console.error("❌ Register Error:", err?.response?.data || err.message); + Alert.alert("Error", "Failed to register. Please try again."); + } finally { + setLoading(false); + } +}; + + + return ( + + + Organizer Registration 📝 + + + + + + + + + {loading ? "Submitting..." : "Submit"} + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flexGrow: 1, + justifyContent: "center", + padding: 20, + }, + title: { + fontSize: 22, + fontWeight: "700", + color: theme.text, + marginBottom: 20, + textAlign: "center", + }, + input: { + borderWidth: 1, + borderColor: theme.outline, + borderRadius: 12, + padding: 14, + marginBottom: 15, + fontSize: 16, + backgroundColor: "#fff", + }, + button: { + backgroundColor: theme.primary, + paddingVertical: 16, + borderRadius: 12, + alignItems: "center", + }, + buttonText: { + color: "#fff", + fontWeight: "600", + fontSize: 16, + }, +}); diff --git a/src/screens/OtpVarificationScreen.tsx b/src/screens/OtpVarificationScreen.tsx index 039ed90..921d3f8 100644 --- a/src/screens/OtpVarificationScreen.tsx +++ b/src/screens/OtpVarificationScreen.tsx @@ -85,7 +85,7 @@ export default function OtpVerificationScreen() { if (res.data.statusCode === 200) { saveToken(res.data.data); - navigation.navigate('Home') + navigation.navigate('HomeTabs') } } catch (err: any) { diff --git a/src/screens/SplashScreen.tsx b/src/screens/SplashScreen.tsx index 91d912b..1e4258e 100644 --- a/src/screens/SplashScreen.tsx +++ b/src/screens/SplashScreen.tsx @@ -1,14 +1,13 @@ -import React, { useEffect } from "react"; -import { View, Text, StyleSheet, ActivityIndicator } from "react-native"; +import React, { useEffect, useRef } from "react"; +import { View, Text, StyleSheet, ActivityIndicator, Animated } from "react-native"; import * as Keychain from "react-native-keychain"; import { StackNavigationProp } from "@react-navigation/stack"; import { useNavigation } from "@react-navigation/native"; import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path - - const SplashScreen = () => { - const navigation = useNavigation>(); + const navigation = useNavigation>(); + const fadeAnim = useRef(new Animated.Value(1)).current; // opacity starts at 1 useEffect(() => { const checkLogin = async () => { @@ -16,9 +15,9 @@ const SplashScreen = () => { const creds = await Keychain.getGenericPassword(); if (creds) { console.log("🔑 Found token:", creds.password); - navigation.replace("HomeTabs"); // go to bottom tabs if logged in + navigation.replace("HomeTabs"); } else { - navigation.replace("Login"); // go to login if not logged in + navigation.replace("Login"); } } catch (error) { console.error("Error checking login:", error); @@ -26,12 +25,22 @@ const SplashScreen = () => { } }; - setTimeout(checkLogin, 1500); // show splash for 1.5s - }, [navigation]); + // Start fade out animation + Animated.timing(fadeAnim, { + toValue: 0, + duration: 1500, // fade out in 1.5s + useNativeDriver: true, + delay: 1500, // wait before fading + }).start(() => { + checkLogin(); // only navigate after animation + }); + }, [navigation, fadeAnim]); return ( - Circle Collect + + Circle Collect + ); @@ -44,7 +53,7 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: "center", alignItems: "center", - backgroundColor: "#111111", + backgroundColor: "#FFFFFF", // white background }, title: { fontSize: 28, diff --git a/src/utils/ApiUrls.tsx b/src/utils/ApiUrls.tsx index a0458d4..c28ce26 100644 --- a/src/utils/ApiUrls.tsx +++ b/src/utils/ApiUrls.tsx @@ -1,2 +1,3 @@ export const LOGIN_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/generate/otp?mobile=" -export const VARIFY_OTP_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify" \ No newline at end of file +export const VARIFY_OTP_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify" +export const ORGRAGISTRATION = "https://exotic-humpback-mistakenly.ngrok-free.app/api/organizer/registration/apply " \ No newline at end of file