Portofolio

Add:
- ervice/api-client/api-portofolio.ts
- creens/Portofolio/BoxPortofolioView.tsx
- screens/Portofolio/ButtonCreatePortofolio.tsx
- create dan show

### No Issue

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

screens/Portofolio/ButtonCreatePortofolio.tsx

@@ -0,0 +1,121 @@
+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[];
+}
+
+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,
+}: Props) {
+  const handleCreatePortofolio = async () => {
+    try {
+      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,
+      });
+    }
+  };
+
+  // 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>
+    </BoxButtonOnFooter>
+  );
+}

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>

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>
-  );
-}

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"

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

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