Profile

Add:
- Api upload background
- /api-client/api-validation.ts

### No Issue

app/(application)/(image)/preview-image/[id]/index.tsx

@@ -1,9 +1,33 @@
-import { LandscapeFrameUploaded, ViewWrapper } from "@/components";
+import { CenterCustom, TextCustom, ViewWrapper } from "@/components";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router";
+import React, { useState } from "react";
 
 export default function PreviewImage() {
+  const { id } = useLocalSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+
   return (
     <ViewWrapper>
-      <LandscapeFrameUploaded />
+      {id ? (
+        <Image
+          onLoad={() => {
+            setIsLoading(false);
+          }}
+          source={
+            isLoading
+              ? require("@/assets/images/loading.gif")
+              : API_STRORAGE.GET({ fileId: id as string })
+          }
+          contentFit="contain"
+          style={{ width: "100%", height: "100%" }}
+        />
+      ) : (
+        <CenterCustom>
+          <TextCustom>File not found</TextCustom>
+        </CenterCustom>
+      )}
     </ViewWrapper>
   );
 }

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

@@ -22,14 +22,17 @@ export default function Application() {
 
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
-    console.log("data user >>", JSON.stringify(response.active, null, 2));
     setData(response.data);
   }
 
-  if (data?.active === false) {
+  if (data && data?.active === false) {
     return <Redirect href={`/waiting-room`} />;
   }
 
+  if (data && data?.Profile === null) {
+    return <Redirect href={`/profile/create`} />;
+  }
+
   return (
     <>
       <Stack.Screen
@@ -57,7 +60,11 @@ export default function Application() {
           ),
         }}
       />
-      <ViewWrapper footerComponent={<TabSection tabs={tabsHome} />}>
+      <ViewWrapper
+        footerComponent={
+          <TabSection tabs={tabsHome(data?.Profile?.id as string)} />
+        }
+      >
         <StackCustom>
           <Home_ImageSection />
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   ButtonCustom,
   SelectCustom,
