feature & fix

deskripsi:
- new component : Center
- fix component : Button > disable props
- feture : fix portofolio > edit, edit logo, edit sosmed
- fix feature : maps > edit map, custom-pin
- fix featue : profile > update photo
# No Issue

app/(application)/(user)/maps/[id]/custom-pin.tsx

@@ -1,10 +1,54 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  MapCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import CenterCustom from "@/components/Center/CenterCustom";
+import { router, useLocalSearchParams } from "expo-router";
 
 export default function MapsCustomPin() {
+  const { id } = useLocalSearchParams();
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log(`Simpan maps ${id}`);
+          router.replace(`/portofolio/${id}`);
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper footerComponent={buttonFooter}>
-        <TextCustom>Maps Custom Pin</TextCustom>
+        <StackCustom>
+          <InformationBox text="Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda." />
+          <CenterCustom>
+            <AvatarCustom size="xl" />
+          </CenterCustom>
+          <ButtonCenteredOnly
+            onPress={() => console.log("Upload")}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
+          <Spacing />
+
+          <BaseBox>
+            <MapCustom />
+          </BaseBox>
+          <Spacing />
+        </StackCustom>
       </ViewWrapper>
     </>
   );

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

@@ -1,11 +1,59 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  MapCustom,
+  Spacing,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import { router, useLocalSearchParams } from "expo-router";
 
 export default function MapsEdit() {
+  const { id } = useLocalSearchParams();
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log(`Simpan maps ${id}`);
+          router.replace(`/portofolio/${id}`);
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
-    <>
+    <ViewWrapper footerComponent={buttonFooter}>
-      <ViewWrapper>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
-        <TextCustom>Maps Edit</TextCustom>
+
-      </ViewWrapper>
+      <BaseBox>
-    </>
+        <MapCustom />
+      </BaseBox>
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+      />
+
+      <Spacing />
+
+      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
+      <LandscapeFrameUploaded />
+      <ButtonCenteredOnly
+        icon="upload"
+        onPress={() => {
+          console.log("Upload foto ");
+          router.navigate(`/take-picture/${id}`);
+        }}
+      >
+        Upload
+      </ButtonCenteredOnly>
+      <Spacing height={50} />
+    </ViewWrapper>
   );
 }

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

@@ -18,7 +18,7 @@ export default function MapsCreate() {
     <BoxButtonOnFooter>
       <ButtonCustom
         onPress={() => {
-          console.log("Simpan");
+          console.log(`Simpan maps ${id}`);
           router.replace(`/portofolio/${id}`);
         }}
       >

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

@@ -1,10 +1,47 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  ViewWrapper,
+} from "@/components";
+import { router, useLocalSearchParams } from "expo-router";
 
 export default function PortofolioEditLogo() {
+  const { id } = useLocalSearchParams();
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Simpan logo ");
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper footerComponent={buttonFooter}>
-        <TextCustom>Portofolio Edit Logo</TextCustom>
+        <BaseBox
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            height: 250,
+          }}
+        >
+          <AvatarCustom size="xl" />
+        </BaseBox>
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => router.navigate(`/take-picture/${id}`)}
+        >
+          Update
+        </ButtonCenteredOnly>
       </ViewWrapper>
     </>
   );

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

@@ -1,10 +1,35 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { useLocalSearchParams, router } from "expo-router";
 
 export default function PortofolioEditSocialMedia() {
+  const { id } = useLocalSearchParams();
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log(`Simpan sosmed ${id}`);
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper footerComponent={buttonFooter}>
-        <TextCustom>Portofolio Edit Social Media</TextCustom>
+        <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" />
       </ViewWrapper>
     </>
   );

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

@@ -1,10 +1,150 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  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 { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
 
 export default function PortofolioEdit() {
+  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: "",
+    deskripsi: "",
+  });
+
+  function handleInputValue(phoneNumber: string) {
+    setInputValue(phoneNumber);
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  function handleSave() {
+    console.log(`Update portofolio berhasil ${id}`);
+    router.back();
+  }
+
+  const buttonUpdate = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={handleSave}>Simpan</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper footerComponent={buttonUpdate}>
-        <TextCustom>Portofolio Edit</TextCustom>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            required
+            label="Nama Bisnis"
+            placeholder="Masukkan nama bisnis"
+          />
+
+          <SelectCustom
+            label="Bidang Usaha"
+            required
+            data={dummyMasterBidangBisnis.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data.bidang_usaha}
+            onChange={(value) => {
+              setData({ ...(data as any), bidang_usaha: value });
+            }}
+          />
+
+          <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>
+          <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={inputValue}
+              onChangePhoneNumber={handleInputValue}
+              selectedCountry={selectedCountry}
+              onChangeSelectedCountry={handleSelectedCountry}
+              defaultCountry="ID"
+              placeholder="xxx-xxx-xxx"
+            />
+          </View>
+          <Spacing />
+
+          <TextInputCustom
+            required
+            label="Alamat Bisnis"
+            placeholder="Masukkan alamat bisnis"
+          />
+
+          <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={100}
+          />
+          <Spacing />
+        </StackCustom>
       </ViewWrapper>
     </>
   );

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

@@ -1,13 +1,12 @@
 import {
+  AvatarCustom,
   BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { router, useLocalSearchParams } from "expo-router";
-import { Image } from "react-native";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
@@ -28,11 +27,7 @@ export default function UpdatePhotoProfile() {
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
-        <Image
+        <AvatarCustom size="xl" />
-          source={DUMMY_IMAGE.avatar}
-          resizeMode="cover"
-          style={{ width: 200, height: 200 }}
-        />
       </BaseBox>
 
       <ButtonCenteredOnly

components/Button/ButtonCustom.tsx

@@ -38,10 +38,11 @@ const ButtonCustom: React.FC<ButtonProps> = ({
     <TouchableOpacity
       style={[
         stylesButton.button,
-        disabled && stylesButton.disabled,
-        style,
         { borderRadius: radius },
-        { backgroundColor },
+        disabled
+          ? [stylesButton.disabled, { backgroundColor: MainColor.disabled }]
+          : { backgroundColor },
+        style,
       ]}
       onPress={onPress}
       disabled={disabled}

components/Center/CenterCustom.tsx

@@ -0,0 +1,51 @@
+// Center.tsx
+import React from "react";
+import { View, StyleSheet, ViewStyle } from "react-native";
+
+type JustifyContent =
+  | "flex-start"
+  | "flex-end"
+  | "center"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+
+type AlignItems = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+
+interface CenterProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  direction?: "row" | "column";
+  justifyContent?: JustifyContent;
+  alignItems?: AlignItems;
+}
+
+const CenterCustom: React.FC<CenterProps> = ({
+  children,
+  style,
+  direction = "column",
+  justifyContent = "center",
+  alignItems = "center",
+}) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        { flexDirection: direction },
+        { justifyContent },
+        { alignItems },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default CenterCustom;

screens/Authentication/LoginView.tsx

@@ -31,9 +31,10 @@ export default function LoginView() {
     console.log("login user id :", id);
 
     // router.navigate("/verification");
-    // router.navigate(`/(application)/(user)/profile/${id}`);
+    router.navigate(`/(application)/(user)/profile/${id}`);
-    router.navigate("/(application)/(user)/home");
+    // router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
+    // router.navigate(`/(application)/(user)/portofolio/${id}`)
   }
 
   return (