reasourcing home

app/(application)/(tabs)/_layout.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+//app/(application)/(tabs)/_layout.tsx
+import { MainColor } from "@/constants/color-palet";
+import { Entypo, Ionicons } from "@expo/vector-icons";
+import { router, Tabs } from "expo-router";
+
+export default function TabsLayout() {
+
+  return (
+    <>
+      <Tabs
+        screenOptions={{
+          headerTitleAlign: "center",
+          tabBarStyle: {
+            backgroundColor: MainColor.darkblue,
+          },
+          tabBarActiveTintColor: MainColor.white,
+        }}
+      >
+        <Tabs.Screen name="index" options={{ href: null }} />
+        <Tabs.Screen
+          name="forum"
+          options={{
+            title: "Forum",
+            tabBarIcon: () => (
+              <Entypo name="chat" size={20} color={MainColor.white} />
+            ),
+            headerLeft: () => (
+              <Ionicons name="arrow-back" onPress={() => {router.back()}} size={20} color={MainColor.white} />
+            ),
+          }}
+        />
+
+        <Tabs.Screen
+          name="katalog"
+          options={{
+            title: "Katalog",
+            tabBarIcon: () => (
+              <Entypo name="book" size={20} color={MainColor.white} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="maps"
+          options={{
+            title: "Maps",
+            tabBarIcon: () => (
+              <Entypo name="map" size={20} color={MainColor.white} />
+            ),
+          }}
+        />
+      </Tabs>
+    </>
+  );
+}

app/(application)/(tabs)/forum/_layout.tsx

@@ -0,0 +1,10 @@
+//app/(application)/(tabs)/forum/_layout.tsx
+import { Stack } from "expo-router";
+
+export default function ForumLayout() {
+  return<>
+  <Stack>
+    <Stack.Screen name="index" options={{ headerShown: false,  }} />
+  </Stack>
+  </>
+}

app/(application)/(tabs)/forum/index.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function Forum() {
+  return (
+    <View>
+      <Text>Tabs Forum</Text>
+    </View>
+  );
+}

app/(application)/(tabs)/index.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import HomeView from "@/components/Home/HomeView";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { Stack, useNavigation, useRouter } from "expo-router";
+import { useEffect } from "react";
+
+export default function Tabs() {
+  // const router = useRouter();
+  // const navigation = useNavigation();
+  // useEffect(() => {
+  //   navigation.setOptions({
+
+  //   });
+  // }, [navigation]);
+
+  return (
+    <>
+      <HomeView />
+    </>
+  );
+}

app/(application)/(tabs)/maps.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function Maps() {
+    return (
+        <View>
+            <Text>Maps</Text>
+        </View>
+    );
+}

app/(application)/_layout.tsx

@@ -1,28 +1,41 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
-import { Entypo } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
+import { Stack } from "expo-router";
 
 export default function ApplicationLayout() {
   return (
     <>
-      <Tabs>
+      <Stack
-        <Tabs.Screen name="index" options={{ href: null }} />
+        screenOptions={{
-        <Tabs.Screen
+          headerStyle: { backgroundColor: MainColor.darkblue },
-          name="home/index"
+          headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+          headerTitleAlign: "center",
+          contentStyle: {
+            borderBottomColor: AccentColor.blue,
+            borderBottomWidth: 2,
+          },
+          headerLargeStyle: {
+            backgroundColor: MainColor.darkblue,
+          },
+          headerShadowVisible: false,
+        }}
+      >
+        <Stack.Screen
+          name="(tabs)"
           options={{
-            title: "Home",
+            headerShown:  false,
-            tabBarIcon: () => <Entypo name="home" size={24} color="black" />,
+            // title: "iii",
+            // headerLeft: () => (
+            //   <Ionicons name="search" size={20} color={MainColor.white} />
+            // ),
+            // headerRight: () => (
+            //   <Ionicons name="notifications" size={20} color={MainColor.white} />
+            // ),
           }}
         />
-        <Tabs.Screen
+        {/* <Stack.Screen name="forum/index"  options={{ title: "Forum",  }} /> */}
-          name="katalog/index"
+      </Stack>
-          options={{
-            title: "Katalog",
-            tabBarIcon: () => <Entypo name="book" size={24} color="black" />,
-          }}
-        />
-      </Tabs>
     </>
   );
 }

app/(application)/home.tsx

@@ -0,0 +1,9 @@
+import HomeView from "@/components/Home/HomeView";
+
+export default function Application() {
+  return (
+    <>
+     <HomeView />
+    </>
+  );
+}

app/(application)/home/index.tsx

@@ -1,19 +0,0 @@
-import { Text, View } from "react-native";
-import { useEffect } from "react";
-import { useNavigation } from "expo-router";
-
-export default function Home() {
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
-  return (
-    <View>
-      <Text>Home</Text>
-    </View>
-  );
-}

app/(application)/index.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { ImageBackground, ScrollView, Text, View } from "react-native";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { globalStyles } from "@/constants/global-styles";
-import Spacing from "@/components/_ShareComponent/Spacing";
-import { SafeAreaView } from "react-native-safe-area-context";
-
-export default function Application() {
-
-  return (
-    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-      <ImageBackground
-        source={require("../../assets/images/main-background.png")}
-        resizeMode="cover"
-        style={globalStyles.imageBackground}
-      >
-        <View style={globalStyles.container}>
-          {Array.from({ length: 20 }).map((_, index) => (
-            <View key={index}>
-              <Text style={globalStyles.authTitle}>Application {index}</Text>
-              <Spacing height={30} />
-            </View>
-          ))}
-        </View>
-      </ImageBackground>
-    </ScrollView>
-  );
-}

app/_layout.tsx

@@ -1,15 +1,52 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import Icon from "react-native-vector-icons/FontAwesome";
 
 export default function RootLayout() {
   return (
-    <Stack>
+    <SafeAreaProvider
-      <Stack.Screen name="index" options={{ headerShown: false }} />
+      style={{
-      <Stack.Screen name="verification" options={{ headerShown: false }} />
+        backgroundColor: MainColor.darkblue,
-      <Stack.Screen name="register" options={{ headerShown: false }} />
+      }}
-      <Stack.Screen name="(application)" options={{ headerShown: false }} />
+    >
-      {/* <Stack.Screen name="(application)/home/index" options={{ title: "Home" }} />
+      <Stack
-      <Stack.Screen name="(application)/(katalog)/index" options={{ title: "Katalog" }} /> */}
+        screenOptions={{
-      
+          headerStyle: { backgroundColor: MainColor.darkblue },
-    </Stack>  
+          headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+          headerTitleAlign: "center",
+          contentStyle: {
+            borderBottomColor: AccentColor.blue,
+            borderBottomWidth: 2,
+          },
+          // headerLargeStyle: {
+          //   backgroundColor: MainColor.darkblue,
+          // },
+          // headerShadowVisible: false,
+        }}
+      >
+        <Stack.Screen
+          name="index"
+          // options={{
+          //   title: "Login",
+          //   headerStyle: { backgroundColor: MainColor.darkblue },
+          //   headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+          //   headerTitleAlign: "center",
+          //   headerRight: () => (
+          //     <MaterialIcons name="rocket" size={20} color={MainColor.yellow} />
+          //   ),
+          //   headerLeft: () => (
+          //     <Icon name="rocket" size={20} color={MainColor.yellow} />
+          //   ),
+          // }}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen name="verification" options={{ headerShown: false }} />
+        <Stack.Screen name="register" options={{ headerShown: false }} />
+        <Stack.Screen name="(application)" options={{ headerShown: false }} />
+      </Stack>
+    </SafeAreaProvider>
   );
 }

app/index.tsx

@@ -1,12 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { globalStyles } from "@/constants/global-styles";
-import { useRouter } from "expo-router";
+import { Stack, useRouter } from "expo-router";
 import { useState } from "react";
 import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import { MaterialIcons } from "@expo/vector-icons";
 
 export default function Login() {
   const router = useRouter();
@@ -30,6 +32,7 @@ export default function Login() {
   }
 
   return (
+    
     <ViewWrapper>
       <View
         style={{

app/register.tsx

@@ -39,7 +39,10 @@ export default function Register() {
             backgroundColor={MainColor.yellow}
             textColor={MainColor.black}
             radius={10}
-            onPress={() => router.push("/(application)")}
+            onPress={() => (
+              console.log("Success register"),
+              router.push("/(application)/home")
+            )}
           />
           {/* <Spacing height={10} />
           <ButtonCustom

bun.lock

@@ -8,6 +8,7 @@
         "@react-navigation/bottom-tabs": "^7.3.10",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
+        "@types/react-native-vector-icons": "^6.4.18",
         "expo": "~53.0.12",
         "expo-blur": "~14.1.5",
         "expo-constants": "~17.1.6",
@@ -434,6 +435,10 @@
 
     "@types/react": ["@types/react@19.0.14", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-ixLZ7zG7j1fM0DijL9hDArwhwcCb4vqmePgwtV0GfnkHRSCUEv4LvzarcTdhoqgyMznUx/EhoTUv31CKZzkQlw=="],
 
+    "@types/react-native": ["@types/react-native@0.70.19", "", { "dependencies": { "@types/react": "*" } }, "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg=="],
+
+    "@types/react-native-vector-icons": ["@types/react-native-vector-icons@6.4.18", "", { "dependencies": { "@types/react": "*", "@types/react-native": "^0.70" } }, "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw=="],
+
     "@types/stack-utils": ["@types/stack-utils@2.0.3", "", {}, "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="],
 
     "@types/yargs": ["@types/yargs@17.0.33", "", { "dependencies": { "@types/yargs-parser": "*" } }, "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA=="],

components/Home/HomeView.tsx

@@ -0,0 +1,132 @@
+import Spacing from "@/components/_ShareComponent/Spacing";
+import { MainColor } from "@/constants/color-palet";
+import { globalStyles } from "@/constants/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { useNavigation } from "expo-router";
+import { useEffect } from "react";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+import DynamicTruncatedText from "../_ShareComponent/TruncatedText";
+import { stylesHome } from "./homeViewStyle";
+
+export default function HomeView() {
+  const navigation = useNavigation();
+  useEffect(() => {
+    navigation.setOptions({
+      title: "HIPMI",
+      headerLeft: () => (
+        <Ionicons name="search" size={20} color={MainColor.white} />
+      ),
+      headerRight: () => (
+        <Ionicons name="notifications" size={20} color={MainColor.white} />
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <>
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <View style={globalStyles.mainContainer}>
+          <Spacing height={20} />
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "#fff",
+              borderRadius: 10,
+            }}
+          >
+            <Image
+              source={require("@/assets/images/constants/home-hipmi.png")}
+              // placeholder={{ blurhash: "" }}
+              contentFit="cover"
+              transition={1000}
+              style={{
+                width: "100%",
+                height: 120,
+                borderRadius: 10,
+              }}
+            />
+          </View>
+
+          <Spacing height={10} />
+
+          {/* Grid Section */}
+          <View style={stylesHome.gridContainer}>
+            <TouchableOpacity style={stylesHome.gridItem}>
+              <Ionicons name="analytics" size={48} color="white" />
+              <Text style={stylesHome.gridLabel}>Event</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={stylesHome.gridItem}>
+              <Ionicons name="share" size={48} color="white" />
+              <Text style={stylesHome.gridLabel}>Collaboration</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={stylesHome.gridItem}>
+              <Ionicons name="cube" size={48} color="white" />
+              <Text style={stylesHome.gridLabel}>Voting</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={stylesHome.gridItem}>
+              <Ionicons name="heart" size={48} color="white" />
+              <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
+            </TouchableOpacity>
+          </View>
+
+          <Spacing height={10} />
+
+          {/* Job Vacancy Section */}
+          <View style={stylesHome.jobVacancyContainer}>
+            <View style={stylesHome.jobVacancyHeader}>
+              <Icon name="briefcase" size={24} color="white" />
+              <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
+            </View>
+
+            <View style={stylesHome.vacancyList}>
+              {/* Vacancy Item 1 */}
+              <View style={stylesHome.vacancyItem}>
+                {/* <Icon name="user" size={20} color="#FFD700" /> */}
+                <View style={stylesHome.vacancyDetails}>
+                  <DynamicTruncatedText
+                    text="Bagas_banuna"
+                    fontSize={14}
+                    fontFamily="System"
+                    style={stylesHome.vacancyName}
+                  />
+                  <Spacing height={5} />
+                  <DynamicTruncatedText
+                    text="Dicari perawat kucing"
+                    fontSize={12}
+                    fontFamily="System"
+                    style={stylesHome.vacancyDescription}
+                  />
+                </View>
+              </View>
+
+              {/* Vacancy Item 2 */}
+              <View style={stylesHome.vacancyItem}>
+                {/* <Icon name="user" size={20} color="#FFD700" /> */}
+                <View style={stylesHome.vacancyDetails}>
+                  <DynamicTruncatedText
+                    text="fibramarcell"
+                    fontSize={14}
+                    fontFamily="System"
+                    style={stylesHome.vacancyName}
+                  />
+                  <Spacing height={5} />
+                  <DynamicTruncatedText
+                    text="Di Butuhkan Seorang..."
+                    fontSize={12}
+                    fontFamily="System"
+                    style={stylesHome.vacancyDescription}
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+
+          <Spacing height={20} />
+        </View>
+      </ScrollView>
+    </>
+  );
+}

components/Home/homeViewStyle.tsx

@@ -0,0 +1,129 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { StyleSheet } from "react-native";
+
+export const stylesHome = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#001F3F", // Dark blue background
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 16,
+    backgroundColor: "#001F3F",
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: "#FFD700", // Gold color
+  },
+  notificationBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  badgeCount: {
+    backgroundColor: "#FFD700",
+    borderRadius: 10,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    marginLeft: 4,
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: "bold",
+    color: "#001F3F",
+  },
+  banner: {
+    width: "100%",
+    height: 200,
+    resizeMode: "cover",
+    marginVertical: 16,
+    borderRadius: 8,
+  },
+  gridContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+  },
+  gridItem: {
+    width: "46%",
+    height: "100%",
+    aspectRatio: 1,
+    backgroundColor: MainColor.darkblue,
+    borderRadius: 8,
+    padding: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 8,
+    borderWidth: 2,
+    borderColor: AccentColor.blue,
+  },
+  gridLabel: {
+    marginTop: 8,
+    color: "white",
+    fontWeight: "bold",
+  },
+  jobVacancyContainer: {
+    backgroundColor: MainColor.darkblue,
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 16,
+    borderWidth: 2,
+    borderColor: AccentColor.blue,
+  },
+  jobVacancyHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  jobVacancyTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "white",
+    marginLeft: 8,
+  },
+  vacancyList: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    // backgroundColor: "red",
+  },
+  vacancyItem: {
+    flex: 1,
+    backgroundColor: MainColor.darkblue,
+    borderRadius: 8,
+    padding: 15,
+    marginHorizontal: 5,
+    // borderWidth: 1,
+    // borderColor: AccentColor.blue,
+    // marginRight: 8,
+  },
+  vacancyDetails: {
+    marginLeft: 8,
+  },
+  vacancyName: {
+    fontSize: 14,
+    fontWeight: "bold",
+    color: "#FFD700",
+  },
+  vacancyDescription: {
+    fontSize: 12,
+    color: "white",
+  },
+  bottomNav: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    borderTopWidth: 1,
+    borderTopColor: "#333",
+    paddingVertical: 12,
+    backgroundColor: "#001F3F",
+  },
+  navItem: {
+    alignItems: "center",
+  },
+  navLabel: {
+    marginTop: 4,
+    color: "white",
+  },
+});