@@ -7,46 +6,75 @@ 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 { useEffect, useState } from "react";
-import { StyleSheet } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function ProfileEdit() {
   const { id } = useLocalSearchParams();
 
-  const [data, setData] = useState({
+  const [data, setData] = useState<IProfile | any>();
-    nama: "Bagas Banuna",
+  const [isLoading, setIsLoading] = useState<boolean>(false);
-    email: "bagasbanuna@gmail.com",
-    alamat: "Jember",
-    selectedValue: "",
-  });
 
   const options = [
     { label: "Laki-laki", value: "laki-laki" },
     { label: "Perempuan", value: "perempuan" },
   ];
 
-  const handleSave = () => {
+  useEffect(() => {
-    console.log({
+    onLoadData(id as string);
-      nama: data.nama,
+  }, [id]);
-      email: data.email,
+
-      alamat: data.alamat,
+  async function onLoadData(id: string) {
-      selectedValue: data.selectedValue,
+    try {
-    });
+      const response = await apiProfile({ id });
-    router.back();
+      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,
+        category: "profile",
+      });
+      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
+          <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
-            // disabled={
+            Update
-            //   !data.nama || !data.email || !data.alamat || !data.selectedValue
-            // }
-            onPress={handleSave}
-          >
-            Simpan
           </ButtonCustom>
         </BoxButtonOnFooter>
       }
@@ -55,16 +83,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 +102,7 @@ export default function ProfileEdit() {
         <TextInputCustom
           label="Alamat"
           placeholder="Alamat"
-          value={data.alamat}
+          value={data?.alamat}
           onChangeText={(text) => {
             setData({ ...data, alamat: text });
           }}
@@ -84,25 +113,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 {
-import React, { useState } from "react";
+  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 = () => {
+  useFocusEffect(
-    console.log("User logout");
+    useCallback(() => {
-    router.replace("/");
+      onLoadData(id as string);
-    setShowLogoutAlert(false);
+    }, [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
+        <ProfileSection data={data as any} />
-          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 />
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={isDrawerOpen}
         closeDrawer={closeDrawer}
       >
         <Profile_MenuDrawerSection
-          drawerItems={drawerItemsProfile({ id: id as string })}
+          drawerItems={drawerItemsProfile({ id: id as string, isAdmin })}
-          setShowLogoutAlert={setShowLogoutAlert}
           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/[id]/update-background.tsx

@@ -5,40 +5,111 @@ import {
   ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
-import { router, useLocalSearchParams } from "expo-router";
+import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
+import { uploadImageService } from "@/service/upload-service";
+import { IProfile } from "@/types/Type-Profile";
+import pickImage from "@/utils/pickImage";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 import { Image } from "react-native";
 
 export default function UpdateBackgroundProfile() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IProfile>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    try {
+      const response = await apiProfile({ id });
+      console.log(
+        "response image id >>",
+        JSON.stringify(response.data.backgroundId, null, 2)
+      );
+      setData(response.data);
+    } catch (error) {
+      console.log("error get profile >>", error);
+    }
+  }
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_background,
+      });
+
+      if (response.success) {
+        const fileId = response.data.id;
+        await apiUpdateProfile({
+          id: id as string,
+          data: { fileId },
+          category: "background",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("error upload >>", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Simpan foto background >>", id);
+          onUpload();
-          router.back();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
 
+  const image = imageUri ? (
+    <Image
+      source={{ uri: imageUri }}
+      style={{ width: "100%", height: "100%" }}
+    />
+  ) : (
+    <Image
+      source={
+        data?.imageBackgroundId
+          ? { uri: API_STRORAGE.GET({ fileId: data.imageBackgroundId }) }
+          : DUMMY_IMAGE.background
+      }
+      style={{ width: "100%", height: "100%", borderRadius: 10 }}
+    />
+  );
+
   return (
     <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <Image
+        {image}
-          source={DUMMY_IMAGE.background}
-          resizeMode="cover"
-          style={{ width: "100%", height: "100%", borderRadius: 10 }}
-        />
       </BaseBox>
 
       <ButtonCenteredOnly
         icon="upload"
-        onPress={() => router.navigate(`/(application)/take-picture/${id}`)}
+        onPress={() => {
+          pickImage({
+            setImageUri,
+          });
+        }}
       >
         Update
       </ButtonCenteredOnly>

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -1,47 +1,126 @@
 import {
-  AvatarCustom,
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { router, useLocalSearchParams } from "expo-router";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
+import { uploadImageService } from "@/service/upload-service";
+import { IProfile } from "@/types/Type-Profile";
+import pickImage from "@/utils/pickImage";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { Image } from "react-native";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IProfile>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    try {
+      const response = await apiProfile({ id });
+      console.log(
+        "response image id >>",
+        JSON.stringify(response.data.imageId, null, 2)
+      );
+      setData(response.data);
+    } catch (error) {
+      console.log("error get profile >>", error);
+    }
+  }
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      console.log(
+        "response upload photo>>",
+        JSON.stringify(response, null, 2)
+      );
+
+      if (response.success) {
+        const fileId = response.data.id;
+        await apiUpdateProfile({
+          id: id as string,
+          data: { fileId },
+          category: "photo",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("error upload >>", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Simpan foto profile >>", id);
+          onUpload();
-          router.back();
+          // console.log("Simpan foto profile >>", id);
+          // router.back();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
+  const image = imageUri ? (
+    <Image
+      source={{ uri: imageUri }}
+      style={{ width: "100%", height: "100%" }}
+    />
+  ) : (
+    <Image
+      source={
+        data?.imageId
+          ? { uri: API_STRORAGE.GET({ fileId: data.imageId }) }
+          : DUMMY_IMAGE.avatar
+      }
+      style={{ width: "100%", height: "100%" }}
+    />
+  );
+
   return (
     <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <AvatarCustom size="xl" />
+        {image}
       </BaseBox>
 
+      {/* Upload Image */}
       <ButtonCenteredOnly
         icon="upload"
         onPress={() => {
-          console.log("Update photo >>", id);
+          pickImage({
-          router.navigate(`/(application)/take-picture/${id}`);
+            setImageUri,
+          });
         }}
       >
-        Update
+        Upload
       </ButtonCenteredOnly>
-
-      {/* <Spacing />
-      <ButtonCustom>Test</ButtonCustom> */}
     </ViewWrapper>
   );
 }

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

@@ -1,25 +1,34 @@
 import {
-  AvatarCustom,
+  BaseBox,
   ButtonCenteredOnly,
   ButtonCustom,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
-import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { useAuth } from "@/hooks/use-auth";
-import { apiCreateProfile } from "@/service/api-client/api-profile";
+import {
+  apiCreateProfile
+} from "@/service/api-client/api-profile";
+import { apiValidationEmail } from "@/service/api-client/api-validation";
+import { uploadImageService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
 import { router } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { View } from "react-native";
+import { Image, View } from "react-native";
+import { Avatar } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
 export default function CreateProfile() {
   const { user } = useAuth();
+  const [imagePhoto, setImagePhoto] = useState<string | null>(null);
+  const [imageBackground, setImageBackground] = useState<string | null>(null);
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [data, setData] = useState({
@@ -30,7 +39,19 @@ export default function CreateProfile() {
     jenisKelamin: "",
   });
 
+  useEffect(() => {
+    Toast.show({
+      type: "info",
+      text1: "Lengkapi Profile Anda",
+      text2: "Untuk menjelajahi fitur-fitur yang ada",
+    });
+  }, []);
+
   const handlerSave = async () => {
+    let IMG = {
+      imageId: "",
+      imageBackgroundId: "",
+    };
     if (!data.name || !data.email || !data.alamat || !data.jenisKelamin) {
       Toast.show({
         type: "info",
@@ -42,9 +63,72 @@ export default function CreateProfile() {
 
     try {
       setIsLoading(true);
-      const response = await apiCreateProfile(data);
-      console.log("data create profile >>", JSON.stringify(response, null, 2));
 
+      const responseValidateEmail = await apiValidationEmail({
+        email: data.email,
+      });
+
+      if (!responseValidateEmail.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal",
+          text2: responseValidateEmail.message,
+        });
+        return;
+      }
+
+      console.log(
+        "responseValidateEmail >>",
+        JSON.stringify(responseValidateEmail, null, 2)
+      );
+
+      
+
+
+      
+
+      if (imagePhoto) {
+        const responseUploadPhoto = await uploadImageService({
+          imageUri: imagePhoto,
+          dirId: DIRECTORY_ID.profile_foto,
+        });
+
+        console.log(
+          "responseUploadPhoto >>",
+          JSON.stringify(responseUploadPhoto, null, 2)
+        );
+
+        if (responseUploadPhoto.success) {
+          const fileIdPhoto = responseUploadPhoto.data.id;
+
+          IMG.imageId = fileIdPhoto;
+        }
+      }
+
+      if (imageBackground) {
+        const responseUploadBackground = await uploadImageService({
+          imageUri: imageBackground,
+          dirId: DIRECTORY_ID.profile_background,
+        });
+
+        console.log(
+          "responseUploadBackground >>",
+          JSON.stringify(responseUploadBackground, null, 2)
+        );
+
+        if (responseUploadBackground.success) {
+          const fileIdBackground = responseUploadBackground.data.id;
+
+          IMG.imageBackgroundId = fileIdBackground;
+        }
+      }
+
+      const fixData = {
+        ...data,
+        ...IMG,
+      };
+
+      const response = await apiCreateProfile(fixData);
       if (response.status === 400) {
         Toast.show({
           type: "error",
@@ -56,10 +140,13 @@ export default function CreateProfile() {
 
       Toast.show({
         type: "success",
-        text1: "Success",
+        text1: "Sukses",
         text2: "Profile berhasil dibuat",
       });
+
+      console.log("fixResponse >>", JSON.stringify(response, null, 2));
       router.push("/(application)/(user)/home");
+      return;
     } catch (error) {
       console.log("error create profile >>", error);
     } finally {
@@ -84,11 +171,18 @@ export default function CreateProfile() {
       <StackCustom>
         <InformationBox text="Upload foto profile anda." />
         <View style={{ alignItems: "center" }}>
-          <AvatarCustom size="xl" />
+          <Avatar.Image
+            size={100}
+            source={imagePhoto ? { uri: imagePhoto } : DUMMY_IMAGE.avatar}
+          />
           <Spacing />
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
+            onPress={() => {
+              pickImage({
+                setImageUri: setImagePhoto,
+              });
+            }}
           >
             Upload
           </ButtonCenteredOnly>
@@ -98,11 +192,24 @@ export default function CreateProfile() {
 
         <View>
           <InformationBox text="Upload foto latar belakang anda." />
-          <LandscapeFrameUploaded />
+          <BaseBox>
-          <Spacing />
+            <Image
+              source={
+                imageBackground
+                  ? { uri: imageBackground }
+                  : DUMMY_IMAGE.background
+              }
+              style={{ width: "100%", height: 200 }}
+            />
+          </BaseBox>
+          {/* <Spacing /> */}
           <ButtonCenteredOnly
             icon="upload"
-            onPress={() => router.navigate(`/take-picture/${user?.id}`)}
+            onPress={() => {
+              pickImage({
+                setImageUri: setImageBackground,
+              });
+            }}
           >
             Upload
           </ButtonCenteredOnly>

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") {

app/(application)/coba/button-upload.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ButtonCustom } from "@/components";
+import pickImage from "@/utils/pickImage";
+import { Feather } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { Alert } from "react-native";
+
+// Daftar ekstensi yang diperbolehkan
+const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"];
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export default function ButtonUpload({
+  setImageUri,
+}: {
+  setImageUri: (uri: string) => void;
+}) {
+  const pickImg = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(
+        "Permission Denied",
+        "You need to grant permission to access your media library"
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    if (result.canceled || !result.assets[0]?.uri) {
+      return;
+    }
+
+    const uri = result.assets[0].uri;
+    const filename = uri.split("/").pop()?.toLowerCase() || "";
+    const match = /\.(\w+)$/.exec(filename);
+    const extension = match ? match[1] : "";
+
+    // Validasi ekstensi
+    if (!extension || !ALLOWED_EXTENSIONS.includes(extension)) {
+      Alert.alert(
+        "File Tidak Valid",
+        "Hanya file JPG, JPEG, dan PNG yang diperbolehkan."
+      );
+      return;
+    }
+
+    // Opsional: Validasi ukuran file (jika metadata tersedia)
+    // Catatan: Di Expo, `file.size` mungkin tidak tersedia di semua platform
+    const asset = result.assets[0];
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert("File Terlalu Besar", "Ukuran file maksimal adalah 5MB.");
+      return;
+    }
+
+    // Jika lolos validasi, simpan URI
+    setImageUri(uri);
+  };
+
+  return (
+    <ButtonCustom
+      iconLeft={<Feather name="upload" size={14} color="black" />}
+      style={{
+        width: 120,
+        margin: "auto",
+      }}
+      onPress={() => {
+        pickImage({
+          setImageUri,
+        });
+      }}
+    >
+      Upload
+    </ButtonCustom>
+  );
+}

app/(application)/coba/index.tsx

@@ -1,184 +1,39 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Stack } from "expo-router";
 import React from "react";
-import {
+import { Dimensions, StyleSheet } from "react-native";
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
-import EventDetailScreen from "./double-scroll";
-import LeftButtonCustom from "@/components/Button/BackButton";
-import CustomUploadButton from "./upload-button";
 import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenViewImage from "./screen-view-image";
 
 const { width } = Dimensions.get("window");
 
-// Sample Screen Components
-const HomeScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Selamat Datang!</Text>
-    <Text style={styles.screenText}>
-      Ini adalah halaman utama aplikasi Anda
-    </Text>
-  </View>
-);
-const SearchScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Search Screen</Text>
-    <Text style={styles.screenText}>Cari apa yang Anda butuhkan</Text>
-  </View>
-);
-
-const ProfileScreen = () => (
-  <View style={styles.screen}>
-    <Text style={styles.screenTitle}>Profile Screen</Text>
-    <Text style={styles.screenText}>Informasi profil pengguna</Text>
-  </View>
-);
-
-const NotificationScreen = () => (
-  <View style={styles.screen}>
-    {Array.from({ length: 10 }).map((_, index) => (
-      <View key={index}>
-        <Text style={styles.screenTitle}>Notifications</Text>
-        <Text style={styles.screenText}>Notifikasi terbaru Anda</Text>
-      </View>
-    ))}
-  </View>
-);
-
-// Custom Tab Component
-const CustomTab = ({ icon, label, isActive, onPress }: any) => (
-  <TouchableOpacity
-    style={[styles.tabItem, isActive && styles.activeTab]}
-    onPress={onPress}
-    activeOpacity={0.7}
-  >
-    <View
-      style={[styles.iconContainer, isActive && styles.activeIconContainer]}
-    >
-      <Ionicons name={icon} size={24} color={isActive ? "#fff" : "#666"} />
-    </View>
-    <Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
-      {label}
-    </Text>
-    {isActive && <View style={styles.activeIndicator} />}
-  </TouchableOpacity>
-);
-
 // Main Custom Tab Navigator
 const CustomTabNavigator = () => {
-  const [activeTab, setActiveTab] = React.useState("home");
-  const [showHome, setShowHome] = React.useState(true);
-
-  const tabs = [
-    {
-      id: "search",
-      icon: "search-outline",
-      activeIcon: "search",
-      label: "Event",
-      component: SearchScreen,
-      path: "/event",
-    },
-    {
-      id: "notifications",
-      icon: "notifications-outline",
-      activeIcon: "notifications",
-      label: "Forum",
-      component: NotificationScreen,
-      path: "/forum",
-    },
-    {
-      id: "profile",
-      icon: "person-outline",
-      activeIcon: "person",
-      label: "Katalog",
-      component: ProfileScreen,
-      path: "/profile",
-    },
-  ];
-
-  // Function untuk handle tab press
-  const handleTabPress = (tabId: string) => {
-    setActiveTab(tabId);
-    setShowHome(false); // Hide home when any tab is pressed
-  };
-
-  // Determine which component to show
-  const getActiveComponent = () => {
-    if (showHome || activeTab === "home") {
-      return HomeScreen;
-    }
-    // const selectedTab = tabs.find((tab) => tab.id === activeTab);
-    // return selectedTab ? selectedTab.component : HomeScreen;
-    return HomeScreen;
-  };
-
-  const ActiveComponent = getActiveComponent();
-
-  const handleImageUpload = (file: any) => {
-    console.log("Gambar dipilih:", file);
-    // Upload ke server
-  };
-
-  const handlePdfOrPngUpload = (file: any) => {
-    console.log("PDF atau PNG dipilih:", file);
-  };
-
   return (
     <>
       <SafeAreaView edges={["bottom"]} style={styles.container}>
         <Stack.Screen
           options={{
-            title: "Custom Tab Navigator",
+            title: "Tampilan Percobaan",
           }}
         />
-        <EventDetailScreen />
+        <ScreenViewImage />
+        {/* <ScreenUpload/> */}
+        {/* <EventDetailScreen /> */}
 
-        <CustomUploadButton
+        {/* <CustomUploadButton
           allowedExtensions={["jpeg", "png"]}
           buttonTitle="Unggah Gambar (JPEG/PNG)"
           onFileSelected={handleImageUpload}
-        />
+        /> */}
 
         {/* Hanya PDF atau PNG */}
-        <CustomUploadButton
+        {/* <CustomUploadButton
           allowedExtensions={["pdf"]}
           buttonTitle="Unggah PDF atau PNG"
           onFileSelected={handlePdfOrPngUpload}
-        />
+        /> */}
       </SafeAreaView>
     </>
-    // <View style={styles.container}>
-    //   {/* Content Area */}
-    //   <ScrollView>
-    //     <View style={styles.content}>
-    //       <ActiveComponent />
-    //     </View>
-    //   </ScrollView>
-
-    //   {/* Custom Tab Bar */}
-    //   <View style={styles.tabBar}>
-    //     <View style={styles.tabContainer}>
-    //       {tabs.map((e) => (
-    //         <CustomTab
-    //           key={e.id}
-    //           icon={activeTab === e.id ? e.activeIcon : e.icon}
-    //           label={e.label}
-    //           isActive={activeTab === e.id && !showHome}
-    //           onPress={() => {
-    //             handleTabPress(e.id);
-    //             router.push(e.path as any);
-    //           }}
-    //         />
-    //       ))}
-    //     </View>
-    //   </View>
-    // </View>
   );
 };
 

app/(application)/coba/screen-upload.tsx

@@ -0,0 +1,73 @@
+import {
+  AvatarCustom,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { uploadImageService } from "@/service/upload-service";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import ButtonUpload from "./button-upload";
+
+export default function ScreenUpload() {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function onUpload() {
+    setIsLoading(true);
+    try {
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.profile_foto,
+      });
+
+      if (response.success) {
+        await AsyncStorage.setItem("idImage", response.data.id);
+        router.back();
+      }
+    } catch (error) {
+      console.log("Error", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function buttonUpload() {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom isLoading={isLoading} onPress={() => onUpload()}>
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonUpload()}>
+        <StackCustom>
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <AvatarCustom
+              source={imageUri ? { uri: imageUri } : DUMMY_IMAGE.avatar}
+              size="xl"
+            />
+          </View>
+
+          <ButtonUpload setImageUri={setImageUri} />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/coba/screen-view-image.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable no-unused-expressions */
+import { ButtonCustom, StackCustom, ViewWrapper } from "@/components";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { ActivityIndicator, Image } from "react-native";
+
+export default function ScreenViewImage() {
+  const [dataId, setDataId] = useState<string | null>(null);
+  useFocusEffect(
+    useCallback(() => {
+      AsyncStorage.getItem("idImage").then((id) => {
+        setDataId(id || null);
+      });
+    }, [])
+  );
+
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        {dataId ? (
+          <Image
+            onLoad={() => {
+              <ActivityIndicator size="large" />
+            }}
+            source={{ uri: APIs.GET({ fileId: dataId }) }}
+            style={{
+              width: 200,
+              height: 200,
+              margin: "auto",
+            }}
+          />
+        ) : (
+          <Image
+            source={DUMMY_IMAGE.avatar}
+            style={{
+              width: 200,
+              height: 200,
+              margin: "auto",
+            }}
+          />
+        )}
+
+        <ButtonCustom onPress={async () => {
+            await AsyncStorage.removeItem("idImage");
+            router.push("/coba/screen-upload");
+        }}>
+          Upload image
+        </ButtonCustom>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const APIs = {
+  /**
+   *
+   * @param fileId | file id from wibu storage , atau bisa disimpan di DB
+   * @param size | file size 10 - 1000 , tergantung ukuran file dan kebutuhan saar di tampilkan
+   * @type {string}
+   */
+  GET: ({ fileId, size }: { fileId: string; size?: string }) =>
+    size
+      ? `https://wibu-storage.wibudev.com/api/files/${fileId}-size-${size}`
+      : `https://wibu-storage.wibudev.com/api/files/${fileId}`,
+
+  /**
+   * @type {string}
+   * @returns alamat API dari wibu storage
+   */
+  GET_NO_PARAMS: "https://wibu-storage.wibudev.com/api/files/",
+};

app/(application)/coba/upload-image.tsx

@@ -0,0 +1,131 @@
+import { apiConfig } from "@/service/api-config";
+import * as ImagePicker from "expo-image-picker";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Button,
+  Image,
+  Text,
+  View,
+} from "react-native";
+
+// Daftar ekstensi yang diperbolehkan
+const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"];
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export default function UploadImage() {
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const pickImage = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(
+        "Permission Denied",
+        "You need to grant permission to access your media library"
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    if (result.canceled || !result.assets[0]?.uri) {
+      return;
+    }
+
+    const uri = result.assets[0].uri;
+    const filename = uri.split("/").pop()?.toLowerCase() || "";
+    const match = /\.(\w+)$/.exec(filename);
+    const extension = match ? match[1] : "";
+
+    // Validasi ekstensi
+    if (!extension || !ALLOWED_EXTENSIONS.includes(extension)) {
+      Alert.alert(
+        "File Tidak Valid",
+        "Hanya file JPG, JPEG, dan PNG yang diperbolehkan."
+      );
+      return;
+    }
+
+    // Opsional: Validasi ukuran file (jika metadata tersedia)
+    // Catatan: Di Expo, `file.size` mungkin tidak tersedia di semua platform
+    const asset = result.assets[0];
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert("File Terlalu Besar", "Ukuran file maksimal adalah 5MB.");
+      return;
+    }
+
+    // Jika lolos validasi, simpan URI
+    setImageUri(uri);
+  };
+
+  const uploadImage = async () => {
+    if (!imageUri) return;
+
+    setUploading(true);
+
+    const uri = imageUri;
+    const filename = uri.split("/").pop();
+    const match = /\.(\w+)$/.exec(filename || "");
+    const type = match ? `image/${match[1]}` : "image";
+    const dirId = "cmeryhudo016lbpnn3vlhnufq";
+
+    const formData = new FormData();
+    // @ts-ignore: React Native tidak mengenal Blob secara langsung
+    formData.append("file", {
+      uri,
+      name: filename,
+      type,
+    });
+    formData.append("dirId", dirId);
+
+    try {
+      const response = await apiConfig.post("/mobile/upload", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+        timeout: 30000,
+      });
+
+      console.log("Response", JSON.stringify(response.data, null, 2));
+    } catch (error) {
+      console.log("Error", error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, padding: 20, justifyContent: "center" }}>
+      <Button title="Pilih Gambar" onPress={pickImage} />
+
+      {imageUri && (
+        <Image
+          source={{ uri: imageUri }}
+          style={{ width: 300, height: 300, margin: "auto" }}
+        />
+      )}
+
+      {imageUri && !uploading && (
+        <Button
+          title="Unggah Gambar"
+          onPress={uploadImage}
+          disabled={uploading}
+        />
+      )}
+
+      {uploading && (
+        <View style={{ marginTop: 20 }}>
+          <ActivityIndicator size="large" color="#0000ff" />
+          <Text>Mengunggah...</Text>
+        </View>
+      )}
+    </View>
+  );
+}

app/(application)/coba/upload-service.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { apiConfig } from "@/service/api-config";
+import Toast from "react-native-toast-message";
+
+export async function tryUploadService({
+  dirId,
+  imageUri,
+}: {
+  dirId: string;
+  imageUri: string | null;
+}) {
+  if (!imageUri) {
+    Toast.show({
+      type: "error",
+      text1: "Gagal",
+      text2: "Harap pilih gambar terlebih dahulu",
+    });
+    return;
+  }
+
+  try {
+    const uri = imageUri;
+    const filename = uri.split("/").pop();
+    const match = /\.(\w+)$/.exec(filename || "");
+    const type = match ? `image/${match[1]}` : "image";
+
+    const formData = new FormData();
+    // @ts-ignore: React Native tidak mengenal Blob secara langsung
+    formData.append("file", {
+      uri,
+      name: filename,
+      type,
+    });
+    formData.append("dirId", dirId);
+
+    const response = await apiConfig.post("/mobile/upload", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      timeout: 30000,
+    });
+
+    console.log("Response", JSON.stringify(response.data, null, 2));
+    const { data } = response;
+
+    if (!data.success) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: data.message,
+      });
+
+      return;
+    }
+
+    Toast.show({
+      type: "success",
+      text1: "File berhasil diunggah",
+    });
+
+    return data;
+  } catch (error) {
+    Toast.show({
+      type: "error",
+      text1: "File gagal diunggah",
+    });
+  }
+}

components/Image/AvatarComp.tsx

@@ -0,0 +1,59 @@
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { Href, router } from "expo-router";
+import { TouchableOpacity } from "react-native";
+import { Avatar } from "react-native-paper";
+
+type Size = "base" | "sm" | "md" | "lg" | "xl";
+
+const sizeMap = {
+  base: 40,
+  sm: 60,
+  md: 80,
+  lg: 100,
+  xl: 120,
+};
+
+interface AvatarCompProps {
+  fileId?: string;
+  size: Size;
+  onPress?: () => void | any;
+  href?: Href | undefined | any;
+}
+
+export default function AvatarComp({
+  fileId,
+  size,
+  onPress,
+  href = `/(application)/(image)/preview-image/${fileId}`,
+}: AvatarCompProps) {
+  const dimension = sizeMap[size];
+
+  const avatarImage = () => {
+    return (
+      <Avatar.Image
+        size={dimension}
+        source={
+          fileId ? { uri: API_STRORAGE.GET({ fileId }) } : DUMMY_IMAGE.avatar
+        }
+      />
+    );
+  };
+
+  return (
+    <>
+      {onPress || href ? (
+        <TouchableOpacity
+          activeOpacity={0.9}
+          onPress={
+            href && fileId ? () => router.navigate(href as any) : onPress
+          }
+        >
+          {avatarImage()}
+        </TouchableOpacity>
+      ) : (
+        avatarImage()
+      )}
+    </>
+  );
+}

components/Image/AvatarCustom.tsx

@@ -14,8 +14,8 @@ type Size = "base" | "sm" | "md" | "lg" | "xl";
 interface AvatarCustomProps {
   source?: ImageSourcePropType;
   size?: Size;
-  onPress?: () => void;
+  onPress?: () => any;
-  href?: Href | undefined;
+  href?: Href | undefined | any;
 }
 
 const sizeMap = {

components/_Interface/types.ts

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

components/index.ts

@@ -38,6 +38,7 @@ import StackCustom from "./Stack/StackCustom";
 import SelectCustom from "./Select/SelectCustom";
 // Image
 import AvatarCustom from "./Image/AvatarCustom";
+import AvatarComp from "./Image/AvatarComp";
 import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
 // Divider
 import Divider from "./Divider/Divider";
@@ -69,6 +70,7 @@ export {
   AlertDefaultSystem,
   // Image
   AvatarCustom,
+  AvatarComp,
   // ShareComponent
   AvatarUsernameAndOtherComponent,
   // Button

constants/base-url-api-strorage.ts

@@ -0,0 +1,20 @@
+const API_STRORAGE = {
+  /**
+   *
+   * @param fileId | file id from wibu storage , atau bisa disimpan di DB
+   * @param size | file size 10 - 1000 , tergantung ukuran file dan kebutuhan saar di tampilkan
+   * @type {string}
+   */
+  GET: ({ fileId, size }: { fileId: string; size?: string }) =>
+    size
+      ? `https://wibu-storage.wibudev.com/api/files/${fileId}-size-${size}`
+      : `https://wibu-storage.wibudev.com/api/files/${fileId}`,
+
+  /**
+   * @type {string}
+   * @returns alamat API dari wibu storage
+   */
+  GET_NO_PARAMS: "https://wibu-storage.wibudev.com/api/files/",
+};
+
+export default API_STRORAGE;

constants/directory-id.ts

@@ -0,0 +1,33 @@
+const DIRECTORY_ID = {
+  profile_foto: "cm0x93rgo000jbp5tj8baoaus",
+  profile_background: "cm0x93ze8000lbp5t1a8uc9wl",
+  portofolio_logo: "cm0yjl6ug000310njwmk6j0tx",
+  map_pin: "cm0yjq8up000710njv5klra32",
+  map_image: "cm0yjqnxl000910njplqho07w",
+
+  // Investasi
+  investasi_image: "cm0yjs35h000b10njb35o12h1",
+  investasi_bukti_transfer: "cm0yjsflu000d10njrc3lnqho",
+  investasi_prospektus: "cm1soio74003p38bjyciwf1oy",
+  investasi_dokumen: "cm21g2hxw004d10dpx8j16tt7",
+  investasi_berita: "cm21g2yzc004f10dpbtqdfcjb",
+
+  // Donasi
+  donasi_image: "cm0yk1coh000f10nj597a99kv",
+  donasi_cerita_image: "cm2dvy9bi007v10dpmatb5yiy",
+  donasi_kabar: "cm2dvxo48007t10dpmmustxa2",
+  donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
+  donasi_bukti_trf_pencairan_dana: "cm32s7h1q005yb5kuf5uiv5de",
+
+  // Job
+  job_image: "cm0ypp6zl0003kp7jf59zuvjy",
+
+  // Event
+  event_sponsor: "cm65zlbyf001udvmggnd6i0oh",
+  event_bukti_transfer: "cm65zlehy001wdvmgnobur2zh",
+
+  // Sticker
+  sticker: "cmanquv32002fcesbk49cj07g",
+};
+
+export default DIRECTORY_ID;

screens/Authentication/LoginView.tsx

@@ -146,8 +146,8 @@ export default function LoginView() {
           Login
         </ButtonCustom>
         <Spacing />
-        {/* <ButtonCustom onPress={() => router.navigate("/waiting-room")}>
+        {/* <ButtonCustom onPress={() => router.navigate("/(application)/coba")}>
-          Admin ( Delete Soon )
+          Coba
         </ButtonCustom> */}
       </View>
     </ViewWrapper>

screens/Authentication/VerificationView.tsx

@@ -29,6 +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 check code otp >>", JSON.stringify(response.otp, null, 2));
     setCodeOtp(response.otp);
     setUserNumber(response.nomor);
   }

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/Profile/AvatarAndBackground.tsx

@@ -1,4 +1,5 @@
-import { AvatarCustom, ClickableCustom } from "@/components";
+import { AvatarComp, ClickableCustom } from "@/components";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
 import { AccentColor } from "@/constants/color-palet";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { router } from "expo-router";
@@ -22,24 +23,19 @@ const AvatarAndBackground = ({
         }}
       >
         <ImageBackground
-          source={DUMMY_IMAGE.background}
+          source={
+            backgroundId
+              ? { uri: API_STRORAGE.GET({ fileId: backgroundId }) }
+              : DUMMY_IMAGE.background
+          }
           style={styles.backgroundImage}
           resizeMode="cover"
         />
       </ClickableCustom>
 
       {/* Avatar yang sedikit keluar */}
-
       <View style={styles.avatarOverlap}>
-        <ClickableCustom
+        <AvatarComp size="lg" fileId={imageId} />
-          onPress={() => {
-            router.navigate(
-              `/(application)/(image)/preview-image/${imageId}`
-            );
-          }}
-        >
-          <AvatarCustom source={DUMMY_IMAGE.avatar} size="lg" />
-        </ClickableCustom>
       </View>
     </View>
   );

screens/Profile/ListPage.tsx

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

@@ -4,5 +4,25 @@ export async function apiCreateProfile(data: any) {
   const response = await apiConfig.post(`/mobile/profile`, {
     data: data,
   });
- return response;
+  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,
+  category,
+}: {
+  id: string;
+  data: any;
+  category: "profile" | "photo" | "background";
+}) {
+  const response = await apiConfig.put(`/mobile/profile/${id}?category=${category}`, {
+    data: data,
+  });
+  return response.data;
 }

service/api-client/api-user.ts

@@ -1,7 +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-client/api-validation.ts

@@ -0,0 +1,8 @@
+import { apiConfig } from "../api-config";
+
+export async function apiValidationEmail({ email }: { email: string }) {
+  const response = await apiConfig.post(`/mobile/validate/email`, {
+    data: email,
+  });
+  return response.data;
+}

service/api-config.ts

@@ -1,23 +1,16 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import axios, { AxiosInstance } from "axios";
 import Constants from "expo-constants";
-const API_BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL;
+export const API_BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL;
 
 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
-// ];
 
 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;
@@ -36,7 +29,6 @@ apiConfig.interceptors.request.use(
 export async function apiVersion() {
   // console.log("API_BASE_URL", API_BASE_URL);
   const response = await apiConfig.get("/version");
-  // console.log("Response version", JSON.stringify(response.data, null, 2));
   return response.data;
 }
 

service/upload-service.ts

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { API_BASE_URL, apiConfig } from "@/service/api-config";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import axios from "axios";
+import Toast from "react-native-toast-message";
+
+export async function uploadImageService({
+  dirId,
+  imageUri,
+}: {
+  dirId: string;
+  imageUri: string | null;
+}) {
+  const token = await AsyncStorage.getItem("authToken");
+  const url = `${API_BASE_URL}/mobile/upload`;
+
+  console.log("url >>", url);
+
+  if (!imageUri) {
+    Toast.show({
+      type: "error",
+      text1: "Gagal",
+      text2: "Harap pilih gambar terlebih dahulu",
+    });
+    return;
+  }
+
+  try {
+    const uri = imageUri;
+    const filename = uri.split("/").pop();
+    const match = /\.(\w+)$/.exec(filename || "");
+    const type = match ? `image/${match[1]}` : "image";
+
+    const formData = new FormData();
+    // @ts-ignore: React Native tidak mengenal Blob secara langsung
+    formData.append("file", {
+      uri,
+      name: filename,
+      type,
+    });
+    formData.append("dirId", dirId);
+
+    console.log("Form data >>", JSON.stringify(formData, null, 2));
+
+    const response = await axios.post(url, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+      },
+      // timeout: 30000,
+    });
+
+    const { data } = response;
+    console.log("response upload >>", JSON.stringify(data, null, 2));
+
+    if (!data.success) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: data.message,
+      });
+
+      return;
+    }
+
+    // Toast.show({
+    //   type: "success",
+    //   text1: "File berhasil diunggah",
+    // });
+
+    return data;
+  } catch (error) {
+    Toast.show({
+      type: "error",
+      text1: "File gagal diunggah",
+    });
+  }
+}

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;
+  id?: string;
-  username: string;
+  username?: string;
-  nomor: string;
+  nomor?: string;
-  active: boolean;
+  active?: boolean;
-  createdAt: string | null;
+  createdAt?: string | null;
-  updatedAt: string | null;
+  updatedAt?: string | null;
-  masterUserRoleId: string;
+  masterUserRoleId?: string;
-  MasterUserRole: IMasterUserRole;
+  MasterUserRole?: IMasterUserRole;
 }

utils/pickImage.ts

@@ -0,0 +1,53 @@
+import * as ImagePicker from "expo-image-picker";
+import { Alert } from "react-native";
+
+// Daftar ekstensi yang diperbolehkan
+const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"];
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export default async function pickImage({setImageUri}: {setImageUri: (uri: string) => void}) {
+  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+  if (status !== "granted") {
+    Alert.alert(
+      "Permission Denied",
+      "You need to grant permission to access your media library"
+    );
+    return;
+  }
+
+  const result = await ImagePicker.launchImageLibraryAsync({
+    mediaTypes: ImagePicker.MediaTypeOptions.Images,
+    allowsEditing: true,
+    aspect: [4, 3],
+    quality: 1,
+  });
+
+  if (result.canceled || !result.assets[0]?.uri) {
+    return;
+  }
+
+  const uri = result.assets[0].uri;
+  const filename = uri.split("/").pop()?.toLowerCase() || "";
+  const match = /\.(\w+)$/.exec(filename);
+  const extension = match ? match[1] : "";
+
+  // Validasi ekstensi
+  if (!extension || !ALLOWED_EXTENSIONS.includes(extension)) {
+    Alert.alert(
+      "File Tidak Valid",
+      "Hanya file JPG, JPEG, dan PNG yang diperbolehkan."
+    );
+    return;
+  }
+
+  // Opsional: Validasi ukuran file (jika metadata tersedia)
+  // Catatan: Di Expo, `file.size` mungkin tidak tersedia di semua platform
+  const asset = result.assets[0];
+  if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+    Alert.alert("File Terlalu Besar", "Ukuran file maksimal adalah 5MB.");
+    return;
+  }
+
+  // Jika lolos validasi, simpan URI
+  setImageUri(uri);
+}