Poortofoloio

Fix: - service/api-client/api-portofolio.ts : api edit detail. logo, medsos ### No Issue
API
2025-09-01 17:10:25 +08:00 · 2025-09-01 12:11:21 +08:00 · 2025-08-29 17:42:33 +08:00
30 changed files with 1137 additions and 361 deletions
--- a/app/(application)/(user)/home.tsx
+++ b/app/(application)/(user)/home.tsx
@@ -22,7 +22,9 @@ export default function Application() {

  async function onLoadData() {
    const response = await apiUser(user?.id as string);
-    console.log("User >>", JSON.stringify(response.data, null, 2));
+    console.log("User >>", JSON.stringify(response.data.username, null, 2));
+    console.log("Profile Check >>", JSON.stringify(response.data.Profile.id, null, 2));
+
    setData(response.data);
  }

--- a/app/(application)/(user)/maps/index.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/create.tsx
+++ b/app/(application)/(user)/portofolio/[id]/create.tsx
@@ -1,10 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
-  BoxButtonOnFooter,
+  AvatarComp,
+  BaseBox,
  ButtonCenteredOnly,
-  ButtonCustom,
-  Grid,
+  CenterCustom,
  InformationBox,
-  LandscapeFrameUploaded,
  SelectCustom,
  Spacing,
  StackCustom,
@@ -14,48 +14,109 @@ import {
  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 { Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import Portofolio_ButtonCreate from "@/screens/Portofolio/ButtonCreatePortofolio";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
+import pickImage from "@/utils/pickImage";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import { Avatar } from "react-native-paper";

 export default function PortofolioCreate() {
  const { id } = useLocalSearchParams();
  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
  const [inputValue, setInputValue] = useState<string>("");
  const [data, setData] = useState({
-    name: "",
-    bidang_usaha: "",
-    sub_bidang_usaha: "",
-    alamat: "",
-    nomor_telepon: "",
+    namaBisnis: "",
+    masterBidangBisnisId: "",
+    alamatKantor: "",
+    tlpn: "",
    deskripsi: "",
  });
+  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 [listSubBidangSelected, setListSubBidangSelected] = useState([
+    {
+      id: "",
+    },
+  ]);
+
+  const [dataMedsos, setDataMedsos] = useState({
+    facebook: "",
+    twitter: "",
+    instagram: "",
+    youtube: "",
+    tiktok: "",
+  });
+
+  const [isLoadingCreate, setIsLoadingCreate] = useState(false);

  function handleInputValue(phoneNumber: string) {
    setInputValue(phoneNumber);
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    const fixNumber = inputValue.replace(/\s+/g, "");
+    const realNumber = callingCode + fixNumber;
+    setData({ ...data, tlpn: realNumber });
  }

  function handleSelectedCountry(country: ICountry) {
    setSelectedCountry(country);
  }

-  function handleSave() {
-    console.log("Selanjutnya");
-    router.replace(`/maps/create`);
-  }
+  useEffect(() => {
+    onLoadMaster();
+  }, []);

-  const buttonSave = (
-    <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleSave}>Selanjutnya</ButtonCustom>
-    </BoxButtonOnFooter>
-  );
+  const onLoadMaster = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  const onLoadMasterSubBidangBisnis = async ({ id }: { id: string }) => {
+    try {
+      const response = await apiMasterSubBidangBisnis({ id: id });
+      setSubBidangBisnis(response.data);
+    } catch (error) {
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };

  return (
-    <ViewWrapper footerComponent={buttonSave}>
+    <ViewWrapper
+      footerComponent={
+        <Portofolio_ButtonCreate
+          id={id as string}
+          data={data}
+          dataMedsos={dataMedsos}
+          imageUri={imageUri}
+          subBidangSelected={listSubBidangSelected}
+          isLoadingCreate={isLoadingCreate}
+          setIsLoadingCreate={setIsLoadingCreate}
+        />
+      }
+    >
      {/* <TextCustom>Portofolio Create {id}</TextCustom> */}
      <StackCustom gap={"xs"}>
        <InformationBox text="Lengkapi data bisnis anda." />
@@ -63,51 +124,66 @@ export default function PortofolioCreate() {
          required
          label="Nama Bisnis"
          placeholder="Masukkan nama bisnis"
-
+          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}
+          value={data.masterBidangBisnisId}
          onChange={(value) => {
-            setData({ ...(data as any), bidang_usaha: value });
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            setSelectBidangId(id as string);
+            onLoadMasterSubBidangBisnis({ id: value as string });
          }}
        />

-        <Grid>
-          <Grid.Col span={10}>
-            <SelectCustom
-              // disabled
-              label="Sub Bidang Usaha"
-              required
-              data={dummyMasterSubBidangBisnis.map((item) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data.sub_bidang_usaha}
-              onChange={(value) => {
-                setData({ ...(data as any), sub_bidang_usaha: 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>
+        {/* {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>
+        ))}

-        <ButtonCenteredOnly onPress={() => console.log("add")}>
+        <ButtonCenteredOnly
+          onPress={() => {
+            setListSubBidangSelected([...listSubBidangSelected, { id: "" }]);
+          }}
+        >
          Tambah Pilihan
        </ButtonCenteredOnly>
-        <Spacing />
+        <Spacing /> */}
+
+        {/* <TextCustom>{JSON.stringify(bidangBisnis, null, 2)}</TextCustom> */}

        <View>
          <View style={{ flexDirection: "row", alignItems: "center" }}>
@@ -132,6 +208,9 @@ export default function PortofolioCreate() {
          required
          label="Alamat Bisnis"
          placeholder="Masukkan alamat bisnis"
+          onChangeText={(value: any) =>
+            setData({ ...data, alamatKantor: value })
+          }
        />

        <TextAreaCustom
@@ -144,18 +223,26 @@ export default function PortofolioCreate() {
          maxRows={5}
          required
          showCount
-          maxLength={100}
+          maxLength={1000}
        />
        <Spacing />

        {/* Logo */}
        <InformationBox text="Upload logo bisnis anda untuk di tampilaka pada portofolio." />
-        <LandscapeFrameUploaded />
+
+        <CenterCustom>
+          <Avatar.Image
+            source={imageUri ? { uri: imageUri } : DUMMY_IMAGE.dummy_image}
+            size={200}
+          />
+        </CenterCustom>
+        <Spacing />
        <ButtonCenteredOnly
          icon="upload"
          onPress={() => {
-            console.log("Upload logo >>", id);
-            router.navigate(`/(application)/(image)/take-picture/${id}`);
+            pickImage({
+              setImageUri,
+            });
          }}
        >
          Upload
@@ -167,22 +254,37 @@ export default function PortofolioCreate() {
        <TextInputCustom
          label="Tiktok"
          placeholder="Masukkan username tiktok"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, tiktok: value })
+          }
        />
        <TextInputCustom
          label="Facebook"
          placeholder="Masukkan username facebook"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, facebook: value })
+          }
        />
        <TextInputCustom
          label="Instagram"
          placeholder="Masukkan username instagram"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, instagram: value })
+          }
        />
        <TextInputCustom
          label="Twitter"
          placeholder="Masukkan username twitter"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, twitter: value })
+          }
        />
        <TextInputCustom
          label="Youtube"
          placeholder="Masukkan username youtube"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, youtube: value })
