API Portofolio

Fix:
- edit select sub bidang

### NO Issue

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
@@ -8,29 +9,40 @@ 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 { apiVersion } from "@/service/api-config";
 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>({});
+  const { token, user } = useAuth();
+
+  const [data, setData] = useState<any>();
 
   useEffect(() => {
     onLoadData();
+    checkVersion();
   }, []);
 
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
-    console.log("User >>", JSON.stringify(response.data, null, 2));
+    console.log("Response profile >>", JSON.stringify(response?.data?.Profile, null, 2));
+
     setData(response.data);
   }
 
+  const checkVersion = async () => {
+    const response = await apiVersion();
+    console.log("Version >>", JSON.stringify(response.data, null, 2));
+  };
+
   if (data && data?.active === false) {
+    console.log("User is not active");
     return <Redirect href={`/waiting-room`} />;
   }
 
   if (data && data?.Profile === null) {
+    console.log("Profile is null");
     return <Redirect href={`/profile/create`} />;
   }
 
@@ -38,7 +50,7 @@ export default function Application() {
     <>
       <Stack.Screen
         options={{
-          title: "HIPMI",
+          title: `HIPMI`,
           headerLeft: () => (
             <Ionicons
               name="search"

app/(application)/(user)/maps/index.tsx

@@ -1,9 +1,19 @@
 import { MapCustom, ViewWrapper } from "@/components";
+import { View } from "react-native";
+import MapView from "react-native-maps";
 
 export default function Maps() {
   return (
     <ViewWrapper style={{ paddingInline: 0, paddingBlock: 0 }}>
-      <MapCustom height={"100%"} />
+      {/* <MapCustom height={"100%"} /> */}
+      <View style={{ flex: 1 }}>
+        <MapView
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      </View>
     </ViewWrapper>
   );
 }

app/(application)/(user)/portofolio/[id]/create.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
+  ActionIcon,
   AvatarComp,
   BaseBox,
   ButtonCenteredOnly,
   CenterCustom,
+  Grid,
   InformationBox,
   SelectCustom,
   Spacing,
@@ -13,7 +15,9 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import { IconPlus } from "@/components/_Icon";
 import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import Portofolio_ButtonCreate from "@/screens/Portofolio/ButtonCreatePortofolio";
 import {
@@ -25,10 +29,12 @@ import {
   IMasterSubBidangBisnis,
 } from "@/types/Type-Master";
 import pickImage from "@/utils/pickImage";
+import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
+import _ from "lodash";
 import { useEffect, useState } from "react";
-import { Text, View } from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import { Avatar } from "react-native-paper";
 
@@ -39,7 +45,6 @@ export default function PortofolioCreate() {
   const [data, setData] = useState({
     namaBisnis: "",
     masterBidangBisnisId: "",
-    // sub_bidang_usaha: "",
     alamatKantor: "",
     tlpn: "",
     deskripsi: "",
@@ -47,12 +52,11 @@ export default function PortofolioCreate() {
   const [imageUri, setImageUri] = useState<string | null>(null);
 
   const [bidangBisnis, setBidangBisnis] = useState<IMasterBidangBisnis[]>([]);
-  const [selectBidangId, setSelectBidangId] = useState<string>("");
   const [subBidangBisnis, setSubBidangBisnis] = useState<
     IMasterSubBidangBisnis[]
   >([]);
 
-  // const [subBidangSelected, setSubBidangSelected] = useState<string[]>([]);
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
   const [listSubBidangSelected, setListSubBidangSelected] = useState([
     {
       id: "",
@@ -67,6 +71,8 @@ export default function PortofolioCreate() {
     tiktok: "",
   });
 
+  const [isLoadingCreate, setIsLoadingCreate] = useState(false);
+
   function handleInputValue(phoneNumber: string) {
     setInputValue(phoneNumber);
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
@@ -81,6 +87,7 @@ export default function PortofolioCreate() {
 
   useEffect(() => {
     onLoadMaster();
+    onLoadMasterSubBidangBisnis();
   }, []);
 
   const onLoadMaster = async () => {
@@ -93,15 +100,23 @@ export default function PortofolioCreate() {
     }
   };
 
-  const onLoadMasterSubBidangBisnis = async ({ id }: { id: string }) => {
+  const onLoadMasterSubBidangBisnis = async () => {
     try {
-      const response = await apiMasterSubBidangBisnis({ id: id });
+      const response = await apiMasterSubBidangBisnis({});
       setSubBidangBisnis(response.data);
     } catch (error) {
+      setSubBidangBisnis([]);
       console.log("Error onLoadMasterBidangBisnis", error);
     }
   };
 
+  const handlerSelectedSubBidang = ({ id }: { id: string }) => {
+    const selectedList = subBidangBisnis?.filter(
+      (item) => (item?.masterBidangBisnisId as any) === id
+    );
+    setSelectedSubBidang(selectedList as any[]);
+  };
+
   return (
     <ViewWrapper
       footerComponent={
@@ -111,6 +126,8 @@ export default function PortofolioCreate() {
           dataMedsos={dataMedsos}
           imageUri={imageUri}
           subBidangSelected={listSubBidangSelected}
+          isLoadingCreate={isLoadingCreate}
+          setIsLoadingCreate={setIsLoadingCreate}
         />
       }
     >
@@ -133,45 +150,100 @@ export default function PortofolioCreate() {
           }))}
           value={data.masterBidangBisnisId}
           onChange={(value) => {
+            const isSameBidang = data.masterBidangBisnisId === value;
+
+            if (!isSameBidang) {
+              setListSubBidangSelected([{ id: "" }]);
+            }
+
             setData({ ...(data as any), masterBidangBisnisId: value });
-            setSelectBidangId(id as string);
-            onLoadMasterSubBidangBisnis({ id: value as string });
+            handlerSelectedSubBidang({ id: value as string });
           }}
         />
 
-        {/* {listSubBidangSelected.map((item, index) => (
-          <Grid key={index}>
-            <Grid.Col span={10}>
-              <SelectCustom
-                disabled={selectBidangId === ""}
-                label="Sub Bidang Usaha"
-                required
-                data={subBidangBisnis.map((item) => ({
-                  label: item.name,
-                  value: item.id,
-                }))}
-                value={data.sub_bidang_usaha}
-                onChange={(value) => {
-                  setData({ ...(data as any), sub_bidang_usaha: value });
-                  setListSubBidangSelected([
-                    ...listSubBidangSelected,
-                    { id: value as string },
-                  ]);
-                }}
-              />
-            </Grid.Col>
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "center", justifyContent: "center" }}
-            >
-              <TouchableOpacity onPress={() => console.log("delete")}>
-                <Ionicons name="trash" size={24} color={MainColor.red} />
-              </TouchableOpacity>
-            </Grid.Col>
-          </Grid>
+        {listSubBidangSelected.map((item, index) => (
+          <SelectCustom
+            key={index}
+            disabled={data.masterBidangBisnisId === ""}
+            label="Sub Bidang Usaha"
+            required
+            data={_.map(selectedSubBidang as any)
+              .filter((option: any) => {
+                const selectedValues = listSubBidangSelected.map((s) => s.id);
+                return (
+                  option.id === item.id || // biarkan tetap muncul kalau ini valuenya sendiri
+                  !selectedValues.includes(option.id)
+                );
+              })
+              .map((e: any) => ({
+                value: e.id,
+                label: e.name,
+              }))}
+            value={item.id || null}
+            onChange={(value) => {
+              const list = _.clone(listSubBidangSelected);
+              list[index].id = value as any;
+              setListSubBidangSelected(list);
+            }}
+          />
         ))}
 
-        <ButtonCenteredOnly
+        <CenterCustom>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+            <ActionIcon
+              disabled={
+                selectedSubBidang.length === listSubBidangSelected.length
+              }
+              onPress={() => {
+                setListSubBidangSelected([
+                  ...listSubBidangSelected,
+                  { id: "" },
+                ]);
+              }}
+              icon={
+                <Ionicons
+                  name="add-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+            <ActionIcon
+              disabled={listSubBidangSelected.length <= 1}
+              onPress={() => {
+                const list = _.clone(listSubBidangSelected);
+                list.pop();
+                setListSubBidangSelected(list);
+              }}
+              icon={
+                <Ionicons
+                  name="remove-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+          </View>
+        </CenterCustom>
+        <Spacing />
+
+        {/* <SelectCustom
+          label="Bidang Usaha"
+          required
+          data={bidangBisnis.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          value={null}
+          onChange={(value) => {
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
+          }}
+        /> */}
+
+        {/* <ButtonCenteredOnly
           onPress={() => {
             setListSubBidangSelected([...listSubBidangSelected, { id: "" }]);
           }}
@@ -220,7 +292,7 @@ export default function PortofolioCreate() {
           maxRows={5}
           required
           showCount
-          maxLength={100}
+          maxLength={1000}
         />
         <Spacing />
 

app/(application)/(user)/portofolio/[id]/edit-logo.tsx

@@ -1,25 +1,125 @@
 import {
-  AvatarCustom,
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+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 { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
+import { uploadImageService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { Image } from "expo-image";
 import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function PortofolioEditLogo() {
   const { id } = useLocalSearchParams();
+  const [logoId, setLogoId] = useState<any>();
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
+
+  useEffect(() => {
+    onLoadData(id as string);
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+    console.log(
+      "Response portofolio >>",
+      JSON.stringify(response.data.logoId, null, 2)
+    );
+    setLogoId(response.data.logoId);
+  };
+
+  async function onUpload() {
+    try {
+      setIsLoading(true);
+
+      const response = await uploadImageService({
+        imageUri,
+        dirId: DIRECTORY_ID.portofolio_logo,
+      });
+
+      if (response.success) {
+        const fileId = response.data.id;
+        const responseUpdate = await apiUpdatePortofolio({
+          id: id as string,
+          data: { fileId },
+          category: "logo",
+        });
+
+        if (!responseUpdate.success) {
+          Toast.show({
+            type: "error",
+            text1: "Info",
+            text2: responseUpdate.message,
+          });
+          return;
+        }
+
+        if (logoId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: logoId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
+        Toast.show({
+          type: "success",
+          text1: "Sukses",
+          text2: "Logo berhasil diupdate",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: error as string,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  const image = imageUri ? (
+    <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
+  ) : (
+    <Image
+      source={
+        logoId
+          ? { uri: API_STRORAGE.GET({ fileId: logoId }) }
+          : DUMMY_IMAGE.avatar
+      }
+      style={{ width: 200, height: 200 }}
+    />
+  );
 
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
+        disabled={isLoading}
         onPress={() => {
-          console.log("Simpan logo ");
-          router.back();
+          onUpload();
         }}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
@@ -34,13 +134,17 @@ export default function PortofolioEditLogo() {
             height: 250,
           }}
         >
-          <AvatarCustom size="xl" />
+          {image}
         </BaseBox>
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.navigate(`/take-picture/${id}`)}
+          onPress={() => {
+            pickImage({
+              setImageUri,
+            });
+          }}
         >
-          Update
+          Upload
         </ButtonCenteredOnly>
       </ViewWrapper>
     </>

app/(application)/(user)/portofolio/[id]/edit-social-media.tsx

@@ -4,20 +4,87 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
 import { useLocalSearchParams, router } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function PortofolioEditSocialMedia() {
   const { id } = useLocalSearchParams();
+  console.log("ID >>", id);
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<any>({
+    facebook: "",
+    twitter: "",
+    instagram: "",
+    tiktok: "",
+    youtube: "",
+  });
+
+  useEffect(() => {
+    onLoadData(id as string);
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+    console.log(
+      "Response portofolio >>",
+      JSON.stringify(response.data.Portofolio_MediaSosial, null, 2)
+    );
+    const data = response.data.Portofolio_MediaSosial;
+    setData({
+      facebook: data.facebook,
+      twitter: data.twitter,
+      instagram: data.instagram,
+      tiktok: data.tiktok,
+      youtube: data.youtube,
+    });
+  };
+
+  const onSubmitUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiUpdatePortofolio({
+        id: id as string,
+        data: data,
+        category: "medsos",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Data media terupdate",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("Error onSubmitUpdate", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => {
-          console.log(`Simpan sosmed ${id}`);
-          router.back();
-        }}
+        isLoading={isLoading}
+        disabled={isLoading}
+        onPress={onSubmitUpdate}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
@@ -25,11 +92,36 @@ export default function PortofolioEditSocialMedia() {
   return (
     <>
       <ViewWrapper footerComponent={buttonFooter}>
-        <TextInputCustom label="Tiktok" placeholder="Masukkan tiktok" />
-        <TextInputCustom label="Instagram" placeholder="Masukkan instagram" />
-        <TextInputCustom label="Facebook" placeholder="Masukkan facebook" />
-        <TextInputCustom label="Twitter" placeholder="Masukkan twitter" />
-        <TextInputCustom label="Youtube" placeholder="Masukkan youtube" />
+        <TextInputCustom
+          value={data.tiktok}
+          onChangeText={(value) => setData({ ...data, tiktok: value })}
+          label="Tiktok"
+          placeholder="Masukkan tiktok"
+        />
+        <TextInputCustom
+          value={data.instagram}
+          onChangeText={(value) => setData({ ...data, instagram: value })}
+          label="Instagram"
+          placeholder="Masukkan instagram"
+        />
+        <TextInputCustom
+          value={data.facebook}
+          onChangeText={(value) => setData({ ...data, facebook: value })}
+          label="Facebook"
+          placeholder="Masukkan facebook"
+        />
+        <TextInputCustom
+          value={data.twitter}
+          onChangeText={(value) => setData({ ...data, twitter: value })}
+          label="Twitter"
+          placeholder="Masukkan twitter"
+        />
+        <TextInputCustom
+          value={data.youtube}
+          onChangeText={(value) => setData({ ...data, youtube: value })}
+          label="Youtube"
+          placeholder="Masukkan youtube"
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/portofolio/[id]/edit.back.txt

@@ -0,0 +1,357 @@
+import {
+  ActionIcon,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  CenterCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import Toast from "react-native-toast-message";
+
+interface IFormData {
+  id_Portofolio: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripsi: string;
+  masterBidangBisnisId: string;
+  subBidang: any[];
+}
+
+interface IListSubBidangSelected {
+  id: string;
+  MasterSubBidangBisnis: {
+    id: string;
+    name: string;
+    masterBidangBisnisId: string;
+  };
+}
+
+export default function PortofolioEdit() {
+  const { id } = useLocalSearchParams();
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<any>({});
+
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [bidangBisnis, setBidangBisnis] = useState<IMasterBidangBisnis[]>([]);
+  const [subBidangBisnis, setSubBidangBisnis] = useState<
+    IMasterSubBidangBisnis[]
+  >([]);
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
+  const [listSubBidangSelected, setListSubBidangSelected] = useState<
+    IListSubBidangSelected[]
+  >([
+    {
+      id: "",
+      MasterSubBidangBisnis: {
+        id: "",
+        name: "",
+        masterBidangBisnisId: "",
+      },
+    },
+  ]);
+
+  function handleInputValue(phoneNumber: string) {
+    setData({ ...data, tlpn: phoneNumber });
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  useEffect(() => {
+    onLoadData(id as string);
+    onLoadMasterBidang();
+    onLoadMasterSubBidangBisnis();
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+
+    if (response.data.tlpn && response.data.tlpn.includes("62")) {
+      const fixNumber = response.data.tlpn.replace("62", "");
+
+      setData({ ...response.data, tlpn: fixNumber });
+    }
+  };
+
+  const onLoadMasterBidang = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  async function onLoadMasterSubBidangBisnis() {
+    try {
+      const response = await apiMasterSubBidangBisnis({});
+
+      if (response.success) {
+        setSubBidangBisnis(response.data);
+      }
+    } catch (error) {
+      console.error("Error on load master sub bidang bisnis", error);
+    }
+  }
+
+  const handleSubmitUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+      const fixNumber = data.tlpn.replace(/\s+/g, "");
+      const realNumber = callingCode + fixNumber;
+
+      const newData: IFormData = {
+        id_Portofolio: data.id_Portofolio,
+        namaBisnis: data.namaBisnis,
+        alamatKantor: data.alamatKantor,
+        tlpn: realNumber,
+        deskripsi: data.deskripsi,
+        masterBidangBisnisId: data.masterBidangBisnisId,
+        subBidang: listSubBidangSelected,
+      };
+
+      const response = await apiUpdatePortofolio({
+        id: id as string,
+        data: newData,
+        category: "detail",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Data terupdate",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("Error handleSubmitUpdate", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonUpdate = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={isLoading}
+        onPress={handleSubmitUpdate}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonUpdate}>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            required
+            label="Nama Bisnis"
+            placeholder="Masukkan nama bisnis"
+            value={data.namaBisnis}
+            onChangeText={(value: any) =>
+              setData({ ...data, namaBisnis: value })
+            }
+          />
+
+          <SelectCustom
+            label="Bidang Usaha"
+            required
+            data={bidangBisnis?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data.masterBidangBisnisId}
+            onChange={(value) => {
+              setData({ ...(data as any), masterBidangBisnisId: value });
+            }}
+          />
+
+          {listSubBidangSelected.map((item, index) => (
+            <SelectCustom
+              key={index}
+              label="Sub Bidang Usaha"
+              required
+              data={subBidangBisnis?.map((item) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={item.id || null}
+              onChange={(value) => {
+                console.log("Value >>", value);
+              }}
+            />
+          ))}
+
+          <CenterCustom>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+            >
+              <ActionIcon
+                // disabled={
+                //   selectedSubBidang.length === listSubBidangSelected.length
+                // }
+                onPress={() => {
+                  setListSubBidangSelected([
+                    ...listSubBidangSelected,
+                    {
+                      id: "",
+                      MasterSubBidangBisnis: {
+                        id: "",
+                        name: "",
+                        masterBidangBisnisId: "",
+                      },
+                    },
+                  ]);
+                }}
+                icon={
+                  <Ionicons
+                    name="add-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+              <ActionIcon
+                // disabled={listSubBidangSelected.length <= 1}
+                onPress={() => {
+                  const list = _.clone(listSubBidangSelected);
+                  list.pop();
+                  setListSubBidangSelected(list);
+                }}
+                icon={
+                  <Ionicons
+                    name="remove-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+            </View>
+          </CenterCustom>
+          <Spacing />
+
+          {/* <Grid>
+            <Grid.Col span={10}>
+              <SelectCustom
+                // disabled
+                label="Sub Bidang Usaha"
+                required
+                data={dummyMasterSubBidangBisnis.map((item) => ({
+                  label: item.name,
+                  value: item.id,
+                }))}
+                value={data.masterSubBidangBisnisId}
+                onChange={(value) => {
+                  setData({ ...(data as any), masterSubBidangBisnisId: value });
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col
+              span={2}
+              style={{ alignItems: "center", justifyContent: "center" }}
+            >
+              <TouchableOpacity onPress={() => console.log("delete")}>
+                <Ionicons name="trash" size={24} color={MainColor.red} />
+              </TouchableOpacity>
+            </Grid.Col>
+          </Grid> */}
+          {/* <ButtonCenteredOnly onPress={() => console.log("add")}>
+            Tambah Pilihan
+          </ButtonCenteredOnly>
+          <Spacing /> */}
+
+          <View>
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+                Nomor Telepon
+              </TextCustom>
+              <Text style={{ color: "red" }}> *</Text>
+            </View>
+            <Spacing height={5} />
+            <PhoneInput
+              value={data.tlpn}
+              onChangePhoneNumber={handleInputValue}
+              selectedCountry={selectedCountry}
+              onChangeSelectedCountry={handleSelectedCountry}
+              defaultCountry="ID"
+              placeholder="xxx-xxx-xxx"
+            />
+          </View>
+          <Spacing />
+
+          <TextInputCustom
+            required
+            label="Alamat Bisnis"
+            placeholder="Masukkan alamat bisnis"
+            value={data.alamatKantor}
+            onChangeText={(value: any) =>
+              setData({ ...data, alamatKantor: value })
+            }
+          />
+
+          <TextAreaCustom
+            label="Deskripsi Bisnis"
+            placeholder="Masukkan deskripsi bisnis"
+            value={data.deskripsi}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
+            autosize
+            minRows={2}
+            maxRows={5}
+            required
+            showCount
+            maxLength={1000}
+          />
+          <Spacing />
+
+          <TextCustom>{JSON.stringify(subBidangBisnis, null, 2)}</TextCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -1,57 +1,289 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BoxButtonOnFooter,
-    ButtonCenteredOnly,
-    ButtonCustom,
-    Grid,
-    SelectCustom,
-    Spacing,
-    StackCustom,
-    TextAreaCustom,
-    TextCustom,
-    TextInputCustom,
-    ViewWrapper,
+  ActionIcon,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  CenterCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import dummyMasterBidangBisnis from "@/lib/dummy-data/master-bidang-bisnis";
-import dummyMasterSubBidangBisnis from "@/lib/dummy-data/master-sub-bidang-bisnis";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
 import { Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import { ActivityIndicator } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+interface IFormData {
+  id_Portofolio: string;
+  namaBisnis: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripsi: string;
+  masterBidangBisnisId: string;
+  subBidang: any[];
+}
+
+interface IListSubBidangSelected {
+  id: string;
+  MasterSubBidangBisnis?: {
+    id?: string;
+    name?: string;
+    masterBidangBisnisId?: string;
+  };
+}
 
 export default function PortofolioEdit() {
   const { id } = useLocalSearchParams();
-  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
-  const [inputValue, setInputValue] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<any>({});
 
-  const [data, setData] = useState({
-    namaBisnis: "",
-    bidang_usaha: "",
-    sub_bidang_usaha: "",
-    alamat: "",
-    nomor_telepon: "",
-    deskripsi: "",
-  });
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [bidangBisnis, setBidangBisnis] = useState<
+    IMasterBidangBisnis[] | null
+  >(null);
+  const [subBidangBisnis, setSubBidangBisnis] = useState<
+    IMasterSubBidangBisnis[] | null
+  >(null);
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
+  const [listSubBidangSelected, setListSubBidangSelected] = useState<
+    IListSubBidangSelected[]
+  >([]);
 
   function handleInputValue(phoneNumber: string) {
-    setInputValue(phoneNumber);
+    setData({ ...data, tlpn: phoneNumber });
   }
 
   function handleSelectedCountry(country: ICountry) {
     setSelectedCountry(country);
   }
 
-  function handleSave() {
-    console.log(`Update portofolio berhasil ${id}`);
-    router.back();
+  const onLoadMasterBidang = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+
+      return response.success;
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  async function onLoadMasterSubBidangBisnis() {
+    try {
+      const response = await apiMasterSubBidangBisnis({});
+      setSubBidangBisnis(response.data);
+
+      return response.success;
+    } catch (error) {
+      console.error("Error on load master sub bidang bisnis", error);
+    }
   }
 
+  const handleLoadMaster = async (id: string) => {
+    const loadBidang = await onLoadMasterBidang();
+    const loadSubBidang = await onLoadMasterSubBidangBisnis();
+
+    if (!loadBidang || !loadSubBidang) {
+      return;
+    }
+
+    onLoadData(id);
+  };
+
+  useEffect(() => {
+    handleLoadMaster(id as any);
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    const response = await apiGetOnePortofolio({ id: id });
+
+    if (response.success) {
+      const fixNumber = response.data.tlpn.replace("62", "");
+      setData({ ...response.data, tlpn: fixNumber });
+
+      // Cek apakah ada sub bidang bisnis yang terpilih
+      const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
+      if (prevSubBidang && prevSubBidang.length > 0) {
+        setListSubBidangSelected(prevSubBidang);
+      } else {
+        // Jika tidak ada sub bidang yang terpilih sebelumnya, tetap inisialisasi dengan array kosong
+        setListSubBidangSelected([
+          {
+            id: "",
+            MasterSubBidangBisnis: {
+              id: "",
+              name: "",
+            },
+          },
+        ]);
+      }
+
+      const bisnisId = response.data.masterBidangBisnisId;
+      handleLoadSelectedSubBidang({
+        id: bisnisId,
+      });
+    }
+  };
+
+  // Handler untuk saat komponen pertama kali load
+  const handleLoadSelectedSubBidang = ({ id }: { id: string }) => {
+    if (!subBidangBisnis) return;
+
+    const filteredSubBidang: any = subBidangBisnis.filter((item) => {
+      return item.masterBidangBisnisId === id;
+    });
+    setSelectedSubBidang(filteredSubBidang);
+  };
+
+  // Handler untuk menambah sub bidang bisnis
+  const handleAddSubBidang = () => {
+    setListSubBidangSelected([
+      ...listSubBidangSelected,
+      {
+        id: "",
+        MasterSubBidangBisnis: { id: "", name: "" },
+      },
+    ]);
+  };
+
+  // Handler untuk menghapus sub bidang bisnis
+  const handleRemoveSubBidang = (index: number) => {
+    if (listSubBidangSelected.length <= 1) return;
+
+    const updatedList = [...listSubBidangSelected];
+    updatedList.splice(index, 1);
+    setListSubBidangSelected(updatedList);
+  };
+
+  // Handler untuk perubahan bidang bisnis
+  const handleBidangBisnisChange = (val: string) => {
+    const isSameBidang = data?.MasterBidangBisnis?.id === val;
+
+    setData({ ...(data as any), masterBidangBisnisId: val });
+
+    // Reset sub bidang jika ganti bidang
+    if (!isSameBidang) {
+      setListSubBidangSelected([
+        {
+          id: "",
+          MasterSubBidangBisnis: { id: "", name: "" },
+        },
+      ]);
+    }
+
+    handleLoadSelectedSubBidang({ id: val });
+  };
+
+  // Handler untuk update sub bidang
+  const handleSubBidangChange = (value: string, index: number) => {
+    const select = selectedSubBidang.find((sub: any) => sub.id === value);
+    const list: any = _.cloneDeep(listSubBidangSelected);
+    list[index] = {
+      id: "",
+      MasterSubBidangBisnis: select || {
+        id: value,
+        name: "",
+        masterBidangBisnisId: "",
+      },
+    };
+    setListSubBidangSelected(list);
+  };
+
+  useEffect(() => {
+    if (subBidangBisnis?.length !== undefined && data.masterBidangBisnisId) {
+      handleLoadSelectedSubBidang({
+        id: data.masterBidangBisnisId,
+      });
+    }
+  }, [subBidangBisnis, data.masterBidangBisnisId]);
+
+  const handleSubmitUpdate = async () => {
+    console.log("LIST >>", JSON.stringify(listSubBidangSelected, null, 2));
+    // try {
+    //   setIsLoading(true);
+    //   const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    //   const fixNumber = data.tlpn.replace(/\s+/g, "");
+    //   const realNumber = callingCode + fixNumber;
+
+    //   const newData: IFormData = {
+    //     id_Portofolio: data.id_Portofolio,
+    //     namaBisnis: data.namaBisnis,
+    //     alamatKantor: data.alamatKantor,
+    //     tlpn: realNumber,
+    //     deskripsi: data.deskripsi,
+    //     masterBidangBisnisId: data.masterBidangBisnisId,
+    //     subBidang: listSubBidangSelected,
+    //   };
+
+    //   const response = await apiUpdatePortofolio({
+    //     id: id as string,
+    //     data: newData,
+    //     category: "detail",
+    //   });
+
+    //   if (!response.success) {
+    //     Toast.show({
+    //       type: "info",
+    //       text1: "Info",
+    //       text2: response.message,
+    //     });
+
+    //     return;
+    //   }
+
+    //   Toast.show({
+    //     type: "success",
+    //     text1: "Sukses",
+    //     text2: "Data terupdate",
+    //   });
+
+    //   router.back();
+    // } catch (error) {
+    //   console.log("Error handleSubmitUpdate", error);
+    // } finally {
+    //   setIsLoading(false);
+    // }
+  };
+
   const buttonUpdate = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleSave}>Simpan</ButtonCustom>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={isLoading}
+        onPress={handleSubmitUpdate}
+      >
+        Update
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
+  if (!bidangBisnis || !subBidangBisnis) {
+    return <ActivityIndicator size="large" color={MainColor.yellow} />;
+  }
+
   return (
     <>
       <ViewWrapper footerComponent={buttonUpdate}>
@@ -60,22 +292,99 @@ export default function PortofolioEdit() {
             required
             label="Nama Bisnis"
             placeholder="Masukkan nama bisnis"
+            value={data.namaBisnis}
+            onChangeText={(value: any) =>
+              setData({ ...data, namaBisnis: value })
+            }
           />
 
           <SelectCustom
             label="Bidang Usaha"
             required
-            data={dummyMasterBidangBisnis.map((item) => ({
+            data={bidangBisnis?.map((item) => ({
               label: item.name,
               value: item.id,
             }))}
-            value={data.bidang_usaha}
-            onChange={(value) => {
-              setData({ ...(data as any), bidang_usaha: value });
+            value={data.masterBidangBisnisId}
+            onChange={(value: any) => {
+              handleBidangBisnisChange(value);
             }}
           />
 
-          <Grid>
+          {listSubBidangSelected.map((item, index) => {
+            // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
+            const selectedIds = listSubBidangSelected
+              .filter((_, i) => i !== index)
+              .map((s) => s.MasterSubBidangBisnis?.id)
+              .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
+
+            const availableSubBidangOptions = (selectedSubBidang || [])
+              .filter((sub: any) => {
+                // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
+
+                return (
+                  sub.id === item.MasterSubBidangBisnis?.id ||
+                  !selectedIds.includes(sub.id)
+                );
+              })
+              .map((sub: any) => ({
+                value: sub.id,
+                label: sub.name,
+              }));
+
+            return (
+              <SelectCustom
+                key={index}
+                label="Sub Bidang Usaha"
+                required
+                data={availableSubBidangOptions}
+                value={item.MasterSubBidangBisnis?.id || null}
+                onChange={(value: any) => {
+                  handleSubBidangChange(value, index);
+                }}
+              />
+            );
+          })}
+
+          <CenterCustom>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+            >
+              <ActionIcon
+                disabled={
+                  selectedSubBidang.length === listSubBidangSelected.length
+                }
+                onPress={() => {
+                  handleAddSubBidang();
+                }}
+                icon={
+                  <Ionicons
+                    name="add-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+              <ActionIcon
+                disabled={listSubBidangSelected.length <= 1}
+                onPress={() => {
+                  handleRemoveSubBidang(listSubBidangSelected.length - 1);
+                }}
+                icon={
+                  <Ionicons
+                    name="remove-circle-outline"
+                    size={ICON_SIZE_XLARGE}
+                    color={MainColor.black}
+                  />
+                }
+                size="xl"
+              />
+            </View>
+          </CenterCustom>
+          <Spacing />
+
+          {/* <Grid>
             <Grid.Col span={10}>
               <SelectCustom
                 // disabled
@@ -85,9 +394,9 @@ export default function PortofolioEdit() {
                   label: item.name,
                   value: item.id,
                 }))}
-                value={data.sub_bidang_usaha}
+                value={data.masterSubBidangBisnisId}
                 onChange={(value) => {
-                  setData({ ...(data as any), sub_bidang_usaha: value });
+                  setData({ ...(data as any), masterSubBidangBisnisId: value });
                 }}
               />
             </Grid.Col>
@@ -99,11 +408,12 @@ export default function PortofolioEdit() {
                 <Ionicons name="trash" size={24} color={MainColor.red} />
               </TouchableOpacity>
             </Grid.Col>
-          </Grid>
-          <ButtonCenteredOnly onPress={() => console.log("add")}>
+          </Grid> */}
+          {/* <ButtonCenteredOnly onPress={() => console.log("add")}>
             Tambah Pilihan
           </ButtonCenteredOnly>
-          <Spacing />
+          <Spacing /> */}
+
           <View>
             <View style={{ flexDirection: "row", alignItems: "center" }}>
               <TextCustom semiBold style={{ color: MainColor.white_gray }}>
@@ -113,7 +423,7 @@ export default function PortofolioEdit() {
             </View>
             <Spacing height={5} />
             <PhoneInput
-              value={inputValue}
+              value={data.tlpn}
               onChangePhoneNumber={handleInputValue}
               selectedCountry={selectedCountry}
               onChangeSelectedCountry={handleSelectedCountry}
@@ -127,6 +437,10 @@ export default function PortofolioEdit() {
             required
             label="Alamat Bisnis"
             placeholder="Masukkan alamat bisnis"
+            value={data.alamatKantor}
+            onChangeText={(value: any) =>
+              setData({ ...data, alamatKantor: value })
+            }
           />
 
           <TextAreaCustom
@@ -141,9 +455,11 @@ export default function PortofolioEdit() {
             maxRows={5}
             required
             showCount
-            maxLength={100}
+            maxLength={1000}
           />
           <Spacing />
+
+          <TextCustom>{JSON.stringify(subBidangBisnis, null, 2)}</TextCustom>
         </StackCustom>
       </ViewWrapper>
     </>

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

@@ -1,4 +1,4 @@
-import { AlertCustom, DrawerCustom, Spacing, StackCustom } from "@/components";
+import { DrawerCustom, Spacing, StackCustom } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
@@ -12,12 +12,7 @@ import Portofolio_SocialMediaSection from "@/screens/Portofolio/SocialMediaSecti
 import { apiGetOnePortofolio } from "@/service/api-client/api-portofolio";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
-import {
-  router,
-  Stack,
-  useFocusEffect,
-  useLocalSearchParams,
-} from "expo-router";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 
@@ -25,7 +20,7 @@ export default function Portofolio() {
   const { id } = useLocalSearchParams();
   const { user } = useAuth();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [isLoadingDelete, setIsLoadingDelete] = useState(false);
   const [data, setData] = useState<any>();
 
   const openDrawer = () => {
@@ -43,12 +38,16 @@ export default function Portofolio() {
 
   async function onLoadData(id: string) {
     const response = await apiGetOnePortofolio({ id: id });
+    // console.log(
+    //   "Response portofolio >>",
+    //   JSON.stringify(response.data, null, 2)
+    // );
 
     setData(response.data);
   }
 
   const userId = user?.id;
-  const userLoginId = data?.Profile?.User?.id;
+  const userLoginId = data?.Profile?.userId
 
   console.log("User ID >>", userId);
   console.log("User Login ID >>", userLoginId);
@@ -76,10 +75,14 @@ export default function Portofolio() {
       <ViewWrapper>
         {/* <PorfofolioSection setShowDeleteAlert={setDeleteAlert} data={data} /> */}
         <StackCustom>
-          <Portofolio_Data data={data} />
+          <Portofolio_Data data={data} listSubBidang={data?.Portofolio_BidangDanSubBidangBisnis as any []} />
           <Portofolio_BusinessLocation />
           <Portofolio_SocialMediaSection data={data?.Portofolio_MediaSosial} />
-          <Portofolio_ButtonDelete setShowDeleteAlert={setDeleteAlert} />
+          <Portofolio_ButtonDelete
+            id={id as string}
+            isLoadingDelete={isLoadingDelete}
+            setIsLoadingDelete={setIsLoadingDelete}
+          />
           <Spacing />
         </StackCustom>
       </ViewWrapper>
@@ -88,29 +91,13 @@ export default function Portofolio() {
       <DrawerCustom
         isVisible={isDrawerOpen}
         closeDrawer={closeDrawer}
-        height={350}
+        height={"auto"}
       >
         <Portofolio_MenuDrawerSection
           drawerItems={drawerItemsPortofolio({ id: id as string })}
           setIsDrawerOpen={setIsDrawerOpen}
         />
       </DrawerCustom>
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        onLeftPress={() => setDeleteAlert(false)}
-        onRightPress={() => {
-          setDeleteAlert(false);
-          console.log("Hapus portofolio");
-          router.back();
-        }}
-        title="Hapus Portofolio"
-        message="Apakah Anda yakin ingin menghapus portofolio ini?"
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

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

@@ -8,6 +8,8 @@ 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 { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
 import { uploadImageService } from "@/service/upload-service";
 import { IProfile } from "@/types/Type-Profile";
@@ -22,6 +24,7 @@ export default function UpdateBackgroundProfile() {
   const [data, setData] = useState<IProfile>();
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
 
   useFocusEffect(
     useCallback(() => {
@@ -32,10 +35,6 @@ export default function UpdateBackgroundProfile() {
   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);
@@ -68,12 +67,23 @@ export default function UpdateBackgroundProfile() {
           return;
         }
 
+        if (data?.imageBackgroundId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: data?.imageBackgroundId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
         Toast.show({
           type: "success",
           text1: "Sukses",
           text2: "Background berhasil diupdate",
         });
-        
+
         router.back();
       }
     } catch (error) {

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

@@ -16,12 +16,15 @@ import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import { Image } from "react-native";
 import Toast from "react-native-toast-message";
+import { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
   const [data, setData] = useState<IProfile>();
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
 
   useFocusEffect(
     useCallback(() => {
@@ -32,6 +35,7 @@ export default function UpdatePhotoProfile() {
   async function onLoadData(id: string) {
     try {
       const response = await apiProfile({ id });
+
       setData(response.data);
     } catch (error) {
       console.log("error get profile >>", error);
@@ -47,8 +51,6 @@ export default function UpdatePhotoProfile() {
         dirId: DIRECTORY_ID.profile_foto,
       });
 
-      console.log("response upload photo>>", JSON.stringify(response, null, 2));
-
       if (response.success) {
         const fileId = response.data.id;
         const responseUpdate = await apiUpdateProfile({
@@ -66,12 +68,23 @@ export default function UpdatePhotoProfile() {
           return;
         }
 
+        if (data?.imageId) {
+          const deletePrevFile = await apiFileDelete({
+            token: token as string,
+            id: data?.imageId as string,
+          });
+
+          if (!deletePrevFile.success) {
+            console.log("error delete prev file >>", deletePrevFile.message);
+          }
+        }
+
         Toast.show({
           type: "success",
           text1: "Sukses",
           text2: "Photo berhasil diupdate",
         });
-        
+
         router.back();
       }
     } catch (error) {

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

@@ -2,7 +2,7 @@
 import { apiConfig } from "@/service/api-config";
 import Toast from "react-native-toast-message";
 
-export async function tryUploadService({
+export default async function tryUploadService({
   dirId,
   imageUri,
 }: {

components/ActionIcon/ActionIcon.tsx

@@ -9,11 +9,13 @@ export default function ActionIcon({
   onPress,
   icon,
   size = "md",
+  disabled = false,
 }: {
   href?: Href;
   onPress?: () => void;
   icon: React.ReactNode;
   size?: SizeType;
+  disabled?: boolean;
 }) {
   const sizeMap = {
     xs: 22,
@@ -25,7 +27,7 @@ export default function ActionIcon({
 
   const getSize = (size: SizeType): DimensionValue => {
     if (!size) return sizeMap.md; // Default to 'md' if size is undefined
-    if (typeof size === 'string' && size in sizeMap) {
+    if (typeof size === "string" && size in sizeMap) {
       return sizeMap[size as keyof typeof sizeMap];
     }
     return size as DimensionValue;
@@ -35,9 +37,10 @@ export default function ActionIcon({
 
   return (
     <TouchableOpacity
+      disabled={disabled}
       activeOpacity={0.7}
       style={{
-        backgroundColor: MainColor.yellow,
+        backgroundColor: disabled ? MainColor.disabled : MainColor.yellow,
         padding: 5,
         borderRadius: 50,
         alignItems: "center",
@@ -46,6 +49,7 @@ export default function ActionIcon({
         height: iconSize,
       }}
       onPress={() => {
+        if (disabled) return;
         if (href) {
           router.push(href);
         } else {

components/Button/ButtonCustom.tsx

@@ -61,7 +61,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
       activeOpacity={0.8}
     >
       {/* Render icon jika tersedia */}
-      {iconLeft && iconLeft}
+      {isLoading ? "" : iconLeft && iconLeft}
       {isLoading ? (
         <ActivityIndicator size={18} color={MainColor.darkblue} />
       ) : (

screens/Authentication/RegisterView.tsx

@@ -14,7 +14,6 @@ import Toast from "react-native-toast-message";
 export default function RegisterView() {
   const { nomor } = useLocalSearchParams();
   const [username, setUsername] = useState("");
-  // const [loading, setLoading] = useState(false);
 
   const { registerUser, isLoading } = useAuth();
 
@@ -22,16 +21,22 @@ export default function RegisterView() {
     if (!nomor) {
       Toast.show({
         type: "error",
-        text1: "Gagal",
-        text2: "Nomor tidak ditemukan",
+        text1: "Lengkapi nomor",
       });
       return false;
     }
     if (!username) {
       Toast.show({
         type: "error",
-        text1: "Gagal",
-        text2: "Username tidak boleh kosong",
+        text1: "Username tidak boleh kosong",
+      });
+      return false;
+    }
+
+    if (username.includes(" ")) {
+      Toast.show({
+        type: "info",
+        text1: "Username tidak boleh mengandung spasi",
       });
       return false;
     }
@@ -42,9 +47,20 @@ export default function RegisterView() {
     const isValid = validasiData();
     if (!isValid) return;
 
+    if (username.length < 5) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Username minimal 5 karakter",
+      });
+      return;
+    }
+
+    const usernameLower = username.toLowerCase();
+
     await registerUser({
       nomor: nomor as string,
-      username: username,
+      username: usernameLower,
     });
   }
 
@@ -73,6 +89,11 @@ export default function RegisterView() {
               placeholder="Masukkan username"
               value={username}
               onChangeText={(text) => setUsername(text)}
+              error={
+                username.includes(" ")
+                  ? "Username tidak boleh mengandung spasi"
+                  : ""
+              }
             />
 
             <ButtonCustom isLoading={isLoading} onPress={handleRegister}>

screens/Portofolio/ButtonCreatePortofolio.tsx

@@ -11,6 +11,8 @@ interface Props {
   dataMedsos: any;
   imageUri: string | null;
   subBidangSelected: any[];
+  isLoadingCreate: boolean;
+  setIsLoadingCreate: (value: boolean) => void;
 }
 
 interface ICreatePortofolio {
@@ -34,9 +36,40 @@ export default function Portofolio_ButtonCreate({
   dataMedsos,
   imageUri,
   subBidangSelected,
+  isLoadingCreate,
+  setIsLoadingCreate,
 }: Props) {
+  const validaasiData = () => {
+    if (
+      !data.namaBisnis ||
+      !data.masterBidangBisnisId ||
+      !data.alamatKantor ||
+      !data.tlpn ||
+      !data.deskripsi ||
+      subBidangSelected.map((item) => item.id).includes("") ||
+      subBidangSelected.map((item) => item.id).includes(null)
+    ) {
+      return false;
+    }
+    return true;
+  };
+
   const handleCreatePortofolio = async () => {
+    console.log(
+      "Data sub bidang >>",
+      JSON.stringify(subBidangSelected, null, 2)
+    );
+    if (!validaasiData()) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap lengkapi data",
+      });
+      return;
+    }
+
     try {
+      setIsLoadingCreate(true);
       let fileId = "";
       if (imageUri) {
         const response = await uploadImageService({
@@ -63,59 +96,37 @@ export default function Portofolio_ButtonCreate({
         youtube: dataMedsos.youtube,
         subBidang: subBidangSelected,
       };
-
-      try {
-        const response = await apiPortofolioCreate({
-          data: newData,
-        });
-        console.log("Response >>", JSON.stringify(response, null, 2));
-        // return router.replace(`/maps/create`);
-        // return router.push(`/maps/create`);
-        return router.back();
-      } catch (error) {
-        throw error;
-      }
+      const response = await apiPortofolioCreate({
+        data: newData,
+      });
+      console.log("Response >>", JSON.stringify(response, null, 2));
+      // return router.replace(`/maps/create`);
+      // return router.push(`/maps/create`);
+      Toast.show({
+        type: "success",
+        text1: "Sukses",
+        text2: "Data berhasil disimpan",
+      });
+      return router.back();
     } catch (error) {
       Toast.show({
         type: "error",
         text1: "Error",
         text2: error as string,
       });
+    } finally {
+      setIsLoadingCreate(false);
     }
   };
 
-  // const onCreatePortofolio = async ({ fileId }: { fileId: string }) => {
-  //   const newData: ICreatePortofolio = {
-  //     namaBisnis: data.namaBisnis,
-  //     masterBidangBisnisId: data.masterBidangBisnisId,
-  //     alamatKantor: data.alamatKantor,
-  //     tlpn: data.tlpn,
-  //     deskripsi: data.deskripsi,
-  //     fileId: fileId,
-  //     facebook: dataMedsos.facebook,
-  //     twitter: dataMedsos.twitter,
-  //     instagram: dataMedsos.instagram,
-  //     tiktok: dataMedsos.tiktok,
-  //     youtube: dataMedsos.youtube,
-  //   };
-
-  //   try {
-  //     const response = await apiPortofolioCreate({
-  //       id: id,
-  //       data: newData,
-  //     });
-  //     console.log("Response >>", JSON.stringify(response, null, 2));
-  //     return response;
-  //   } catch (error) {
-  //     throw error;
-  //   }
-
-  //   // router.replace(`/maps/create`);
-  // };
-
   return (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleCreatePortofolio}>Selanjutnya</ButtonCustom>
+      <ButtonCustom
+        isLoading={isLoadingCreate}
+        onPress={handleCreatePortofolio}
+      >
+        Selanjutnya
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
 }

screens/Portofolio/ButtonDelete.tsx

@@ -1,17 +1,53 @@
-import { ButtonCustom } from "@/components";
+import { AlertDefaultSystem, ButtonCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { Ionicons } from "@expo/vector-icons";
+import { apiDeletePortofolio } from "@/service/api-client/api-portofolio";
+import { router } from "expo-router";
 
 export default function Portofolio_ButtonDelete({
-  setShowDeleteAlert,
+  id,
+  isLoadingDelete,
+  setIsLoadingDelete,
 }: {
-  setShowDeleteAlert: (value: boolean) => void;
+  id: string;
+  isLoadingDelete: boolean;
+  setIsLoadingDelete: (value: boolean) => void;
 }) {
-  const handleDelete = () => {
-    setShowDeleteAlert(true);
+  const handleDelete = async () => {
+    AlertDefaultSystem({
+      title: "Hapus Portofolio",
+      message: "Yakin ingin menghapus portofolio ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: async () => {
+        try {
+          setIsLoadingDelete(true);
+          const response = await apiDeletePortofolio({ id: id });
+          console.log("Response portofolio >>", response);
+          if (response.success) {
+            console.log("Portofolio berhasil dihapus");
+            router.back();
+          }
+
+          console.log("Gagal dihapus >>", response);
+        } catch (error) {
+          console.log("Error delete portofolio >>", error);
+        } finally {
+          setIsLoadingDelete(false);
+        }
+      },
+    })
+   
   };
+
   return (
-    <ButtonCustom textColor={MainColor.white} iconLeft={<Ionicons name="trash-outline" size={20} color="white" />} onPress={handleDelete} backgroundColor={MainColor.red}>
+    <ButtonCustom
+      isLoading={isLoadingDelete}
+      textColor={MainColor.white}
+      iconLeft={<Ionicons name="trash-outline" size={20} color="white" />}
+      onPress={handleDelete}
+      backgroundColor={MainColor.red}
+    >
       Hapus
     </ButtonCustom>
   );

screens/Portofolio/DataPortofolio.tsx

@@ -17,7 +17,13 @@ import { FontAwesome, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
 
-export default function Portofolio_Data({ data }: { data: any }) {
+export default function Portofolio_Data({
+  data,
+  listSubBidang,
+}: {
+  data: any;
+  listSubBidang: any[];
+}) {
   const { id } = useLocalSearchParams();
 
   const listData = [
@@ -83,6 +89,8 @@ export default function Portofolio_Data({ data }: { data: any }) {
   //   },
   // ];
 
+  // console.log("List Sub Bidang >>", JSON.stringify(listSubBidang, null, 2));
+
   return (
     <>
       <BaseBox>
@@ -137,20 +145,24 @@ export default function Portofolio_Data({ data }: { data: any }) {
                 </Grid.Col>
               </Grid>
             ))}
-            {/* <View style={{ paddingLeft: 10 }}>
-              {listSubBidang.map((item, index) => (
+            <View style={{ paddingLeft: 10 }}>
+              {listSubBidang?.map((item, index) => (
                 <Grid key={index}>
                   <Grid.Col span={2} style={{ alignItems: "center" }}>
-                    {item.icon}
+                    <Ionicons
+                      name="chevron-forward-outline"
+                      size={ICON_SIZE_SMALL}
+                      color="white"
+                    />
                   </Grid.Col>
                   <Grid.Col span={10}>
                     <TextCustom style={{ paddingLeft: 5 }}>
-                      {item.label}
+                      {item?.MasterSubBidangBisnis?.name || "-"}
                     </TextCustom>
                   </Grid.Col>
                 </Grid>
               ))}
-            </View> */}
+            </View>
           </View>
 
           <DividerCustom labelPosition="top" color={AccentColor.blue} />

screens/Portofolio/MenuDrawer.tsx

@@ -21,7 +21,7 @@ export default function Portofolio_MenuDrawerSection({
       <MenuDrawerDynamicGrid
         data={drawerItems}
         columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
-        onPressItem={handlePress}
+        onPressItem={handlePress as any}
       />
     </>
   );

service/api-client/api-file.ts

@@ -0,0 +1,45 @@
+import axios from "axios";
+import { API_BASE_URL } from "../api-config";
+
+const url = `${API_BASE_URL}/mobile/file`;
+
+export async function apiFileUpload({
+  token,
+  formData,
+}: {
+  token: string;
+  formData: FormData;
+}) {
+  try {
+    const response = await axios.post(url, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+      },
+      // timeout: 30000,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiFileDelete({
+  token,
+  id,
+}: {
+  token: string;
+  id: string;
+}) {
+  try {
+    const response = await axios.delete(`${url}/${id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      // timeout: 30000,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}

service/api-client/api-master.ts

@@ -9,12 +9,14 @@ export async function apiMasterBidangBisnis() {
   }
 }
 
-export async function apiMasterSubBidangBisnis({id}: {id: string}) {
+export async function apiMasterSubBidangBisnis({ id }: { id?: string }) {
   try {
-    const response = await apiConfig.get(`/master/sub-bidang-bisnis/${id}`);
+    const selectBidangId = id ? `/${id}` : "";
+    const response = await apiConfig.get(
+      `/master/sub-bidang-bisnis${selectBidangId}`
+    );
     return response.data;
   } catch (error) {
     throw error;
   }
 }
-

service/api-client/api-portofolio.ts

@@ -25,7 +25,40 @@ export async function apiGetPortofolio({ id }: { id: string }) {
 export async function apiGetOnePortofolio({ id }: { id: string }) {
   try {
     const response = await apiConfig.get(`/mobile/portofolio/${id}`);
-    
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiDeletePortofolio({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/portofolio/${id}`);
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiUpdatePortofolio({
+  id,
+  data,
+  category,
+}: {
+  id: string;
+  data: any;
+  category: "detail" | "medsos" | "logo";
+}) {
+  try {
+    const response = await apiConfig.put(
+      `/mobile/portofolio/${id}?category=${category}`,
+      {
+        data: data,
+      }
+    );
+
     return response.data;
   } catch (error) {
     throw error;

service/upload-service.ts

@@ -1,6 +1,6 @@
 import { API_BASE_URL } from "@/service/api-config";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import axios from "axios";
+import { apiFileUpload } from "./api-client/api-file";
 
 export async function uploadImageService({
   dirId,
@@ -10,7 +10,7 @@ export async function uploadImageService({
   imageUri: string | null;
 }) {
   const token = await AsyncStorage.getItem("authToken");
-  const url = `${API_BASE_URL}/mobile/upload`;
+  const url = `${API_BASE_URL}/mobile/file`;
 
   console.log("url >>", url);
 
@@ -33,21 +33,18 @@ export async function uploadImageService({
     });
     formData.append("dirId", dirId);
 
-    const response = await axios.post(url, formData, {
-      headers: {
-        "Content-Type": "multipart/form-data",
-        Authorization: `Bearer ${token}`,
-      },
-      // timeout: 30000,
+    const response = await apiFileUpload({
+      token: token as string,
+      formData,
     });
 
-    const { data } = response;
+    console.log("Response upload file >>", JSON.stringify(response, null, 2));
 
-    if (!data.success) {
-      throw new Error(data.message);
+    if (!response.success) {
+      throw new Error(response.message);
     }
 
-    return data;
+    return response;
   } catch (error) {
     throw error;
   }

types/Type-Master.ts

@@ -14,4 +14,5 @@ export interface IMasterSubBidangBisnis {
   isActive: boolean;
   createdAt: string;
   updatedAt: string;
+  masterBidangBisnisId: string;
 }