penambahan folder screens, styles dan navigation

screens/Authentication/LoginView.tsx

@@ -0,0 +1,78 @@
+import { MainColor } from "@/constants/color-palet";
+import { Styles } from "@/styles/global-styles";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Text, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import ButtonCustom from "@/components/Button/ButtonCustom";
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+
+
+export default function LoginView() {
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [inputValue, setInputValue] = useState<string>("");
+
+  function handleInputValue(phoneNumber: string) {
+    setInputValue(phoneNumber);
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  function handleLogin() {
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    const fixNumber = callingCode + inputValue;
+    console.log(fixNumber);
+    router.push("/verification");
+  }
+
+  return (
+    <ViewWrapper withBackground>
+      <View style={Styles.authContainer}>
+        <View>
+          <View style={Styles.authContainerTitle}>
+            <Text style={Styles.authSubTitle}>WELCOME TO</Text>
+            <Spacing height={5} />
+            <Text style={Styles.authTitle}>HIPMI BADUNG APPS</Text>
+            <Spacing height={5} />
+          </View>
+          <Spacing height={50} />
+          <Text
+            style={{
+              position: "absolute",
+              bottom: 30,
+              right: 20,
+              fontSize: 10,
+              fontWeight: "thin",
+              fontStyle: "italic",
+              color: MainColor.white,
+            }}
+          >
+            powered by muku.id
+          </Text>
+        </View>
+
+        <PhoneInput
+          value={inputValue}
+          onChangePhoneNumber={handleInputValue}
+          selectedCountry={selectedCountry}
+          onChangeSelectedCountry={handleSelectedCountry}
+          defaultCountry="ID"
+          placeholder="Masukkan nomor"
+        />
+
+        <Spacing height={20} />
+
+        <ButtonCustom
+          title="Login"
+          backgroundColor={MainColor.yellow}
+          textColor={MainColor.black}
+          radius={10}
+          onPress={handleLogin}
+        />
+      </View>
+    </ViewWrapper>
+  );
+}

screens/Authentication/RegisterView.tsx

@@ -0,0 +1,62 @@
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import ButtonCustom from "@/components/Button/ButtonCustom";
+import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
+import { MainColor } from "@/constants/color-palet";
+import { Styles } from "@/styles/global-styles";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Text, View } from "react-native";
+
+
+export default function RegisterView() {
+  return (
+    <>
+      <ViewWrapper withBackground>
+        <View style={Styles.authContainer}>
+          <View>
+            <View style={Styles.authContainerTitle}>
+              <Text style={Styles.authTitle}>REGISTRASI</Text>
+              <Spacing />
+              <MaterialCommunityIcons
+                name="account"
+                size={100}
+                color={MainColor.yellow}
+              />
+              <Spacing />
+
+              <Text style={Styles.textLabel}>
+                Anda akan terdaftar dengan nomor
+              </Text>
+              <Text style={Styles.textLabel}>+6282xxxxxxxxx</Text>
+              <Spacing />
+            </View>
+            <TextInputCustom placeholder="Masukkan username" />
+
+            <ButtonCustom
+              title="Daftar"
+              backgroundColor={MainColor.yellow}
+              textColor={MainColor.black}
+              radius={10}
+              onPress={() => (
+                console.log("Success register"),
+                router.push("/(application)/(tabs)")
+              )}
+            />
+            <Spacing />
+            {/* <ButtonCustom
+            title="Home"
+            backgroundColor={MainColor.yellow}
+            textColor={MainColor.black}
+            radius={10}
+            onPress={() => {
+              console.log("Home clicked");
+              router.push("/(application)/home");
+            }}
+          /> */}
+          </View>
+        </View>
+      </ViewWrapper>
+    </>
+  );
+}

screens/Authentication/VerificationView.tsx

@@ -0,0 +1,61 @@
+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 { Styles } from "@/styles/global-styles";
+import { router } from "expo-router";
+import { Text, View } from "react-native";
+import { OtpInput } from "react-native-otp-entry";
+
+export default function VerificationView() {
+  return (
+    <>
+      <ViewWrapper withBackground>
+        <View style={Styles.authContainer}>
+          <View>
+            <View style={Styles.authContainerTitle}>
+              <Text style={Styles.authTitle}>Verifikasi KOde OTP</Text>
+              <Spacing height={30} />
+              <Text style={Styles.textLabel}>Masukan 4 digit kode otp</Text>
+              <Text style={Styles.textLabel}>
+                Yang di kirim ke +6282xxxxxxxxx
+              </Text>
+              <Spacing height={30} />
+              <OtpInput
+                numberOfDigits={4}
+                theme={{
+                  pinCodeContainerStyle: {
+                    backgroundColor: MainColor.login,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: MainColor.yellow,
+                    width: 60,
+                    height: 60,
+                  },
+                  containerStyle: {
+                    paddingLeft: 10,
+                    paddingRight: 10,
+                  },
+                }}
+              />
+              <Spacing height={30} />
+              <Text style={Styles.textLabel}>
+                Tidak menerima kode ?{" "}
+                <Text style={Styles.textLabel}>Kirim Ulang</Text>
+              </Text>
+            </View>
+            <Spacing height={30} />
+          </View>
+
+          <ButtonCustom
+            title="Verifikasi"
+            backgroundColor={MainColor.yellow}
+            textColor={MainColor.black}
+            radius={10}
+            onPress={() => router.push("/register")}
+          />
+        </View>
+      </ViewWrapper>
+    </>
+  );
+}

screens/Home/HomeView.tsx

@@ -0,0 +1,120 @@
+import Spacing from "@/components/_ShareComponent/Spacing";
+import { Styles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
+import { stylesHome } from "./homeViewStyle";
+
+export default function HomeView() {
+  return (
+    <>
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <View style={Styles.homeContainer}>
+          <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}
+              onPress={() => router.push("/(application)/event")}
+            >
+              <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>
+    </>
+  );
+}

screens/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",
+  },
+});