+          }
        />
        <Spacing />
      </StackCustom>
--- a/app/(application)/(user)/portofolio/[id]/edit-logo.tsx
+++ b/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>
    </>
--- a/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
+++ b/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>
    </>
  );
--- a/app/(application)/(user)/portofolio/[id]/edit.tsx
+++ b/app/(application)/(user)/portofolio/[id]/edit.tsx
@@ -1,8 +1,6 @@
 import {
  BoxButtonOnFooter,
-  ButtonCenteredOnly,
  ButtonCustom,
-  Grid,
  SelectCustom,
  Spacing,
  StackCustom,
@@ -12,46 +10,125 @@ import {
  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 { Ionicons } from "@expo/vector-icons";
+import { apiMasterBidangBisnis } from "@/service/api-client/api-master";
+import {
+  apiGetOnePortofolio,
+  apiUpdatePortofolio,
+} from "@/service/api-client/api-portofolio";
+import { IMasterBidangBisnis } from "@/types/Type-Master";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+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;
+}

 export default function PortofolioEdit() {
  const { id } = useLocalSearchParams();
+  const [isLoading, setIsLoading] = useState(false);
  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
-  const [inputValue, setInputValue] = useState<string>("");
-
-  const [data, setData] = useState({
-    name: "",
-    bidang_usaha: "",
-    sub_bidang_usaha: "",
-    alamat: "",
-    nomor_telepon: "",
-    deskripsi: "",
-  });
+  const [bidangBisnis, setBidangBisnis] = useState<IMasterBidangBisnis[]>([]);
+  const [data, setData] = useState<any>({});

  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();
-  }
+  useEffect(() => {
+    onLoadData(id as string);
+    onLoadMaster();
+  }, [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", "");
+      console.log("Fix Number >>", fixNumber);
+      setData({ ...response.data, tlpn: fixNumber });
+    }
+  };
+
+  const onLoadMaster = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", 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,
+      };
+
+      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>
  );
