API Profile:

Fix:
- api create, get , edit

Types
Add:
- Type-Profile

### No Issue

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

@@ -10,28 +10,6 @@ export default function UserLayout() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
-        <Stack.Screen
-          name="home"
-          options={{
-            title: "HIPMI",
-            headerLeft: () => (
-              <Ionicons
-                name="search"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/user-search")}
-              />
-            ),
-            headerRight: () => (
-              <Ionicons
-                name="notifications"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/notifications")}
-              />
-            ),
-          }}
-        />
 
         <Stack.Screen
           name="waiting-room"

app/(application)/(user)/home.tsx

@@ -1,9 +1,78 @@
-import UiHome from "@/screens/Home/UiHome";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { StackCustom, ViewWrapper } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
+import Home_ImageSection from "@/screens/Home/imageSection";
+import TabSection from "@/screens/Home/tabSection";
+import { tabsHome } from "@/screens/Home/tabsList";
+import Home_FeatureSection from "@/screens/Home/topFeatureSection";
+import { apiUser } from "@/service/api-client/api-user";
+import { Ionicons } from "@expo/vector-icons";
+import { Redirect, router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
 
 export default function Application() {
+  const { user } = useAuth();
+  const [data, setData] = useState<any>({});
+
+  useEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    const response = await apiUser(user?.id as string);
+    setData(response.data);
+  }
+
+  if (data && data?.active === false) {
+    return <Redirect href={`/waiting-room`} />;
+  }
+
+  if (data && data?.Profile === null) {
+    return <Redirect href={`/profile/create`} />;
+  }
+
   return (
     <>
-      <UiHome />
+      <Stack.Screen
+        options={{
+          title: "HIPMI",
+          headerLeft: () => (
+            <Ionicons
+              name="search"
+              size={20}
+              color={MainColor.yellow}
+              onPress={() => {
+                router.push("/user-search");
+              }}
+            />
+          ),
+          headerRight: () => (
+            <Ionicons
+              name="notifications"
+              size={20}
+              color={MainColor.yellow}
+              onPress={() => {
+                router.push("/notifications");
+              }}
+            />
+          ),
+        }}
+      />
+      <ViewWrapper
+        footerComponent={
+          <TabSection tabs={tabsHome(data?.Profile?.id as string)} />
+        }
+      >
+        <StackCustom>
+          <Home_ImageSection />
+
+          <Home_FeatureSection />
+
+          <Home_BottomFeatureSection />
+        </StackCustom>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/profile/[id]/edit.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   ButtonCustom,
   SelectCustom,
@@ -7,46 +6,69 @@ import {
   ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
+import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
+import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { StyleSheet } from "react-native";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ProfileEdit() {
   const { id } = useLocalSearchParams();
 
-  const [data, setData] = useState({
-    nama: "Bagas Banuna",
-    email: "bagasbanuna@gmail.com",
-    alamat: "Jember",
-    selectedValue: "",
-  });
+  const [data, setData] = useState<IProfile | any>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const options = [
     { label: "Laki-laki", value: "laki-laki" },
     { label: "Perempuan", value: "perempuan" },
   ];
 
-  const handleSave = () => {
-    console.log({
-      nama: data.nama,
-      email: data.email,
-      alamat: data.alamat,
-      selectedValue: data.selectedValue,
-    });
-    router.back();
+  useEffect(() => {
+    onLoadData(id as string);
+  }, [id]);
+
+  async function onLoadData(id: string) {
+    try {
+      const response = await apiProfile({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("error get profile >>", error);
+    }
+  }
+
+  const handleUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiUpdateProfile({ id: id as string, data });
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Profile berhasil diupdate",
+      });
+      return router.back();
+    } catch (error) {
+      console.log("error update profile >>", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
     <ViewWrapper
       footerComponent={
         <BoxButtonOnFooter>
-          <ButtonCustom
-            // disabled={
-            //   !data.nama || !data.email || !data.alamat || !data.selectedValue
-            // }
-            onPress={handleSave}
-          >
-            Simpan
+          <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
+            Update
           </ButtonCustom>
         </BoxButtonOnFooter>
       }
@@ -55,16 +77,17 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Nama"
           placeholder="Nama"
-          value={data.nama}
+          value={data?.name}
           onChangeText={(text) => {
-            setData({ ...data, nama: text });
+            setData({ ...data, name: text });
           }}
           required
         />
         <TextInputCustom
+          keyboardType="email-address"
           label="Email"
           placeholder="Email"
-          value={data.email}
+          value={data?.email}
           onChangeText={(text) => {
             setData({ ...data, email: text });
           }}
@@ -73,7 +96,7 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Alamat"
           placeholder="Alamat"
-          value={data.alamat}
+          value={data?.alamat}
           onChangeText={(text) => {
             setData({ ...data, alamat: text });
           }}
@@ -84,25 +107,12 @@ export default function ProfileEdit() {
           label="Jenis Kelamin"
           placeholder="Pilih jenis kelamin"
           data={options}
-          value={data.selectedValue}
+          value={data?.jenisKelamin}
           onChange={(value) => {
-            setData({ ...(data as any), selectedValue: value });
+            setData({ ...(data as any), jenisKelamin: value });
           }}
         />
       </StackCustom>
     </ViewWrapper>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    padding: 20,
-  },
-  result: {
-    marginTop: 20,
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-});

app/(application)/(user)/profile/[id]/index.tsx

@@ -1,5 +1,4 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import AlertCustom from "@/components/Alert/AlertCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -7,18 +6,24 @@ import { useAuth } from "@/hooks/use-auth";
 import { drawerItemsProfile } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
 import ProfileSection from "@/screens/Profile/ProfileSection";
+import { apiProfile } from "@/service/api-client/api-profile";
 import { GStyles } from "@/styles/global-styles";
+import { IProfile } from "@/types/Type-Profile";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import React, { useState } from "react";
+import {
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams
+} from "expo-router";
+import React, { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
+  const [data, setData] = useState<IProfile>();
 
-  const { logout } = useAuth();
+  const { logout, isAdmin } = useAuth();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -28,60 +33,53 @@ export default function Profile() {
     setIsDrawerOpen(false);
   };
 
-  const handleLogout = () => {
-    console.log("User logout");
-    router.replace("/");
-    setShowLogoutAlert(false);
-  };
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    const response = await apiProfile({ id: id });
+    setData(response.data);
+  }
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: "Profile",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => (
+            <TouchableOpacity onPress={openDrawer}>
+              <Ionicons
+                name="ellipsis-vertical"
+                size={20}
+                color={MainColor.yellow}
+              />
+            </TouchableOpacity>
+          ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
       <ViewWrapper>
         {/* Header */}
-        <Stack.Screen
-          options={{
-            title: "Profile",
-            headerLeft: () => <LeftButtonCustom />,
-            headerRight: () => (
-              <TouchableOpacity onPress={openDrawer}>
-                <Ionicons
-                  name="ellipsis-vertical"
-                  size={20}
-                  color={MainColor.yellow}
-                />
-              </TouchableOpacity>
-            ),
-            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: GStyles.headerTitleStyle,
-          }}
-        />
-        <ProfileSection />
+        <ProfileSection data={data as any} />
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={isDrawerOpen}
         closeDrawer={closeDrawer}
       >
         <Profile_MenuDrawerSection
-          drawerItems={drawerItemsProfile({ id: id as string })}
-          setShowLogoutAlert={setShowLogoutAlert}
+          drawerItems={drawerItemsProfile({ id: id as string, isAdmin })}
           setIsDrawerOpen={setIsDrawerOpen}
           logout={logout}
         />
       </DrawerCustom>
-
-      {/* Alert Komponen Eksternal */}
-      <AlertCustom
-        isVisible={showLogoutAlert}
-        onLeftPress={() => setShowLogoutAlert(false)}
-        onRightPress={handleLogout}
-        title="Apakah anda yakin ingin keluar?"
-        textLeft="Batal"
-        textRight="Keluar"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/profile/_layout.tsx

@@ -11,22 +11,27 @@ export default function ProfileLayout() {
           headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           headerBackButtonDisplayMode: "minimal",
-          headerLeft: () => <BackButton />,
         }}
       >
         {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}
-        <Stack.Screen name="[id]/edit" options={{ title: "Edit Profile" }} />
+        <Stack.Screen
+          name="[id]/edit"
+          options={{ title: "Edit Profile", headerLeft: () => <BackButton /> }}
+        />
         <Stack.Screen
           name="[id]/update-photo"
-          options={{ title: "Update Foto" }}
+          options={{ title: "Update Foto", headerLeft: () => <BackButton /> }}
         />
         <Stack.Screen
           name="[id]/update-background"
-          options={{ title: "Update Latar Belakang" }}
+          options={{
+            title: "Update Latar Belakang",
+            headerLeft: () => <BackButton />,
+          }}
         />
         <Stack.Screen
-          name="[id]/create"
-          options={{ title: "Buat Profile" }}
+          name="create"
+          options={{ title: "Buat Profile", headerBackVisible: false }}
         />
       </Stack>
     </>

app/(application)/(user)/profile/create.tsx

@@ -11,27 +11,74 @@ import {
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
 import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCreateProfile } from "@/service/api-client/api-profile";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function CreateProfile() {
-  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [data, setData] = useState({
+    id: user?.id,
     name: "",
     email: "",
-    address: "",
-    gender: "",
+    alamat: "",
+    jenisKelamin: "",
   });
 
-  const handlerSave = () => {
-    console.log("data create profile >>", data);
-    router.back();
+  useFocusEffect(
+    useCallback(() => {
+      Toast.show({
+        type: "info",
+        text1: "Lengkapi Profile Anda",
+        text2: "Untuk menjelajahi fitur-fitur yang ada",
+      });
+    }, [])
+  );
+
+  const handlerSave = async () => {
+    if (!data.name || !data.email || !data.alamat || !data.jenisKelamin) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const response = await apiCreateProfile(data);
+      if (response.status === 400) {
+        Toast.show({
+          type: "error",
+          text1: "Email sudah terdaftar",
+          text2: "Gunakan email lain",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Profile berhasil dibuat",
+      });
+      router.push("/(application)/(user)/home");
+    } catch (error) {
+      console.log("error create profile >>", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const footerComponent = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={handlerSave}
         // disabled={!data.name || !data.email || !data.address || !data.gender}
       >
@@ -49,7 +96,7 @@ export default function CreateProfile() {
           <Spacing />
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${id}`)}
+            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
           >
             Upload
           </ButtonCenteredOnly>
@@ -63,7 +110,7 @@ export default function CreateProfile() {
           <Spacing />
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${id}`)}
+            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
           >
             Upload
           </ButtonCenteredOnly>
@@ -89,8 +136,8 @@ export default function CreateProfile() {
           required
           label="Alamat"
           placeholder="Masukkan alamat"
-          value={data.address}
-          onChangeText={(text) => setData({ ...data, address: text })}
+          value={data.alamat}
+          onChangeText={(text) => setData({ ...data, alamat: text })}
         />
         <SelectCustom
           label="Jenis Kelamin"
@@ -99,9 +146,11 @@ export default function CreateProfile() {
             { label: "Laki-laki", value: "laki-laki" },
             { label: "Perempuan", value: "perempuan" },
           ]}
-          value={data.gender}
+          value={data.jenisKelamin}
           required
-          onChange={(value) => setData({ ...(data as any), gender: value })}
+          onChange={(value) =>
+            setData({ ...(data as any), jenisKelamin: value })
+          }
         />
         <Spacing />
       </StackCustom>

app/(application)/(user)/waiting-room.tsx

@@ -14,18 +14,17 @@ import { router } from "expo-router";
 import Toast from "react-native-toast-message";
 
 export default function WaitingRoom() {
-  const { token, userData, isLoading, logout } = useAuth();
+  const { token, isLoading, logout, userData } = useAuth();
 
   async function handleCheck() {
     try {
       const response = await userData(token as string);
-      console.log("response check", JSON.stringify(response, null, 2));
       if (response.active) {
         Toast.show({
           type: "success",
           text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
         });
-        router.replace("/(application)/(user)/home");
+        router.replace(`/(application)/(user)/profile/create`);
       } else {
         Toast.show({
           type: "error",
@@ -57,7 +56,7 @@ export default function WaitingRoom() {
                 onPressRight: () => {
                   logout();
                 },
-              })
+              });
             }}
           >
             Keluar

app/(application)/admin/_layout.tsx

@@ -221,7 +221,7 @@ export default function AdminLayout() {
                   textLeft: "Batal",
                   textRight: "Ya",
                   onPressRight: () => {
-                    router.replace(`/(application)/(user)/profile/${123}`);
+                    router.replace(`/(application)/(user)/home`);
                   },
                 });
               } else if (item.value === "logout") {

components/_Interface/types.ts

@@ -24,4 +24,5 @@ interface IMenuDrawerItem {
   label: string;
   path?: string;
   color?: string;
+  value?: string;
 }

context/AuthContext.tsx

@@ -1,9 +1,9 @@
 import {
-  apiClient,
+  apiConfig,
   apiLogin,
   apiRegister,
   apiValidationCode,
-} from "@/service/api";
+} from "@/service/api-config";
 import { IUser } from "@/types/User";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router } from "expo-router";
@@ -72,7 +72,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     setIsLoading(true);
     try {
       const response = await apiLogin({ nomor: nomor });
-      console.log("Success login api", JSON.stringify(response, null, 2));
       await AsyncStorage.setItem("kode_otp", response.kodeId);
     } catch (error: any) {
       throw new Error(error.response?.data?.message || "Gagal kirim OTP");
@@ -92,7 +91,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         setToken(token);
         await AsyncStorage.setItem("authToken", token);
 
-        const responseUser = await apiClient.get(
+        const responseUser = await apiConfig.get(
           `/mobile/user?token=${token}`,
           {
             headers: {
@@ -101,7 +100,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
           }
         );
         const dataUser = responseUser.data.data;
-        console.log("res validasi user :", JSON.stringify(dataUser, null, 2));
 
         setUser(dataUser);
         await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
@@ -137,14 +135,13 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const userData = async (token: string) => {
     try {
       setIsLoading(true);
-      const response = await apiClient.get(`/mobile/user?token=${token}`, {
+      const response = await apiConfig.get(`/mobile/user?token=${token}`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
       });
 
       const dataUser = response.data.data;
-      console.log("res validasi user :", JSON.stringify(dataUser, null, 2));
 
       setUser(dataUser);
       await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
@@ -166,7 +163,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     setIsLoading(true);
     try {
       const response = await apiRegister({ data: userData });
-      console.log("Success register api", JSON.stringify(response, null, 2));
 
       const { token } = response;
       if (!response.success) {

screens/Authentication/LoginView.tsx

@@ -3,7 +3,7 @@ import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
-import { apiClient, apiVersion } from "@/service/api";
+import { apiVersion } from "@/service/api-config";
 import { GStyles } from "@/styles/global-styles";
 import { Redirect, router } from "expo-router";
 import { useEffect, useState } from "react";
@@ -19,23 +19,13 @@ export default function LoginView() {
 
   const { loginWithNomor, token, isAdmin, isUserActive } = useAuth();
 
-  // console.log("Token state:", token ? "AVAILABLE" : "NOT AVAILABLE");
-  // console.log("isAdmin state:", isAdmin);
-  // console.log("isUserActive state:", isUserActive);
-  // console.log("isAuthenticated state:", isAuthenticated);
-
   useEffect(() => {
     onLoadVersion();
   }, []);
 
   async function onLoadVersion() {
-    // const token = await AsyncStorage.getItem("authToken");
-    // console.log("Token Version:", token);
     const res = await apiVersion();
     setVersion(res.data);
-
-    const seasonKey = await apiClient.get("/mobile/season-key");
-    console.log("seasonKey", seasonKey.data);
   }
 
   function handleInputValue(phoneNumber: string) {

screens/Authentication/RegisterView.tsx

@@ -42,12 +42,10 @@ export default function RegisterView() {
     const isValid = validasiData();
     if (!isValid) return;
 
-    const response = await registerUser({
+    await registerUser({
       nomor: nomor as string,
       username: username,
     });
-
-    console.log("Success register page", JSON.stringify(response, null, 2));
   }
 
   return (

screens/Authentication/VerificationView.tsx

@@ -3,7 +3,7 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
-import { apiCheckCodeOtp } from "@/service/api";
+import { apiCheckCodeOtp } from "@/service/api-config";
 import { GStyles } from "@/styles/global-styles";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
@@ -29,7 +29,7 @@ export default function VerificationView() {
   async function onLoadCheckCodeOtp() {
     const kodeId = await AsyncStorage.getItem("kode_otp");
     const response = await apiCheckCodeOtp({ kodeId: kodeId as string });
-    console.log("response kode otp :", JSON.stringify(response.otp, null, 2));
+    console.log("Response check code otp >>", JSON.stringify(response.otp, null, 2));
     setCodeOtp(response.otp);
     setUserNumber(response.nomor);
   }
@@ -82,7 +82,7 @@ export default function VerificationView() {
         <View style={GStyles.authContainer}>
           <View>
             <View style={GStyles.authContainerTitle}>
-              <Text style={GStyles.authTitle}>Verifikasi KOde OTP</Text>
+              <Text style={GStyles.authTitle}>Verifikasi Kode OTP</Text>
               <Spacing height={30} />
               <Text style={GStyles.textLabel}>Masukan 4 digit kode otp</Text>
               <Text style={GStyles.textLabel}>

screens/Home/UiHome.tsx

@@ -1,32 +0,0 @@
-// import { ITabs } from "@/components/_Interface/types";
-import { StackCustom } from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { useNavigation } from "expo-router";
-import React, { useEffect } from "react";
-import Home_BottomFeatureSection from "./bottomFeatureSection";
-import Home_ImageSection from "./imageSection";
-import TabSection from "./tabSection";
-import { tabsHome } from "./tabsList";
-import Home_FeatureSection from "./topFeatureSection";
-
-export default function UiHome() {
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    navigation.setOptions({});
-  }, [navigation]);
-
-  return (
-    <>
-      <ViewWrapper footerComponent={<TabSection tabs={tabsHome} />}>
-        <StackCustom>
-          <Home_ImageSection />
-
-          <Home_FeatureSection />
-
-          <Home_BottomFeatureSection />
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
-}

screens/Home/tabsList.ts

@@ -1,6 +1,6 @@
 import { ITabs } from "@/components/_Interface/types";
 
-export  const tabsHome: ITabs[] = [
+export const tabsHome: any = (profileId: string) => [
   {
     id: "forum",
     icon: "chatbubble-ellipses-outline",
@@ -33,8 +33,8 @@ export  const tabsHome: ITabs[] = [
     icon: "person-outline",
     activeIcon: "person",
     label: "Profile",
-    path: "/profile/id-percoban-123456",
+    path: `/profile/${profileId}`,
     isActive: true,
     disabled: false,
   },
-];
+];

screens/Home/topFeatureSection.tsx

@@ -4,39 +4,42 @@ import { Text, TouchableOpacity, View } from "react-native";
 import { stylesHome } from "./homeViewStyle";
 
 export default function Home_FeatureSection() {
+  const listFeature = [
+    {
+      name: "Event",
+      icon: <Ionicons name="analytics" size={48} color="white" />,
+      onPress: () => router.push("/(application)/(user)/event/(tabs)"),
+    },
+    {
+      name: "Collaboration",
+      icon: <Ionicons name="share" size={48} color="white" />,
+      onPress: () => router.push("/(application)/(user)/collaboration/(tabs)"),
+    },
+    {
+      name: "Voting",
+      icon: <Ionicons name="cube" size={48} color="white" />,
+      onPress: () => router.push("/(application)/(user)/voting/(tabs)"),
+    },
+    {
+      name: "Crowdfunding",
+      icon: <Ionicons name="heart" size={48} color="white" />,
+      onPress: () => router.push("/(application)/(user)/crowdfunding"),
+    },
+  ];
+
   return (
     <>
       <View style={stylesHome.gridContainer}>
-        <TouchableOpacity
-          style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/(user)/event/(tabs)")}
-        >
-          <Ionicons name="analytics" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Event</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={stylesHome.gridItem}
-          onPress={() =>
-            router.push("/(application)/(user)/collaboration/(tabs)")
-          }
-        >
-          <Ionicons name="share" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Collaboration</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/(user)/voting/(tabs)")}
-        >
-          <Ionicons name="cube" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Voting</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/(user)/crowdfunding")}
-        >
-          <Ionicons name="heart" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
-        </TouchableOpacity>
+        {listFeature.map((item, index) => (
+          <TouchableOpacity
+            key={index}
+            style={stylesHome.gridItem}
+            onPress={item.onPress}
+          >
+            {item.icon}
+            <Text style={stylesHome.gridLabel}>{item.name}</Text>
+          </TouchableOpacity>
+        ))}
       </View>
     </>
   );

screens/Profile/AvatarAndBackground.tsx

@@ -12,6 +12,8 @@ const AvatarAndBackground = ({
   imageId: string;
 }) => {
   return (
+    // console.log("backgroundId", backgroundId),
+    // console.log("imageId", imageId),
     <View style={styles.container}>
       {/* Background Image */}
       <ClickableCustom

screens/Profile/ListPage.tsx

@@ -5,85 +5,139 @@ import { Ionicons } from "@expo/vector-icons";
 
 export const drawerItemsProfile = ({
   id,
+  isAdmin,
 }: {
   id: string;
-}): IMenuDrawerItem[] => [
-  {
-    icon: (
-      <Ionicons
-        name="create"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Edit profile",
-    path: `/(application)/profile/${id}/edit`,
-  },
-  {
-    icon: (
-      <Ionicons
-        name="camera"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Ubah foto profile",
-    path: `/(application)/profile/${id}/update-photo`,
-  },
-  {
-    icon: (
-      <Ionicons
-        name="image"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Ubah latar belakang",
-    path: `/(application)/profile/${id}/update-background`,
-  },
-  {
-    icon: (
-      <Ionicons
-        name="add-circle"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Tambah portofolio",
-    path: `/(application)/portofolio/${id}/create`,
-  },
-  {
-    icon: (
-      <Ionicons
-        name="settings"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Dashboard Admin",
-    path: `/(application)/admin/dashboard`,
-  },
-  {
-    icon: (
-      <Ionicons
-        name="log-out"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Keluar",
-    color: MainColor.red,
-    path: "",
-  },
-  {
-    icon: (
-      <Ionicons
-        name="create-outline"
-        size={ICON_SIZE_MEDIUM}
-        color={AccentColor.white}
-      />
-    ),
-    label: "Create profile",
-    path: `/(application)/profile/${id}/create`,
-  },
-];
+  isAdmin: boolean;
+}) => {
+  const adminItems: IMenuDrawerItem[] = [
+    {
+      icon: (
+        <Ionicons
+          name="create"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Edit profile",
+      path: `/(application)/profile/${id}/edit`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="camera"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Ubah foto profile",
+      path: `/(application)/profile/${id}/update-photo`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="image"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Ubah latar belakang",
+      path: `/(application)/profile/${id}/update-background`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="add-circle"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Tambah portofolio",
+      path: `/(application)/portofolio/${id}/create`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="settings"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Dashboard Admin",
+      path: `/(application)/admin/dashboard`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="log-out"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Keluar",
+      color: MainColor.red,
+      path: "",
+    },
+  ];
+
+  const userItems: IMenuDrawerItem[] = [
+    {
+      icon: (
+        <Ionicons
+          name="create"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Edit profile",
+      path: `/(application)/profile/${id}/edit`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="camera"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Ubah foto profile",
+      path: `/(application)/profile/${id}/update-photo`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="image"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Ubah latar belakang",
+      path: `/(application)/profile/${id}/update-background`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="add-circle"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Tambah portofolio",
+      path: `/(application)/portofolio/${id}/create`,
+    },
+    {
+      icon: (
+        <Ionicons
+          name="log-out"
+          size={ICON_SIZE_MEDIUM}
+          color={AccentColor.white}
+        />
+      ),
+      label: "Keluar",
+      color: MainColor.red,
+      path: "",
+    },
+  ];
+
+  return isAdmin ? adminItems : userItems;
+};

screens/Profile/ProfileSection.tsx

@@ -5,8 +5,10 @@ import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
 import AvatarAndBackground from "./AvatarAndBackground";
+import { IProfile } from "@/types/Type-Profile";
+import _ from "lodash";
 
-export default function ProfileSection() {
+export default function ProfileSection({ data }: { data: IProfile }) {
   const { id } = useLocalSearchParams();
 
   const listData = [
@@ -14,13 +16,13 @@ export default function ProfileSection() {
       icon: (
         <Ionicons name="call-outline" size={ICON_SIZE_SMALL} color="white" />
       ),
-      label: "+6282340374412",
+      label: `+${data && data.User.nomor ? data.User.nomor : "-"}`,
     },
     {
       icon: (
         <Ionicons name="mail-outline" size={ICON_SIZE_SMALL} color="white" />
       ),
-      label: "bagasbanuna@gmail.com",
+      label: `${data && data.email ? data.email : "-"}`,
     },
     {
       icon: (
@@ -30,28 +32,38 @@ export default function ProfileSection() {
           color="white"
         />
       ),
-      label: "Jalan Raya Sesetan No. 123, Bandung, Indonesia",
+      label: `${data && data.alamat ? data.alamat : "-"}`,
     },
     {
       icon: (
         <FontAwesome5 name="transgender" size={ICON_SIZE_SMALL} color="white" />
       ),
-      label: "Laki-laki",
+      label: `${
+        data && data.jenisKelamin ? _.startCase(data.jenisKelamin) : "-"
+      }`,
     },
   ];
 
   return (
     <>
       <BaseBox>
-        <AvatarAndBackground backgroundId="test-background-id" imageId="test-image-id" />
+        {/* <TextCustom>
+          {JSON.stringify(data.imageBackgroundId, null, 2)}
+        </TextCustom> */}
+        <AvatarAndBackground
+          backgroundId={data?.imageBackgroundId as any}
+          imageId={data?.imageId as any}
+        />
         <Spacing height={50} />
 
         <View style={{ alignItems: "center" }}>
           <TextCustom bold size="large" align="center">
-            Nama User
+            {data && data.name ? data.name : "-"}
           </TextCustom>
           <Spacing height={5} />
-          <TextCustom size="small">@Username</TextCustom>
+          <TextCustom size="small">
+            @{data && data.User.username ? data.User.username : "-"}
+          </TextCustom>
         </View>
         <Spacing height={30} />
 

screens/Profile/menuDrawerSection.tsx

@@ -5,12 +5,10 @@ import { router } from "expo-router";
 
 export default function Profile_MenuDrawerSection({
   drawerItems,
-  setShowLogoutAlert,
   setIsDrawerOpen,
   logout,
 }: {
   drawerItems: IMenuDrawerItem[];
-  setShowLogoutAlert: (value: boolean) => void;
   setIsDrawerOpen: (value: boolean) => void;
   logout: () => Promise<void>;
 }) {

service/api-client/api-profile.ts

@@ -0,0 +1,26 @@
+import { apiConfig } from "../api-config";
+
+export async function apiCreateProfile(data: any) {
+  const response = await apiConfig.post(`/mobile/profile`, {
+    data: data,
+  });
+  return response.data;
+}
+
+export async function apiProfile({ id }: { id: string }) {
+  const response = await apiConfig.get(`/mobile/profile/${id}`);
+  return response.data;
+}
+
+export async function apiUpdateProfile({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  const response = await apiConfig.put(`/mobile/profile/${id}`, {
+    data: data,
+  });
+  return response.data;
+}

service/api-client/api-user.ts

@@ -0,0 +1,6 @@
+import { apiConfig } from "../api-config";
+
+export async function apiUser(id: string) {
+  const response = await apiConfig.get(`/user/${id}`);
+  return response.data;
+}

service/api-config.ts

@@ -3,21 +3,14 @@ import axios, { AxiosInstance } from "axios";
 import Constants from "expo-constants";
 const API_BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL;
 
-export const apiClient: AxiosInstance = axios.create({
+export const apiConfig: AxiosInstance = axios.create({
   baseURL: API_BASE_URL,
 });
 
-// Endpoint yang TIDAK butuh token
-// const PUBLIC_ROUTES = [
-//   // "/version",
-//   "/auth/send-otp",
-//   "/auth/verify-otp",
-//   "/auth/register",
-//   "/auth/logout", // opsional, tergantung kebutuhan
-// ];
 
-apiClient.interceptors.request.use(
+apiConfig.interceptors.request.use(
   async (config) => {
+    console.log("API_BASE_URL >>", API_BASE_URL);
     const token = await AsyncStorage.getItem("authToken");
     if (token) {
       // config.timeout = 10000;
@@ -35,25 +28,25 @@ apiClient.interceptors.request.use(
 
 export async function apiVersion() {
   // console.log("API_BASE_URL", API_BASE_URL);
-  const response = await apiClient.get("/version");
+  const response = await apiConfig.get("/version");
   // console.log("Response version", JSON.stringify(response.data, null, 2));
   return response.data;
 }
 
 export async function apiLogin({ nomor }: { nomor: string }) {
-  const response = await apiClient.post("/auth/login", {
+  const response = await apiConfig.post("/auth/login", {
     nomor: nomor,
   });
   return response.data;
 }
 
 export async function apiCheckCodeOtp({ kodeId }: { kodeId: string }) {
-  const response = await apiClient.get(`/auth/check/${kodeId}`);
+  const response = await apiConfig.get(`/auth/check/${kodeId}`);
   return response.data;
 }
 
 export async function apiValidationCode({ nomor }: { nomor: string }) {
-  const response = await apiClient.post(`/auth/validasi`, {
+  const response = await apiConfig.post(`/auth/validasi`, {
     nomor: nomor,
   });
   return response.data;
@@ -64,7 +57,7 @@ export async function apiRegister({
 }: {
   data: { nomor: string; username: string };
 }) {
-  const response = await apiClient.post(`/auth/register`, {
+  const response = await apiConfig.post(`/auth/register`, {
     data: data,
   });
   return response.data;

types/Type-Profile.ts

@@ -0,0 +1,16 @@
+import { IUser } from "./User";
+
+export interface IProfile {
+  id?: string;
+  name?: string;
+  email?: string;
+  alamat?: string;
+  jenisKelamin?: string;
+  active?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+  userId?: string;
+  imageId?: string | null;
+  imageBackgroundId?: string | null;
+  User: IUser
+}

types/User.ts

@@ -6,12 +6,12 @@ export interface IMasterUserRole {
 }
 
 export interface IUser {
-  id: string;
-  username: string;
-  nomor: string;
-  active: boolean;
-  createdAt: string | null;
-  updatedAt: string | null;
-  masterUserRoleId: string;
-  MasterUserRole: IMasterUserRole;
+  id?: string;
+  username?: string;
+  nomor?: string;
+  active?: boolean;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+  masterUserRoleId?: string;
+  MasterUserRole?: IMasterUserRole;
 }