wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reasourcing home

Browse Source
This commit is contained in:
Bagasbanuna02
2025-06-25 14:57:05 +08:00
parent 4835d51f35
commit 33bee642a0
21 changed files with 549 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/(application)/(tabs)/_layout.tsx Normal file
View File

@@ -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>
</>
);
}

10
app/(application)/(tabs)/forum/_layout.tsx Normal file
View File

@@ -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>
</>
}

9
app/(application)/(tabs)/forum/index.tsx Normal file
View File

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

22
app/(application)/(tabs)/index.tsx Normal file
View File

@@ -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 />
</>
);
}

0
app/(application)/katalog/index.tsx → app/(application)/(tabs)/katalog.tsx
View File

9
app/(application)/(tabs)/maps.tsx Normal file
View File

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

47
app/(application)/_layout.tsx
View File

@@ -1,28 +1,41 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { Entypo } from "@expo/vector-icons";
import { Tabs } from "expo-router";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons";
import { Stack } from "expo-router";
export default function ApplicationLayout() {
return (
<>
<Tabs>
<Tabs.Screen name="index" options={{ href: null }} />
<Tabs.Screen
name="home/index"
<Stack
screenOptions={{
headerStyle: { backgroundColor: MainColor.darkblue },
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",
tabBarIcon: () => <Entypo name="home" size={24} color="black" />,
headerShown: false,
// title: "iii",
// headerLeft: () => (
// <Ionicons name="search" size={20} color={MainColor.white} />
// ),
// headerRight: () => (
// <Ionicons name="notifications" size={20} color={MainColor.white} />
// ),
}}
/>
<Tabs.Screen
name="katalog/index"
options={{
title: "Katalog",
tabBarIcon: () => <Entypo name="book" size={24} color="black" />,
}}
/>
</Tabs>
{/* <Stack.Screen name="forum/index" options={{ title: "Forum", }} /> */}
</Stack>
</>
);
}

9
app/(application)/home.tsx Normal file
View File

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

19
app/(application)/home/index.tsx
View File

@@ -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>
);
}

28
app/(application)/index.tsx
View File

@@ -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>
);
}

55
app/_layout.tsx
View File

@@ -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>
<Stack.Screen name="index" 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.Screen name="(application)/home/index" options={{ title: "Home" }} />
<Stack.Screen name="(application)/(katalog)/index" options={{ title: "Katalog" }} /> */}
</Stack>
<SafeAreaProvider
style={{
backgroundColor: MainColor.darkblue,
}}
>
<Stack
screenOptions={{
headerStyle: { backgroundColor: MainColor.darkblue },
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>
);
}

5
app/index.tsx
View File

@@ -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={{

5
app/register.tsx
View File

@@ -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

BIN
assets/images/constants/home-hipmi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

5
bun.lock
View File

@@ -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=="],

132
components/Home/HomeView.tsx Normal file
View File

@@ -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>
</>
);
}

129
components/Home/homeViewStyle.tsx Normal file
View File

@@ -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",
},
});

73
components/_ShareComponent/TruncatedText.tsx Normal file
View File

@@ -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;

6
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -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"

7
constants/global-styles.ts
View File

@@ -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%",

1
package.json
View File

@@ -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",