oneticket-sdk-vi 1.0.0

package/src/navigation/metro/HistoryStack.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import HistoryScreen from '../../screens/metro/HistoryScreen';
+import TicketDetailsScreen from '../../screens/metro/TicketDetailsScreen';
+
+const Stack = createNativeStackNavigator();
+
+
+export enum HistoryScreens {
+    History = "History",
+    TicketDetails = "TicketDetails",
+}
+
+export type HistoryScreenParams = {
+    [HistoryScreens.History]: undefined;
+    [HistoryScreens.TicketDetails]: { transaction_id: string; };
+}
+
+export type HistoryScreenProps<RouteName extends keyof HistoryScreenParams = HistoryScreens> = NativeStackScreenProps<HistoryScreenParams, RouteName>;
+export type HistoryStackNavigationProp<RouteName extends keyof HistoryScreenParams = HistoryScreens> = NativeStackNavigationProp<HistoryScreenParams, RouteName>;
+export type HistoryStackRouteProp<RouteName extends keyof HistoryScreenParams = HistoryScreens> = RouteProp<HistoryScreenParams, RouteName>;
+
+
+const HistoryStack = () => {
+    return (
+        <Stack.Navigator initialRouteName={HistoryScreens.History}>
+            <Stack.Screen name={HistoryScreens.History} options={{ headerShown: false }} component={HistoryScreen} />
+            <Stack.Screen name={HistoryScreens.TicketDetails} options={{ headerShown: false }} component={TicketDetailsScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default HistoryStack;

package/src/navigation/metro/IssueStack.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import IssuesScreen from '../../screens/metro/IssuesScreen';
+
+const Stack = createNativeStackNavigator();
+
+export enum IssueScreens {
+    Issues = "Issues",
+}
+
+export type IssueScreenParams = {
+    [IssueScreens.Issues]: undefined;
+}
+
+export type IssueScreenProps<RouteName extends keyof IssueScreenParams = IssueScreens> = NativeStackScreenProps<IssueScreenParams, RouteName>;
+export type IssueStackNavigationProp<RouteName extends keyof IssueScreenParams = IssueScreens> = NativeStackNavigationProp<IssueScreenParams, RouteName>;
+export type IssueStackRouteProp<RouteName extends keyof IssueScreenParams = IssueScreens> = RouteProp<IssueScreenParams, RouteName>;
+
+
+const IssueStack = () => {
+    return (
+        <Stack.Navigator initialRouteName={IssueScreens.Issues}>
+            <Stack.Screen name={IssueScreens.Issues} options={{ headerShown: false }} component={IssuesScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default IssueStack;

package/src/navigation/metro/MetroStack.tsx

@@ -0,0 +1,110 @@
+import { Platform } from 'react-native'
+import React, { useEffect, useState, useRef } from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { NavigatorScreenParams, RouteProp } from '@react-navigation/native';
+import ChooseTicketTypeScreen from '../../screens/metro/ChooseTicketTypeScreen';
+import BuyTicketScreen from '../../screens/metro/BuyTicket/BuyTicketScreen';
+import { GetMetroFaresApiResponse } from '../../services/apis/metro/fare/types';
+import MetroTabs, { MetroTabScreenParams } from './MetroTabs';
+import IssueDetailsScreen from '../../screens/metro/IssueDetailsScreen';
+import MetroSelectionScreen from '../../screens/metro/MetroSelectionScreen';
+import RaiseIssueScreen from '../../screens/metro/RaiseIssueScreen';
+import IssueChatScreen from '../../screens/metro/IssueChatScreen';
+import { useMutateCurrectCity } from '../../services/apis/city/hooks';
+import FullScreenLoader from '../../components/common/Loaders/FullScreenLoader';
+import ChooseStation from '../../screens/metro/ChooseStation/ChooseStation';
+import { ChooseStationProvider } from '../../screens/metro/ChooseStation/ChooseStationContext';
+// import ProfileStack, { ProfileScreenParams } from './ProfileStack';
+import RecentTransactions from '../../screens/metro/SelectStations/Components/RecentTransactions';
+import RecentTransactionScreen from '../../screens/metro/RecentTransactionScreen';
+import { consoleFunc } from '../../utils/consoleFunc';
+
+const Stack = createNativeStackNavigator();
+
+export enum MetroScreens {
+    MetroTabs = "MetroTabs",
+    MetroSelection = "MetroSelection",
+    ChooseTicketType = "ChooseTicketType",
+    BuyTicket = "BuyTicket",
+    IssueDetails = "IssueDetails",
+    RaiseIssue = "RaiseIssue",
+    IssueChat = "IssueChat",
+    ChooseStation = "ChooseStation",
+    // ProfileStack = "ProfileStack",
+    RecentTransactions = "RecentTransactions"
+}
+
+export type MetroScreenParams = {
+    [MetroScreens.MetroTabs]: NavigatorScreenParams<MetroTabScreenParams>,
+    [MetroScreens.MetroSelection]: undefined,
+    [MetroScreens.ChooseTicketType]: { startStation: string; destinationStation: string; cityCode: string; };
+    [MetroScreens.BuyTicket]: {
+        item: GetMetroFaresApiResponse["result"][number];
+        startStation: string;
+        destinationStation: string;
+        cityCode: string;
+        isSingleProvider: boolean;
+    };
+    [MetroScreens.IssueDetails]: { transaction_id: string; };
+    [MetroScreens.RaiseIssue]: {
+        transaction_id: string;
+        orders: {
+            startStation: string;
+            destinationStation: string;
+            transaction_id: string;
+        }[]
+    };
+    [MetroScreens.IssueChat]: { issueId: string; };
+    [MetroScreens.ChooseStation]: { type: "FROM" | "TO"; from?: string; selectedLineId?: string; to?: string };
+    // [MetroScreens.ProfileStack]: NavigatorScreenParams<ProfileScreenParams>
+    [MetroScreens.RecentTransactions]: { cityCode: string };
+}
+
+export type MetroScreenProps<RouteName extends keyof MetroScreenParams = MetroScreens> = NativeStackScreenProps<MetroScreenParams, RouteName>;
+export type MetroStackNavigationProp<RouteName extends keyof MetroScreenParams = MetroScreens> = NativeStackNavigationProp<MetroScreenParams, RouteName>;
+export type MetroStackRouteProp<RouteName extends keyof MetroScreenParams = MetroScreens> = RouteProp<MetroScreenParams, RouteName>;
+
+
+const MetroStack = () => {
+    const [isCityCodeAvilable, setIsCityCodeAvilable] = useState<null | boolean>(null);
+    const { mutateAsync: currectCity, isPending: currectCityLoading } = useMutateCurrectCity(
+        () => setIsCityCodeAvilable(true),
+        () => setIsCityCodeAvilable(false)
+    );
+
+    // Track if we've already attempted to get city code
+    const hasAttemptedCityCode = useRef(false);
+
+    // Show loading state only when location is loading and we don't have city code yet
+    const isLoading = (currectCityLoading) && isCityCodeAvilable === null;
+
+    // Determine the initial route based on city code availability
+    const initialRoute = isCityCodeAvilable === true ? MetroScreens.MetroTabs : MetroScreens.MetroSelection;
+
+    if (isLoading) {
+        return <FullScreenLoader />;
+    }
+
+    return (
+        <Stack.Navigator initialRouteName={initialRoute}>
+            <Stack.Screen name={MetroScreens.MetroTabs} options={{ headerShown: false }} component={MetroTabs} />
+            <Stack.Screen name={MetroScreens.MetroSelection} options={{ headerShown: false }} component={MetroSelectionScreen} />
+            <Stack.Screen name={MetroScreens.ChooseTicketType} options={{ headerShown: false }} component={ChooseTicketTypeScreen} />
+            <Stack.Screen name={MetroScreens.BuyTicket} options={{ headerShown: false }} component={BuyTicketScreen} />
+            <Stack.Screen name={MetroScreens.IssueDetails} options={{ headerShown: false }} component={IssueDetailsScreen} />
+            <Stack.Screen name={MetroScreens.RaiseIssue} options={{ headerShown: false }} component={RaiseIssueScreen} />
+            <Stack.Screen name={MetroScreens.IssueChat} options={{ headerShown: false }} component={IssueChatScreen} />
+            <Stack.Screen name={MetroScreens.ChooseStation} options={{ headerShown: false }}>
+                {() => (
+                    <ChooseStationProvider>
+                        <ChooseStation />
+                    </ChooseStationProvider>
+                )}
+            </Stack.Screen>
+            {/* <Stack.Screen name={MetroScreens.ProfileStack} options={{ headerShown: false }} component={ProfileStack} /> */}
+            <Stack.Screen name={MetroScreens.RecentTransactions} options={{ headerShown: false }} component={RecentTransactionScreen} />
+        </Stack.Navigator>
+    );
+};
+
+export default MetroStack;

package/src/navigation/metro/MetroTabs.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { NavigatorScreenParams, RouteProp } from '@react-navigation/native';
+import ProfileScreen from '../../screens/common/Profile/ProfileScreen';
+import { BottomTabNavigationProp, BottomTabScreenProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import HistoryIcon from '../../assets/icons/HistoryIcon';
+import UserIcon from '../../assets/icons/UserIcon';
+import HomeIcon from '../../assets/icons/HomeIcon';
+import HistoryStack from './HistoryStack';
+import MetroWithTabsStack, { MetroWithTabsScreenParams } from './MetroWithTabsStack';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { ms, mvs } from 'react-native-size-matters';
+import { useTheme } from '../../theme/ThemeProvider';
+
+const Tab = createBottomTabNavigator();
+
+export enum MetroTabScreens {
+    MetroWithTabsStack = "MetroWithTabsStack",
+    HistoryStack = "HistoryStack",
+    Profile = "Profile",
+    IssuesStack = "IssuesStack",
+}
+
+export type MetroTabScreenParams = {
+    [MetroTabScreens.MetroWithTabsStack]: NavigatorScreenParams<MetroWithTabsScreenParams>;
+    [MetroTabScreens.HistoryStack]: undefined;
+    [MetroTabScreens.Profile]: undefined;
+    [MetroTabScreens.IssuesStack]: undefined;
+}
+
+export type MetroTabScreenProps<RouteName extends keyof MetroTabScreenParams = MetroTabScreens> = BottomTabScreenProps<MetroTabScreenParams, RouteName>;
+export type MetroTabsNavigationProp<RouteName extends keyof MetroTabScreenParams = MetroTabScreens> = BottomTabNavigationProp<MetroTabScreenParams, RouteName>;
+export type MetroTabsRouteProp<RouteName extends keyof MetroTabScreenParams = MetroTabScreens> = RouteProp<MetroTabScreenParams, RouteName>;
+
+
+const MetroTabs = () => {
+    const { theme } = useTheme();
+    const getHomeTabIcon = (focused: boolean) => {
+        return (<HomeIcon size={ms(35)} color={focused ? theme.colors.primary[500] : "#71717a"} />)
+    }
+
+    const getHistoryTabIcon = (focused: boolean) => {
+        return (<HistoryIcon size={ms(28)} color={focused ? theme.colors.primary[500] : "#71717a"} />)
+    }
+
+    const getProfileTabIcon = (focused: boolean) => {
+        return (<UserIcon size={ms(25)} color={focused ? theme.colors.primary[500] : "#71717a"} />)
+    }
+    return (
+        <Tab.Navigator screenOptions={{ tabBarStyle: { height: mvs(60), paddingBottom: mvs(5), paddingTop: mvs(5), backgroundColor: theme.colors.background } }} initialRouteName={MetroTabScreens.MetroWithTabsStack}>
+            <Tab.Screen name={MetroTabScreens.MetroWithTabsStack} options={{
+                headerShown: false,
+                tabBarLabel: ({ focused }) => (
+                    <CustomText style={{
+                        lineHeight: ms(14),
+                        marginBottom: mvs(4),
+                        fontSize: ms(10),
+                        fontWeight: focused ? "600" : '400',
+                        color: focused ? theme.colors.primary[500] : "#71717a",
+                    }}>
+                        Home
+                    </CustomText>
+                ),
+                tabBarIcon: ({ focused }) => getHomeTabIcon(focused),
+            }} component={MetroWithTabsStack} />
+
+            <Tab.Screen name={MetroTabScreens.HistoryStack} options={{
+                headerShown: false, tabBarLabel: ({ focused }) => (
+                    <CustomText style={{
+                        lineHeight: ms(14),
+                        marginBottom: mvs(4),
+                        fontSize: ms(10),
+                        fontWeight: focused ? "600" : '400',
+                        color: focused ? theme.colors.primary[500] : "#71717a",
+                    }}>
+                        My Tickets
+                    </CustomText>
+                ),
+                tabBarIcon: ({ focused }) => getHistoryTabIcon(focused),
+            }} component={HistoryStack} />
+
+            <Tab.Screen name={MetroTabScreens.Profile} options={{
+                headerShown: false, tabBarLabel: ({ focused }) => (
+                    <CustomText style={{
+                        lineHeight: ms(14),
+                        marginBottom: mvs(4),
+                        fontSize: ms(10),
+                        fontWeight: focused ? "600" : '400',
+                        color: focused ? theme.colors.primary[500] : "#71717a",
+                    }}>
+                        Account
+                    </CustomText>
+                ),
+                tabBarIcon: ({ focused }) => getProfileTabIcon(focused),
+            }} component={ProfileScreen} />
+        </Tab.Navigator>
+    )
+}
+
+export default MetroTabs;

package/src/navigation/metro/MetroWithTabsStack.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import TicketDetailsScreen from '../../screens/metro/TicketDetailsScreen';
+import SelectStationsScreen from '../../screens/metro/SelectStations/SelectStations';
+// import SelectStationsScreen from '../../screens/metro/SelectStationsScreen';
+import { SelectedStationsProvider } from '../../screens/metro/SelectStations/SelectStationContext';
+
+const Stack = createNativeStackNavigator();
+
+export enum MetroWithTabsScreens {
+    SelectStations = "SelectStations",
+    TicketDetails = "TicketDetails"
+}
+
+export type MetroWithTabsScreenParams = {
+    [MetroWithTabsScreens.SelectStations]: { from?: string; to?: string; };
+    // [MetroWithTabsScreens.SelectStations]: undefined;
+    [MetroWithTabsScreens.TicketDetails]: { transaction_id: string; };
+}
+
+export type MetroWithTabsScreenProps<RouteName extends keyof MetroWithTabsScreenParams = MetroWithTabsScreens> = NativeStackScreenProps<MetroWithTabsScreenParams, RouteName>;
+export type MetroWithTabsStackNavigationProp<RouteName extends keyof MetroWithTabsScreenParams = MetroWithTabsScreens> = NativeStackNavigationProp<MetroWithTabsScreenParams, RouteName>;
+export type MetroWithTabsStackRouteProp<RouteName extends keyof MetroWithTabsScreenParams = MetroWithTabsScreens> = RouteProp<MetroWithTabsScreenParams, RouteName>;
+
+
+const MetroWithTabsStack = () => {
+    return (
+        <Stack.Navigator initialRouteName={MetroWithTabsScreens.SelectStations}>
+            <Stack.Screen name={MetroWithTabsScreens.SelectStations} options={{ headerShown: false }}>
+                {() => (
+                    <SelectedStationsProvider>
+                        <SelectStationsScreen />
+                    </SelectedStationsProvider>
+                )}
+            </Stack.Screen>
+            <Stack.Screen name={MetroWithTabsScreens.TicketDetails} options={{ headerShown: false }} component={TicketDetailsScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default MetroWithTabsStack;

package/src/navigation/metro/ProfileStack.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { createNativeStackNavigator, NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import MyAccountScreen from '../../screens/common/MyAccountScreen';
+import IssueStack from './IssueStack';
+import FaqScreen from '../../screens/common/Faq/FaqScreen';
+const Stack = createNativeStackNavigator();
+
+
+export enum ProfileScreens {
+    MyAccount = "MyAccount",
+    IssueScreen = "IssueScreen",
+    FaqScreen = "FaqScreen",
+}
+
+export type ProfileScreenParams = {
+    [ProfileScreens.MyAccount]: undefined;
+    [ProfileScreens.IssueScreen]: undefined;
+    [ProfileScreens.FaqScreen]: undefined;
+}
+
+export type ProfileScreenProps<RouteName extends keyof ProfileScreenParams = ProfileScreens> = NativeStackScreenProps<ProfileScreenParams, RouteName>;
+export type ProfileStackNavigationProp<RouteName extends keyof ProfileScreenParams = ProfileScreens> = NativeStackNavigationProp<ProfileScreenParams, RouteName>;
+export type ProfileStackRouteProp<RouteName extends keyof ProfileScreenParams = ProfileScreens> = RouteProp<ProfileScreenParams, RouteName>;
+
+
+const ProfileStack = () => {
+    return (
+        <Stack.Navigator initialRouteName={ProfileScreens.MyAccount}>
+            <Stack.Screen name={ProfileScreens.MyAccount} options={{ headerShown: false }} component={MyAccountScreen} />
+            <Stack.Screen name={ProfileScreens.IssueScreen} options={{ headerShown: false }} component={IssueStack} />
+            <Stack.Screen name={ProfileScreens.FaqScreen} options={{ headerShown: false }} component={FaqScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default ProfileStack;

package/src/screens/auth/DetailsScreen.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { ms, mvs } from 'react-native-size-matters';
+import { useMutateUpdateUser } from '../../services/apis/user/hooks';
+import { AuthScreens, AuthStackNavigationProp } from '../../navigation/AuthStack';
+import { useTheme } from '../../theme/ThemeProvider';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { Input } from '../../components/common/Input/Input';
+import { Button } from '../../components/common/Button/Button';
+
+export default function DetailsScreen() {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<AuthStackNavigationProp>();
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [nameError, setNameError] = useState('');
+
+    const { mutateAsync: updateUser, isPending: updateUserLoading } = useMutateUpdateUser(data => {
+        if (data.status === 'success') {
+            navigate(AuthScreens.Success, {
+                title: 'Congratulations',
+                message: 'Your account is ready to use.',
+                isSuccess: true,
+                // navigateTo: AuthScreens.TransportationSelection,
+            });
+        } else {
+            navigate(AuthScreens.Success, {
+                title: 'Oops!',
+                message: data.message || 'There was an error processing your details.',
+                buttonText: 'Try Again',
+                showButton: false,
+                isSuccess: false,
+                // navigateTo: AuthScreens.TransportationSelection,
+            });
+        }
+    });
+
+    const handleNext = () => {
+        let isValid = true;
+        setNameError('');
+
+        if (name.trim() === '') {
+            setNameError('Name is required.');
+            isValid = false;
+        }
+
+        if (isValid) {
+            updateUser({ name, email, gender: 'male' });
+        }
+    };
+
+    return (
+        <View style={{
+            flex: 1,
+            padding: ms(20),
+            backgroundColor: theme.colors.background,
+        }}>
+            <CustomText variant="heading2" style={{
+                textAlign: 'center',
+                marginVertical: mvs(30),
+            }}>
+                Your Details
+            </CustomText>
+
+            {/* Name input */}
+            <View style={{ marginBottom: mvs(16) }}>
+                <CustomText variant="labelMedium" style={{
+                    marginBottom: mvs(5),
+                    color: theme.colors.text,
+                }}>
+                    Name
+                </CustomText>
+                <Input
+                    variant="outlined"
+                    placeholder="Name"
+                    value={name}
+                    onChangeText={setName}
+                    error={nameError}
+                    inputStyle={{
+                        fontSize: ms(14),
+                    }}
+                />
+                {nameError && (
+                    <CustomText variant="caption" style={{
+                        color: theme.colors.error[500],
+                        marginTop: mvs(4),
+                    }}>
+                        {nameError}
+                    </CustomText>
+                )}
+            </View>
+
+            {/* Email input */}
+            <View style={{ marginBottom: mvs(20) }}>
+                <CustomText variant="labelMedium" style={{
+                    marginBottom: mvs(5),
+                    color: theme.colors.text,
+                }}>
+                    Email (Optional)
+                </CustomText>
+                <Input
+                    variant="outlined"
+                    placeholder="Email (Optional)"
+                    value={email}
+                    onChangeText={setEmail}
+                    keyboardType="email-address"
+                    inputStyle={{
+                        fontSize: ms(14),
+                    }}
+                />
+            </View>
+
+            {/* Next button */}
+            <Button
+                variant="primary"
+                size="lg"
+                onPress={handleNext}
+                loading={updateUserLoading}
+                disabled={updateUserLoading}
+                style={{
+                    marginTop: 'auto',
+                }}
+            >
+                Next
+            </Button>
+        </View>
+    );
+}

package/src/screens/auth/LogInScreen.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from 'react';
+import { View, Image, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useFetchLoggedInUser, useMutateLoginOtpSend } from '../../services/apis/auth/hooks';
+import { UnAuthScreens, UnAuthStackNavigationProp } from '../../navigation/UnAuthStack';
+import PhoneIcon from '../../assets/icons/PhoneIcon';
+import { useTheme } from '../../theme/ThemeProvider';
+import { CustomText } from '../../components/common/Text/CustomText';
+import { Input } from '../../components/common/Input/Input';
+import { Button } from '../../components/common/Button/Button';
+import { ms, mvs } from 'react-native-size-matters';
+import PoweredBy from '../../components/common/PoweredBy/PoweredBy';
+
+export default function LogInScreen() {
+    const { theme } = useTheme();
+    const { navigate } = useNavigation<UnAuthStackNavigationProp>();
+    const [mobile, setMobile] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+
+    const { mutateAsync: loginOtpSend, isPending: isLoading } = useMutateLoginOtpSend(data => {
+        if (data.status === 'success') {
+            navigate(UnAuthScreens.OTP, {
+                prevScreen: UnAuthScreens.LogIn,
+                moNumber: parseFloat(mobile) || 0
+            });
+        }
+    });
+
+    useEffect(() => {
+        setMobile('');
+        setErrorMessage('');
+    }, []);
+
+    const handleLogIn = () => {
+        if (mobile.length === 10 && /^\d+$/.test(mobile)) {
+            setErrorMessage('');
+            loginOtpSend({ moNumber: parseInt(mobile) });
+        } else {
+            setErrorMessage('Please enter a valid 10-digit mobile number');
+        }
+    };
+
+    return (
+        <>
+            <ScrollView
+                contentContainerStyle={{
+                    flexGrow: 1,
+                    backgroundColor: theme.colors.background,
+                    padding: ms(theme.spacing.l),
+                    justifyContent: 'center',
+                }}
+                keyboardShouldPersistTaps="handled"
+            >
+                <View style={{ flex: 1, justifyContent: 'space-between' }}>
+                    <View>
+                        {/* Logo Section */}
+                        {/* <View style={{ marginBottom: mvs(theme.spacing.m), alignItems: 'center' }}>
+                            <Image
+                                source={require("../../assets/images/poweredByLogo.png")}
+                                style={{ width: ms(160), height: mvs(80) }}
+                                resizeMode="contain"
+                            />
+                        </View> */}
+
+                        {/* Welcome Section */}
+                        <View style={{ alignItems: 'center', marginBottom: mvs(theme.spacing.xl) }}>
+                            <CustomText variant="heading1" style={{ color: theme.colors.primary[500] }}>
+                                Welcome Back
+                            </CustomText>
+                            <CustomText variant="body2" style={{ color: theme.colors.textSecondary }}>
+                                Login to continue to your account
+                            </CustomText>
+                        </View>
+
+                        {/* Input Section */}
+                        <View style={{ width: '100%', maxWidth: ms(350) }}>
+                            <Input
+                                variant="outlined"
+                                placeholder="Enter mobile number"
+                                keyboardType="phone-pad"
+                                maxLength={10}
+                                value={mobile}
+                                onFocus={() => setIsFocused(true)}
+                                onBlur={() => setIsFocused(false)}
+                                onChangeText={(text) => {
+                                    const numericText = text.replace(/[^0-9]/g, '');
+                                    setMobile(numericText);
+                                    if (numericText.length === 10) setErrorMessage('');
+                                }}
+                                leftIcon={<PhoneIcon size={ms(24)} color={isFocused ? theme.colors.primary[500] : theme.colors.textTertiary} />}
+                                leftAddon={
+                                    <View style={{
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        borderRightWidth: 1,
+                                        borderRightColor: theme.colors.border,
+                                        paddingRight: ms(theme.spacing.s),
+                                        marginRight: ms(theme.spacing.s),
+                                    }}>
+                                        <CustomText>+91</CustomText>
+                                    </View>
+                                }
+                                inputStyle={{ letterSpacing: 2 }}
+                            />
+
+                            {errorMessage && (
+                                <CustomText
+                                    variant="caption"
+                                    style={{
+                                        color: theme.colors.error[500],
+                                        marginBottom: mvs(theme.spacing.s)
+                                    }}
+                                >
+                                    {errorMessage}
+                                </CustomText>
+                            )}
+
+                            <Button
+                                variant="primary"
+                                size="lg"
+                                onPress={handleLogIn}
+                                loading={isLoading}
+                                disabled={isLoading}
+                                style={{ marginTop: mvs(theme.spacing.s) }}
+                            >
+                                Log In
+                            </Button>
+                        </View>
+
+                        {/* Sign Up Section */}
+                        <View style={{
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            // marginTop: theme.spacing.xl
+                        }}>
+                            <CustomText variant="body2" style={{ color: theme.colors.textSecondary }}>
+                                Don't have an account?
+                            </CustomText>
+                            <Button
+                                variant="text"
+                                onPress={() => navigate(UnAuthScreens.SignUp)}
+                                style={{ paddingHorizontal: ms(theme.spacing.s) }}
+                            >
+                                <CustomText variant="body2" style={{
+                                    color: theme.colors.primary[500],
+                                    fontWeight: 'bold'
+                                }}>
+                                    Sign Up
+                                </CustomText>
+                            </Button>
+                        </View>
+                    </View>
+
+                    {/* Footer Section */}
+                    <PoweredBy />
+                </View>
+            </ScrollView>
+            {/* <AppOpenAdComponent /> */}
+            {/* <MyInterstitialAd /> */}
+            {/* <BannerAdComponent /> */}
+        </>
+    );
+}