components/_ShareComponent/TruncatedText.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { StyleSheet, Text, TextStyle, View } from "react-native";
+
+interface DynamicTruncatedTextProps {
+  text: string;
+  fontSize?: number;
+  fontFamily?: TextStyle["fontFamily"];
+  style?: TextStyle;
+}
+
+const DynamicTruncatedText: React.FC<DynamicTruncatedTextProps> = ({
+  text,
+  fontSize = 14,
+  fontFamily,
+  style
+
+}) => {
+  const [truncated, setTruncated] = useState<string>(text);
+  const textRef = useRef<Text>(null);
+  const containerWidth = useRef<number>(0);
+
+  const handleLayout = (event: any) => {
+    const { width } = event.nativeEvent.layout;
+    containerWidth.current = width;
+    truncateText(width);
+  };
+
+  const truncateText = useCallback(
+    (width: number) => {
+      if (!text || !textRef.current || width <= 0) return;
+
+      textRef.current.measure((x, y, textWidth, height, pageX, pageY) => {
+        const avgCharWidth = fontSize * 0.5;
+        const maxChars = Math.floor(width / avgCharWidth);
+
+        if (text.length <= maxChars) {
+          setTruncated(text);
+        } else {
+          const truncatedText = text.substring(0, maxChars - 3) + "...";
+          setTruncated(truncatedText);
+        }
+      });
+    },
+    [text, fontSize]
+  );
+
+  useEffect(() => {
+    if (containerWidth.current > 0) {
+      truncateText(containerWidth.current);
+    }
+  }, [truncateText]);
+
+  return (
+    <View onLayout={handleLayout} style={styles.container}>
+      <Text
+        ref={textRef}
+        numberOfLines={1}
+        ellipsizeMode="clip"
+        style={{ fontSize, fontFamily, ...style }}
+      >
+        {truncated}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+});
+
+export default DynamicTruncatedText;

components/_ShareComponent/ViewWrapper.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { MainColor } from "@/constants/color-palet";
 import { globalStyles } from "@/constants/global-styles";
 import { ImageBackground, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -12,13 +13,14 @@ const ViewWrapper = ({ children }: ViewWrapperProps) => {
 
   return (
     <SafeAreaView
-      edges={["top", "bottom"]}
+      edges={[]}
       style={{
         flex: 1,
         // paddingTop: StatusBar.currentHeight,
       }}
+      
     >
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }} >
         <ImageBackground
           source={require("../../assets/images/main-background.png")}
           resizeMode="cover"

constants/global-styles.ts

@@ -7,6 +7,13 @@ export const globalStyles = StyleSheet.create({
     paddingInline: 30,
     paddingBlock: 20,
   },
+  mainContainer: {
+    flex: 1,
+    paddingInline: 25,
+    paddingBlock: 10,
+    backgroundColor: MainColor.darkblue,
+  },
+
   imageBackground: {
     height: "100%",
     width: "100%",

package.json

@@ -15,6 +15,7 @@
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
+    "@types/react-native-vector-icons": "^6.4.18",
     "expo": "~53.0.12",
     "expo-blur": "~14.1.5",
     "expo-constants": "~17.1.6",