refactor: updated routing logic

frontend/sac-mobile/app/(app)/(tabs)/_layout.tsx

@@ -10,6 +10,14 @@ const HomeTabBarIcon = ({ color }: { color: string }) => (
     <MaterialCommunityIcons name="home" size={24} color={color} />
 );
 
+const ProfileTabBarIcon = ({ color }: { color: string }) => (
+    <MaterialCommunityIcons name="account" size={24} color={color} />
+);
+
+const SearchTabBarIcon = ({ color }: { color: string }) => (
+    <MaterialCommunityIcons name="magnify" size={24} color={color} />
+);
+
 const Layout = () => {
     const { isLoggedIn, fetchUser } = useAuthStore();
 
@@ -28,6 +36,16 @@ const Layout = () => {
                 }}
                 redirect={!isLoggedIn}
             />
+            <Tabs.Screen
+                name="search"
+                options={{ title: 'Search', headerShown: false, tabBarIcon: SearchTabBarIcon }}
+                redirect={!isLoggedIn}
+            />
+            <Tabs.Screen
+                name="profile"
+                options={{ title: 'Profile', headerShown: false, tabBarIcon: ProfileTabBarIcon }}
+                redirect={!isLoggedIn}
+            />
         </Tabs>
     );
 };

frontend/sac-mobile/app/(app)/(tabs)/index.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, FlatList } from 'react-native';
 
 import { Link } from 'expo-router';
 
-import { Button } from '@/components/button';
 import { useAuthStore } from '@/hooks/use-auth';
 import { useEvents } from '@/hooks/use-event';
+import { Event } from '@/types/event';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Club } from '@/types/club';
+import { clubs } from '@/data/clubs';
 
 const Home = () => {
-    const { signOut, user } = useAuthStore();
+    const { user } = useAuthStore();
     const { data: events, isLoading, error } = useEvents();
 
-    const handleSignOut = async () => {
-        signOut();
-    };
-
     if (isLoading) {
         return <Text>Loading...</Text>;
     }
@@ -23,25 +22,48 @@ const Home = () => {
         return <Text>Error: {error.message}</Text>;
     }
 
+    const renderEvent = ({ item: event }: { item: Event }) => (
+        <Link
+            className='mt-10 mr-3'
+            key={event.id}
+            href={{
+                pathname: '/(app)/event/[id]',
+                params: { id: event.id }
+            }}
+        >
+            <Text>{event.name}</Text>
+        </Link>
+    );
+
+    const renderClub = ({ item: club }: { item: Club }) => (
+        <Link
+            className='mt-10 mr-3'
+            key={club.id}
+            href={{
+                pathname: '/(app)/club/[id]',
+                params: { id: club.id }
+            }}
+        >
+            <Text>{club.name}</Text>
+        </Link>
+    );
+
     return (
-        <View className="items-center justify-center flex-1 gap-5">
+        <SafeAreaView className='flex items-center justify-center flex-1'>
             <Text>Welcome {user?.first_name}</Text>
-            <Button onPress={handleSignOut}>Sign Out</Button>
-            {/* <Link href={"/(app)/(tabs)/event"}>
-                <Text>Event</Text>
-            </Link> */}
-            {events?.map((event) => (
-                <Link
-                    key={event.id}
-                    href={{
-                        pathname: '/(app)/event/[id]',
-                        params: { id: event.id }
-                    }}
-                >
-                    <Text>{event.name}</Text>
-                </Link>
-            ))}
-        </View>
+            <FlatList
+                numColumns={5}
+                data={events}
+                renderItem={renderEvent}
+                keyExtractor={(item) => item.id.toString()}
+            />
+            <FlatList
+                numColumns={5}
+                data={clubs}
+                renderItem={renderClub}
+                keyExtractor={(item) => item.id.toString()}
+            />
+        </SafeAreaView>
     );
 };
 

frontend/sac-mobile/app/(app)/(tabs)/profile.tsx

@@ -0,0 +1,20 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import { Button } from '@/components/button';
+import { useAuthStore } from '@/hooks/use-auth';
+
+const Profile = () => {
+    const { signOut } = useAuthStore();
+
+    const handleSignOut = async () => {
+        signOut();
+    };
+
+    return (
+        <View className='items-center justify-center flex-1 gap-5'>
+            <Button onPress={handleSignOut}>Sign Out</Button>
+        </View>
+    );
+}
+
+export default Profile;

frontend/sac-mobile/app/(app)/(tabs)/search.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+const Search = () => {
+    return (
+        <View>
+            <Text>Search</Text>
+        </View>
+    )
+}
+
+export default Search

frontend/sac-mobile/app/(app)/_layout.tsx

@@ -1,9 +1,113 @@
 import React from 'react';
 
 import { Stack } from 'expo-router';