+
  return (
    <>
      <ViewWrapper footerComponent={buttonUpdate}>
@@ -60,22 +137,26 @@ 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}
+            value={data.masterBidangBisnisId}
            onChange={(value) => {
-              setData({ ...(data as any), bidang_usaha: value });
+              setData({ ...(data as any), masterBidangBisnisId: value });
            }}
          />

-          <Grid>
+          {/* <Grid>
            <Grid.Col span={10}>
              <SelectCustom
                // disabled
@@ -85,9 +166,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 +180,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 +195,7 @@ export default function PortofolioEdit() {
            </View>
            <Spacing height={5} />
            <PhoneInput
-              value={inputValue}
+              value={data.tlpn}
              onChangePhoneNumber={handleInputValue}
              selectedCountry={selectedCountry}
              onChangeSelectedCountry={handleSelectedCountry}
@@ -127,6 +209,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,7 +227,7 @@ export default function PortofolioEdit() {
            maxRows={5}
            required
            showCount
-            maxLength={100}
+            maxLength={1000}
          />
          <Spacing />
        </StackCustom>
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -1,20 +1,27 @@
-import { AlertCustom, DrawerCustom } 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";
+import { useAuth } from "@/hooks/use-auth";
+import Portofolio_BusinessLocation from "@/screens/Portofolio/BusinessLocationSection";
+import Portofolio_ButtonDelete from "@/screens/Portofolio/ButtonDelete";
+import Portofolio_Data from "@/screens/Portofolio/DataPortofolio";
 import { drawerItemsPortofolio } from "@/screens/Portofolio/ListPage";
 import Portofolio_MenuDrawerSection from "@/screens/Portofolio/MenuDrawer";
-import PorfofolioSection from "@/screens/Portofolio/PorfofolioSection";
+import Portofolio_SocialMediaSection from "@/screens/Portofolio/SocialMediaSection";
+import { apiGetOnePortofolio } from "@/service/api-client/api-portofolio";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
-import { Stack, useLocalSearchParams, router } from "expo-router";
-import { useState } from "react";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";

 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 = () => {
    setIsDrawerOpen(true);
@@ -22,57 +29,75 @@ export default function Portofolio() {
  const closeDrawer = () => {
    setIsDrawerOpen(false);
  };
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  async function onLoadData(id: string) {
+    const response = await apiGetOnePortofolio({ id: id });
+    console.log(
+      "Response portofolio >>",
+      JSON.stringify(response.data.namaBisnis, null, 2)
+    );
+
+    setData(response.data);
+  }
+
+  const userId = user?.id;
+  const userLoginId = data?.Profile?.User?.id;
+
+  console.log("User ID >>", userId);
+  console.log("User Login ID >>", userLoginId);
+
  return (
    <>
+      {/* Header */}
+      <Stack.Screen
+        options={{
+          title: "Portofolio",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => (
+            <TouchableOpacity onPress={openDrawer}>
+              <Ionicons
+                name="ellipsis-vertical"
+                size={20}
+                color={MainColor.yellow}
+              />
+            </TouchableOpacity>
+          ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
      <ViewWrapper>
-        {/* Header */}
-        <Stack.Screen
-          options={{
-            title: "Portofolio",
-            headerLeft: () => <LeftButtonCustom />,
-            headerRight: () => (
-              <TouchableOpacity onPress={openDrawer}>
-                <Ionicons
-                  name="ellipsis-vertical"
-                  size={20}
-                  color={MainColor.yellow}
-                />
-              </TouchableOpacity>
-            ),
-            headerStyle: GStyles.headerStyle,
-            headerTitleStyle: GStyles.headerTitleStyle,
-          }}
-        />
-        <PorfofolioSection setShowDeleteAlert={setDeleteAlert} />
+        {/* <PorfofolioSection setShowDeleteAlert={setDeleteAlert} data={data} /> */}
+        <StackCustom>
+          <Portofolio_Data data={data} />
+          <Portofolio_BusinessLocation />
+          <Portofolio_SocialMediaSection data={data?.Portofolio_MediaSosial} />
+          <Portofolio_ButtonDelete
+            id={id as string}
+            isLoadingDelete={isLoadingDelete}
+            setIsLoadingDelete={setIsLoadingDelete}
+          />
+          <Spacing />
+        </StackCustom>
      </ViewWrapper>

      {/* Drawer Komponen Eksternal */}
      <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}
-      />
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/list.tsx
+++ b/app/(application)/(user)/portofolio/[id]/list.tsx
@@ -1,47 +1,28 @@
-import { BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import { Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { TextCustom, ViewWrapper } from "@/components";
+import Portofolio_BoxView from "@/screens/Portofolio/BoxPortofolioView";
+import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";

 export default function ListPortofolio() {
  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any[]>([]);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadPortofolio(id as string);
+    }, [id])
+  );
+
+  const onLoadPortofolio = async (id: string) => {
+    const response = await apiGetPortofolio({ id: id });
+    setData(response.data);
+  };
  return (
    <ViewWrapper>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox
-          key={index}
-          style={{ backgroundColor: MainColor.darkblue }}
-          onPress={() => {
-            console.log("press to Portofolio");
-            router.push(`/portofolio/${id}`);
-          }}
-        >
-          <Grid>
-            <Grid.Col
-              span={10}
-              style={{ justifyContent: "center", backgroundColor: "" }}
-            >
-              <TextCustom bold size="large" truncate={1}>
-                Nama usaha portofolio
-              </TextCustom>
-              <TextCustom size="small" color="yellow">
-                #id-porofolio12345
-              </TextCustom>
-            </Grid.Col>
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
-            >
-              <Ionicons
-                name="caret-forward"
-                size={ICON_SIZE_SMALL}
-                color="white"
-              />
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+      {data ? data?.map((item: any, index: number) => (
+        <Portofolio_BoxView key={index} data={item} />
+      )) : <TextCustom>Tidak ada portofolio</TextCustom>}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -5,16 +5,14 @@ import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { drawerItemsProfile } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
+import Profile_PortofolioSection from "@/screens/Profile/PortofolioSection";
 import ProfileSection from "@/screens/Profile/ProfileSection";
+import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
 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 {
-  Stack,
-  useFocusEffect,
-  useLocalSearchParams
-} from "expo-router";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
 import React, { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";

@@ -22,6 +20,7 @@ export default function Profile() {
  const { id } = useLocalSearchParams();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [data, setData] = useState<IProfile>();
+  const [dataPortofolio, setDataPortofolio] = useState<any[]>();

  const { logout, isAdmin } = useAuth();

@@ -36,13 +35,25 @@ export default function Profile() {
  useFocusEffect(
    useCallback(() => {
      onLoadData(id as string);
+      onLoadPortofolio(id as string);
    }, [id])
  );

-  async function onLoadData(id: string) {
+  const onLoadData = async (id: string) => {
    const response = await apiProfile({ id: id });
    setData(response.data);
-  }
+  };
+
+  const onLoadPortofolio = async (id: string) => {
+    const response = await apiGetPortofolio({ id: id });
+    const lastTwoByDate = response.data
+      .sort(
+        (a: any, b: any) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      ) // urut desc
+      .slice(0, 2);
+    setDataPortofolio(lastTwoByDate);
+  };

  return (
    <>
@@ -63,9 +74,14 @@ export default function Profile() {
          headerTitleStyle: GStyles.headerTitleStyle,
        }}
      />
+      {/* Main View */}
      <ViewWrapper>
-        {/* Header */}
        <ProfileSection data={data as any} />
+
+        <Profile_PortofolioSection
+          data={dataPortofolio as any}
+          profileId={id as string}
+        />
      </ViewWrapper>

      {/* Drawer Komponen Eksternal */}
--- a/app/(application)/(user)/profile/[id]/update-background.tsx
+++ b/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) {
--- a/app/(application)/(user)/profile/[id]/update-photo.tsx
+++ b/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) {
--- a/app/(application)/coba/upload-service.ts
+++ b/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,
 }: {
--- a/assets/images/dummy/dummy-image.jpg
+++ b/assets/images/dummy/dummy-image.jpg
--- a/components/Button/ButtonCustom.tsx
+++ b/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} />
      ) : (
--- a/components/Image/AvatarComp.tsx
+++ b/components/Image/AvatarComp.tsx
@@ -16,6 +16,7 @@ const sizeMap = {

 interface AvatarCompProps {
  fileId?: string;
+  fileIdDefault?: string;
  size: Size;
  onPress?: () => void | any;
  href?: Href | undefined | any;
@@ -23,6 +24,7 @@ interface AvatarCompProps {

 export default function AvatarComp({
  fileId,
+  fileIdDefault,
  size,
  onPress,
  href = `/(application)/(image)/preview-image/${fileId}`,
@@ -34,7 +36,11 @@ export default function AvatarComp({
      <Avatar.Image
        size={dimension}
        source={
-          fileId ? { uri: API_STRORAGE.GET({ fileId }) } : DUMMY_IMAGE.avatar
+          fileId
+            ? { uri: API_STRORAGE.GET({ fileId }) }
+            : fileIdDefault
+            ? fileIdDefault
+            : DUMMY_IMAGE.avatar
        }
      />
    );
--- a/constants/dummy-image-value.ts
+++ b/constants/dummy-image-value.ts
@@ -1,6 +1,7 @@
 const DUMMY_IMAGE = {
  avatar: require("@/assets/images/dummy/dummy-user.png"),
  background: require("@/assets/images/dummy/dummy-image-background.jpg"),
+  dummy_image: require("@/assets/images/dummy/dummy-image.jpg"),
 };

 export default DUMMY_IMAGE;
--- a/screens/Portofolio/BoxPortofolioView.tsx
+++ b/screens/Portofolio/BoxPortofolioView.tsx
@@ -0,0 +1,42 @@
+import { BaseBox, Grid, TextCustom } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function Portofolio_BoxView({ data }: { data: any }) {
+  return (
+    <>
+      <BaseBox
+        style={{ backgroundColor: MainColor.darkblue }}
+        onPress={() => {
+          router.push(`/portofolio/${data?.id}`);
+        }}
+      >
+        <Grid>
+          <Grid.Col
+            span={10}
+            style={{ justifyContent: "center", backgroundColor: "" }}
+          >
+            <TextCustom bold size="large" truncate={1}>
+              {data && data?.namaBisnis ? data.namaBisnis : "-"}
+            </TextCustom>
+            <TextCustom size="small" color="yellow">
+              #{data && data?.id_Portofolio ? data.id_Portofolio : "-"}
+            </TextCustom>
+          </Grid.Col>
+          <Grid.Col
+            span={2}
+            style={{ alignItems: "flex-end", justifyContent: "center" }}
+          >
+            <Ionicons
+              name="caret-forward"
+              size={ICON_SIZE_SMALL}
+              color="white"
+            />
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}
--- a/screens/Portofolio/ButtonCreatePortofolio.tsx
+++ b/screens/Portofolio/ButtonCreatePortofolio.tsx
@@ -0,0 +1,126 @@
+import { BoxButtonOnFooter, ButtonCustom } from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiPortofolioCreate } from "@/service/api-client/api-portofolio";
+import { uploadImageService } from "@/service/upload-service";
+import { router } from "expo-router";
+import Toast from "react-native-toast-message";
+
+interface Props {
+  id: string;
+  data: any;
+  dataMedsos: any;
+  imageUri: string | null;
+  subBidangSelected: any[];
+  isLoadingCreate: boolean;
+  setIsLoadingCreate: (value: boolean) => void;
+}
+
+interface ICreatePortofolio {
+  id: string;
+  namaBisnis: string;
+  masterBidangBisnisId: string;
+  alamatKantor: string;
+  tlpn: string;
+  deskripsi: string;
+  fileId: string;
+  facebook: string;
+  twitter: string;
+  instagram: string;
+  tiktok: string;
+  youtube: string;
+  subBidang: any[];
+}
+export default function Portofolio_ButtonCreate({
+  id,
+  data,
+  dataMedsos,
+  imageUri,
+  subBidangSelected,
+  isLoadingCreate,
+  setIsLoadingCreate,
+}: Props) {
+  const validaasiData = () => {
+    if (
+      !data.namaBisnis ||
+      !data.masterBidangBisnisId ||
+      !data.alamatKantor ||
+      !data.tlpn ||
+      !data.deskripsi
+    ) {
+      return false;
+    }
+    return true;
+  };
+
+  const handleCreatePortofolio = async () => {
+    if (!validaasiData()) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap lengkapi data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoadingCreate(true);
+      let fileId = "";
+      if (imageUri) {
+        const response = await uploadImageService({
+          imageUri: imageUri,
+          dirId: DIRECTORY_ID.portofolio_logo,
+        });
+
+        fileId = response.data.id;
+      }
+
+      // Fix Data
+      const newData: ICreatePortofolio = {
+        id: id,
+        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,
+        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;
+      }
+    } catch (error) {
+      Toast.show({
+        type: "error",
+        text1: "Error",
+        text2: error as string,
+      });
+    } finally {
+      setIsLoadingCreate(false);
+    }
+  };
+
+  return (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        isLoading={isLoadingCreate}
+        onPress={handleCreatePortofolio}
+      >
+        Selanjutnya
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+}
--- a/screens/Portofolio/ButtonDelete.tsx
+++ b/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>
  );
--- a/screens/Portofolio/DataPortofolio.tsx
+++ b/screens/Portofolio/DataPortofolio.tsx
@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
+  AvatarComp,
  AvatarCustom,
  BaseBox,
  CenterCustom,
@@ -10,11 +12,12 @@ import {
 import DividerCustom from "@/components/Divider/DividerCustom";
 import { AccentColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";

-export default function Portofolio_Data() {
+export default function Portofolio_Data({ data }: { data: any }) {
  const { id } = useLocalSearchParams();

  const listData = [
@@ -22,60 +25,63 @@ export default function Portofolio_Data() {
      icon: (
        <FontAwesome name="building-o" size={ICON_SIZE_SMALL} color="white" />
      ),
-      label: "PT.Bali Interakrtif Perkasa",
+      label: data && data?.namaBisnis ? data.namaBisnis : "-",
    },
    {
      icon: (
        <Ionicons name="call-outline" size={ICON_SIZE_SMALL} color="white" />
      ),
-      label: "+6282340374412",
+      label: data && data?.tlpn ? data.tlpn : "-",
    },
    {
      icon: (
        <Ionicons name="home-outline" size={ICON_SIZE_SMALL} color="white" />
      ),
-      label: "Jl. Raya Kuta No. 123, Bandung, Indonesia",
+      label: data && data?.alamatKantor ? data.alamatKantor : "-",
    },
    {
      icon: (
        <Ionicons name="list-outline" size={ICON_SIZE_SMALL} color="white" />
      ),
-      label: "Teknologia",
+      label:
+        data && data?.MasterBidangBisnis?.name
+          ? data.MasterBidangBisnis.name
+          : "-",
    },
  ];

-  const listSubBidang = [
-    {
-      icon: (
-        <Ionicons
-          name="chevron-forward-outline"
-          size={ICON_SIZE_SMALL}
-          color="white"
-        />
-      ),
-      label: "Security System",
-    },
-    {
-      icon: (
-        <Ionicons
-          name="chevron-forward-outline"
-          size={ICON_SIZE_SMALL}
-          color="white"
-        />
-      ),
-      label: "Web Developers",
-    },
-    {
-      icon: (
-        <Ionicons
-          name="chevron-forward-outline"
-          size={ICON_SIZE_SMALL}
-          color="white"
-        />
-      ),
-      label: "Mobile Developers",
-    },
-  ];
+  // const listSubBidang = [
+  //   {
+  //     icon: (
+  //       <Ionicons
+  //         name="chevron-forward-outline"
+  //         size={ICON_SIZE_SMALL}
+  //         color="white"
+  //       />
+  //     ),
+  //     label: "Security System",
+  //   },
+  //   {
+  //     icon: (
+  //       <Ionicons
+  //         name="chevron-forward-outline"
+  //         size={ICON_SIZE_SMALL}
+  //         color="white"
+  //       />
+  //     ),
+  //     label: "Web Developers",
+  //   },
+  //   {
+  //     icon: (
+  //       <Ionicons
+  //         name="chevron-forward-outline"
+  //         size={ICON_SIZE_SMALL}
+  //         color="white"
+  //       />
+  //     ),
+  //     label: "Mobile Developers",
+  //   },
+  // ];

  return (
    <>
@@ -86,7 +92,9 @@ export default function Portofolio_Data() {
              <TextCustom bold>Data Bisnis</TextCustom>
            </Grid.Col>
            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <TextCustom color="yellow">ID: {id}</TextCustom>
+              <TextCustom color="yellow" size={12} bold>
+                ID: {(data && data?.id_Portofolio) || "-"}
+              </TextCustom>
            </Grid.Col>
          </Grid>

@@ -106,7 +114,11 @@ export default function Portofolio_Data() {
            }}
          >
            <CenterCustom>
-              <AvatarCustom size="xl" />
+              <AvatarComp
+                size="xl"
+                fileId={data?.logoId as any}
+                fileIdDefault={DUMMY_IMAGE.dummy_image}
+              />
            </CenterCustom>
          </ClickableCustom>

@@ -125,7 +137,7 @@ export default function Portofolio_Data() {
                </Grid.Col>
              </Grid>
            ))}
-            <View style={{ paddingLeft: 10 }}>
+            {/* <View style={{ paddingLeft: 10 }}>
              {listSubBidang.map((item, index) => (
                <Grid key={index}>
                  <Grid.Col span={2} style={{ alignItems: "center" }}>
@@ -138,7 +150,7 @@ export default function Portofolio_Data() {
                  </Grid.Col>
                </Grid>
              ))}
-            </View>
+            </View> */}
          </View>

          <DividerCustom labelPosition="top" color={AccentColor.blue} />
@@ -160,10 +172,7 @@ export default function Portofolio_Data() {
            </Grid>

            <TextCustom style={{ paddingInline: 10 }}>
-              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-              Doloremque, alias perspiciatis quis enim eos facilis sit est?
-              Doloremque, rerum. Cumque error asperiores harum temporibus
-              cupiditate ullam, id quibusdam! Harum, rerum!
+              {(data && data?.deskripsi) || "-"}
            </TextCustom>
          </View>
        </StackCustom>
--- a/screens/Portofolio/MenuDrawer.tsx
+++ b/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}
      />
    </>
  );
--- a/screens/Portofolio/PorfofolioSection.tsx
+++ b/screens/Portofolio/PorfofolioSection.tsx
@@ -1,21 +0,0 @@
-import { Spacing, StackCustom } from "@/components";
-import Portofolio_BusinessLocation from "./BusinessLocationSection";
-import Portofolio_Data from "./DataPortofolio";
-import Portofolio_SocialMediaSection from "./SocialMediaSection";
-import Portofolio_ButtonDelete from "./ButtonDelete";
-
-export default function PorfofolioSection({
-  setShowDeleteAlert,
-}: {
-  setShowDeleteAlert: (value: boolean) => void;
-}) {
-  return (
-    <StackCustom>
-      <Portofolio_Data />
-      <Portofolio_BusinessLocation />
-      <Portofolio_SocialMediaSection />
-      <Portofolio_ButtonDelete setShowDeleteAlert={setShowDeleteAlert}/>
-      <Spacing/>
-    </StackCustom>
-  );
-}
--- a/screens/Portofolio/SocialMediaSection.tsx
+++ b/screens/Portofolio/SocialMediaSection.tsx
@@ -3,10 +3,10 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Ionicons } from "@expo/vector-icons";

-export default function Portofolio_SocialMediaSection() {
+export default function Portofolio_SocialMediaSection({ data }: { data: any }) {
  const listData = [
    {
-      label: "Facebook ku bagas",
+      label: data && data?.facebook ? data.facebook : "-",
      icon: (
        <Ionicons
          name="logo-facebook"
@@ -16,7 +16,7 @@ export default function Portofolio_SocialMediaSection() {
      ),
    },
    {
-      label: "Tiktok ku bagas",
+      label: data && data?.tiktok ? data.tiktok : "-",
      icon: (
        <Ionicons
          name="logo-tiktok"
@@ -26,7 +26,7 @@ export default function Portofolio_SocialMediaSection() {
      ),
    },
    {
-      label: "Instagram ku bagas",
+      label: data && data?.instagram ? data.instagram : "-",
      icon: (
        <Ionicons
          name="logo-instagram"
@@ -36,7 +36,7 @@ export default function Portofolio_SocialMediaSection() {
      ),
    },
    {
-      label: "Twitter ku bagas",
+      label: data && data?.twitter ? data.twitter : "-",
      icon: (
        <Ionicons
          name="logo-twitter"
@@ -46,7 +46,7 @@ export default function Portofolio_SocialMediaSection() {
      ),
    },
    {
-      label: "Youtube ku bagas",
+      label: data && data?.youtube ? data.youtube : "-",
      icon: (
        <Ionicons
          name="logo-youtube"
--- a/screens/Profile/PortofolioSection.tsx
+++ b/screens/Profile/PortofolioSection.tsx
@@ -0,0 +1,45 @@
+import { BaseBox, CenterCustom, Spacing, TextCustom } from "@/components";
+import { router } from "expo-router";
+import { View } from "react-native";
+import Portofolio_BoxView from "../Portofolio/BoxPortofolioView";
+
+export default function Profile_PortofolioSection({
+  profileId,
+  data,
+}: {
+  profileId: string;
+  data: any[];
+}) {
+  return (
+    <>
+      <BaseBox>
+        <View>
+          <TextCustom bold size="large" align="center">
+            Portofolio
+          </TextCustom>
+          <Spacing />
+
+          {data?.length > 0 ? (
+            data?.map((item: any, index) => (
+              <Portofolio_BoxView key={index} data={item} />
+            ))
+          ) : (
+            <CenterCustom>
+              <TextCustom>Tidak ada portofolio</TextCustom>
+            </CenterCustom>
+          )}
+        </View>
+
+       {data?.length > 0 && (
+        <TextCustom
+          bold
+          align="right"
+          onPress={() => router.push(`/portofolio/${profileId}/list`)}
+        >
+          Lihat semua
+        </TextCustom>
+       )}
+      </BaseBox>
+    </>
+  );
+}
--- a/screens/Profile/ProfileSection.tsx
+++ b/screens/Profile/ProfileSection.tsx
@@ -1,16 +1,12 @@
 import { BaseBox, Grid, Spacing, TextCustom } from "@/components";
-import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { IProfile } from "@/types/Type-Profile";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
 import { View } from "react-native";
 import AvatarAndBackground from "./AvatarAndBackground";
-import { IProfile } from "@/types/Type-Profile";
-import _ from "lodash";

 export default function ProfileSection({ data }: { data: IProfile }) {
-  const { id } = useLocalSearchParams();
-
  const listData = [
    {
      icon: (
@@ -82,57 +78,7 @@ export default function ProfileSection({ data }: { data: IProfile }) {
        ))}
      </BaseBox>

-      <BaseBox>
-        <View>
-          <TextCustom bold size="large" align="center">
-            Portofolio
-          </TextCustom>
-          <Spacing />
-
-          {Array.from({ length: 2 }).map((_, index) => (
-            <BaseBox
-              key={index}
-              style={{ backgroundColor: MainColor.darkblue }}
-              onPress={() => {
-                console.log("press to Portofolio");
-                router.push(`/portofolio/${id}`);
-              }}
-            >
-              <Grid>
-                <Grid.Col
-                  span={10}
-                  style={{ justifyContent: "center", backgroundColor: "" }}
-                >
-                  <TextCustom bold size="large" truncate={1}>
-                    Nama usaha portofolio
-                  </TextCustom>
-                  <TextCustom size="small" color="yellow">
-                    #id-porofolio12345
-                  </TextCustom>
-                </Grid.Col>
-                <Grid.Col
-                  span={2}
-                  style={{ alignItems: "flex-end", justifyContent: "center" }}
-                >
-                  <Ionicons
-                    name="caret-forward"
-                    size={ICON_SIZE_SMALL}
-                    color="white"
-                  />
-                </Grid.Col>
-              </Grid>
-            </BaseBox>
-          ))}
-        </View>
-
-        <TextCustom
-          bold
-          align="right"
-          onPress={() => router.push(`/portofolio/${id}/list`)}
-        >
-          Lihat semua
-        </TextCustom>
-      </BaseBox>
+     
    </>
  );
 }
--- a/service/api-client/api-file.ts
+++ b/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;
+  }
+}
--- a/service/api-client/api-master.ts
+++ b/service/api-client/api-master.ts
@@ -0,0 +1,20 @@
+import { apiConfig } from "../api-config";
+
+export async function apiMasterBidangBisnis() {
+  try {
+    const response = await apiConfig.get(`/master/bidang-bisnis`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiMasterSubBidangBisnis({id}: {id: string}) {
+  try {
+    const response = await apiConfig.get(`/master/sub-bidang-bisnis/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
--- a/service/api-client/api-portofolio.ts
+++ b/service/api-client/api-portofolio.ts
@@ -0,0 +1,66 @@
+import { apiConfig } from "../api-config";
+
+export async function apiPortofolioCreate({ data }: { data: any }) {
+  try {
+    const response = await apiConfig.post(`/mobile/portofolio`, {
+      data: data,
+    });
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiGetPortofolio({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/portofolio?id=${id}`);
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+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;
+  }
+}
--- a/service/upload-service.ts
+++ b/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;
  }
--- a/types/Type-Master.ts
+++ b/types/Type-Master.ts
@@ -0,0 +1,17 @@
+export interface IMasterBidangBisnis {
+  id: string;
+  name: string;
+  slug: string;
+  active: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface IMasterSubBidangBisnis {
+  id: string;
+  name: string;
+  slug: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}