+import { MenuView } from '@react-native-menu/menu';
+import { LeftArrow } from '@/components/left-arrow';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { View, Platform, StatusBar } from 'react-native';
 
 const Layout = () => {
-    return <Stack />;
+    return (
+        <Stack>
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen
+                name="event/[id]"
+                options={{
+                    animationTypeForReplace: 'push',
+                    animation: 'slide_from_right',
+                    headerShown: true,
+                    headerTitleStyle: {
+                        color: 'white'
+                    },
+                    headerBackground: () => (
+                        <View className="h-full bg-gray-600" />
+                    ),
+                    headerLeft: () => <LeftArrow />,
+                    headerRight: () => {
+                        return (
+                            <MenuView
+                                onPressAction={({ nativeEvent }) => {
+                                    console.warn(JSON.stringify(nativeEvent));
+                                }}
+                                actions={[
+                                    {
+                                        id: 'share',
+                                        title: 'Share Event',
+                                        image: Platform.select({
+                                            ios: 'square.and.arrow.up',
+                                            android: 'share-variant'
+                                        })
+                                    },
+                                    {
+                                        id: 'report',
+                                        title: 'Report Event',
+                                        image: Platform.select({
+                                            ios: 'person.crop.circle.badge.exclamationmark.fill',
+                                            android: 'person-circle-outline'
+                                        })
+                                    }
+                                ]}
+                            >
+                                <MaterialCommunityIcons
+                                    name="dots-vertical"
+                                    size={24}
+                                    color="white"
+                                />
+                            </MenuView>
+                        );
+                    }
+                }}
+            />
+            <Stack.Screen
+                name="club"
+                options={{
+                    animationTypeForReplace: 'push',
+                    animation: 'slide_from_right',
+                    headerShown: true,
+                    headerTitleStyle: {
+                        color: 'white'
+                    },
+                    headerBackground: () => (
+                        <View className="h-full bg-gray-600" />
+                    ),
+                    headerLeft: () => <LeftArrow />,
+                    headerRight: () => {
+                        return (
+                            <MenuView
+                                onPressAction={({ nativeEvent }) => {
+                                    console.warn(JSON.stringify(nativeEvent));
+                                }}
+                                actions={[
+                                    {
+                                        id: 'share',
+                                        title: 'Share Club',
+                                        image: Platform.select({
+                                            ios: 'square.and.arrow.up',
+                                            android: 'share-variant'
+                                        })
+                                    },
+                                    {
+                                        id: 'report',
+                                        title: 'Report Club',
+                                        image: Platform.select({
+                                            ios: 'person.crop.circle.badge.exclamationmark.fill',
+                                            android: 'person-circle-outline'
+                                        })
+                                    }
+                                ]}
+                            >
+                                <MaterialCommunityIcons
+                                    name="dots-vertical"
+                                    size={24}
+                                    color="white"
+                                />
+                            </MenuView>
+                        );
+                    }
+                }}
+            />
+        </Stack>
+    );
 };
 
 export default Layout;

frontend/sac-mobile/app/(app)/club/[id].tsx

@@ -0,0 +1,21 @@
+import { View, Text, SafeAreaView } from 'react-native'
+import React from 'react'
+import { Link, Stack, useLocalSearchParams } from 'expo-router';
+
+const ClubPage = () => {
+    const { id } = useLocalSearchParams<{ id: string }>();
+
+    return (
+        <SafeAreaView>
+            <Stack.Screen
+                options={{ title: `${id}` }}
+            />
+            <Text>ClubPage</Text>
+            <Link href={{ pathname: `/club/faq/${id}` }}>
+                <Text>FAQ</Text>
+            </Link>
+        </SafeAreaView>
+    )
+}
+
+export default ClubPage

frontend/sac-mobile/app/(app)/club/_layout.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import { Stack } from 'expo-router'
+
+const Layout = () => {
+    return (
+        <Stack>
+            <Stack.Screen name="[id]" options={{ headerShown: false }} />
+            <Stack.Screen name="faq/[id]" options={{ headerShown: false, presentation: 'modal' }} />
+
+        </Stack>
+    )
+}
+
+export default Layout

frontend/sac-mobile/app/(app)/club/faq/[id].tsx

@@ -0,0 +1,15 @@
+import { View, Text, SafeAreaView } from 'react-native'
+import React from 'react'
+import { useLocalSearchParams } from 'expo-router';
+
+const Faq = () => {
+    const { id } = useLocalSearchParams<{ id: string }>();
+
+    return (
+        <SafeAreaView className='items-center justify-center flex-1 bg-white'>
+            <Text>{id}</ Text>
+        </SafeAreaView>
+    )
+}
+
+export default Faq