fix & featur

deskripsi: - fix component stack dan drawer - new page list path profile
2025-07-09 17:22:43 +08:00
parent bfb029058c
commit ee7efaef6a
12 changed files with 199 additions and 83 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -102,6 +102,13 @@ export default function UserLayout() {
            headerLeft: () => <BackButton />,
          }}
        />
+        <Stack.Screen
+          name="maps/create"
+          options={{
+            title: "Tambah Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />

        {/* Marketplace */}
        <Stack.Screen
--- a/app/(application)/(user)/maps/create.tsx
+++ b/app/(application)/(user)/maps/create.tsx
@@ -0,0 +1,59 @@
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function MapsCreate() {
+  const { id } = useLocalSearchParams();
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Simpan");
+          router.replace(`/portofolio/${id}`);
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
+
+      <BaseBox style={{ height: 400 }}>
+        <TextCustom>Maps Her</TextCustom>
+      </BaseBox>
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+      />
+
+      <Spacing height={50} />
+
+      <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>
+  );
+}
--- a/app/(application)/(user)/portofolio/[id]/create.tsx
+++ b/app/(application)/(user)/portofolio/[id]/create.tsx
@@ -44,7 +44,8 @@ export default function PortofolioCreate() {
  }

  function handleSave() {
-    console.log("save");
+    console.log("Selanjutnya");
+    router.replace(`/maps/create`);
  }

  const buttonSave = (
@@ -56,16 +57,15 @@ export default function PortofolioCreate() {
  return (
    <ViewWrapper footerComponent={buttonSave}>
      {/* <TextCustom>Portofolio Create {id}</TextCustom> */}
-      <StackCustom>
+      <StackCustom gap={"xs"}>
        <InformationBox text="Lengkapi data bisnis anda." />
        <TextInputCustom
-          // disabled
          required
          label="Nama Bisnis"
          placeholder="Masukkan nama bisnis"
+
        />
        <SelectCustom
-          // disabled
          label="Bidang Usaha"
          required
          data={dummyMasterBidangBisnis.map((item) => ({
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -1,32 +1,86 @@
+import { DrawerCustom, TextCustom } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { DRAWER_HEIGHT } from "@/constants/constans-value";
+import { drawerItems } from "@/screens/Profile/ListPage";
+import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
 import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
 import { Stack, useLocalSearchParams } from "expo-router";
-import { Text } from "react-native";
+import { useRef, useState } from "react";
+import {
+  Animated,
+  InteractionManager,
+  Text,
+  TouchableOpacity,
+} from "react-native";

 export default function Portofolio() {
  const { id } = useLocalSearchParams();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
+
+  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current;
+
+  const openDrawer = () => {
+    setIsDrawerOpen(true);
+    Animated.timing(drawerAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+  const closeDrawer = () => {
+    Animated.timing(drawerAnim, {
+      toValue: DRAWER_HEIGHT, // sesuaikan dengan tinggi drawer Anda
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      InteractionManager.runAfterInteractions(() => {
+        setIsDrawerOpen(false); // baru ganti state setelah animasi selesai
+      });
+    });
+    setIsDrawerOpen(false);
+  };
  return (
+    <>
      <ViewWrapper>
        {/* Header */}
        <Stack.Screen
          options={{
            title: "Portofolio",
            headerLeft: () => <LeftButtonCustom />,
-        //   headerRight: () => (
-        //     <TouchableOpacity onPress={openDrawer}>
-        //       <Ionicons
-        //         name="ellipsis-vertical"
-        //         size={20}
-        //         color={MainColor.yellow}
-        //       />
-        //     </TouchableOpacity>
-        //   ),
+            headerRight: () => (
+              <TouchableOpacity onPress={openDrawer}>
+                <Ionicons
+                  name="ellipsis-vertical"
+                  size={20}
+                  color={MainColor.yellow}
+                />
+              </TouchableOpacity>
+            ),
            headerStyle: GStyles.headerStyle,
            headerTitleStyle: GStyles.headerTitleStyle,
          }}
        />
        <Text style={GStyles.textLabel}>Portofolio {id}</Text>
      </ViewWrapper>
+
+      {/* Drawer Komponen Eksternal */}
+      <DrawerCustom
+        isVisible={isDrawerOpen}
+        closeDrawer={closeDrawer}
+        drawerAnim={drawerAnim}
+        height={350}
+      >
+        <Profile_MenuDrawerSection
+          drawerItems={drawerItems({ id: id as string })}
+          setShowLogoutAlert={setShowLogoutAlert}
+          setIsDrawerOpen={setIsDrawerOpen}
+        />
+      </DrawerCustom>
+    </>
  );
 }
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -1,10 +1,10 @@
-import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import AlertCustom from "@/components/Alert/AlertCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
 import { DRAWER_HEIGHT } from "@/constants/constans-value";
+import { drawerItems } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
 import ProfilSection from "@/screens/Profile/ProfilSection";
 import { GStyles } from "@/styles/global-styles";
@@ -18,40 +18,6 @@ export default function Profile() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [showLogoutAlert, setShowLogoutAlert] = useState(false);

-  const drawerItems: IMenuDrawerItem[] = [
-    {
-      icon: "create",
-      label: "Edit profile",
-      path: `/(application)/profile/${id}/edit`,
-    },
-    {
-      icon: "camera",
-      label: "Ubah foto profile",
-      path: `/(application)/profile/${id}/update-photo`,
-    },
-    {
-      icon: "image",
-      label: "Ubah latar belakang",
-      path: `/(application)/profile/${id}/update-background`,
-    },
-    {
-      icon: "add-circle",
-      label: "Tambah portofolio",
-      path: `/(application)/portofolio/${id}/create`,
-    },
-    // {
-    //   icon: "settings",
-    //   label: "Dashboard Admin",
-    //   path: `/(application)/profile/dashboard-admin`,
-    // },
-    { icon: "log-out", label: "Keluar", color: "red", path: "" },
-    {
-      icon: "create-outline",
-      label: "Create profile",
-      path: `/(application)/profile/${id}/create`,
-    },
-  ];
-
  // Animasi menggunakan translateY (lebih kompatibel)
  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar

@@ -104,7 +70,6 @@ export default function Profile() {
          }}
        />
        <ProfilSection />
-       
      </ViewWrapper>

      {/* Drawer Komponen Eksternal */}
@@ -115,7 +80,7 @@ export default function Profile() {
        closeDrawer={closeDrawer}
      >
        <Profile_MenuDrawerSection
-          drawerItems={drawerItems}
+          drawerItems={drawerItems({ id: id as string })}
          setShowLogoutAlert={setShowLogoutAlert}
          setIsDrawerOpen={setIsDrawerOpen}
        />
--- a/components/Drawer/DrawerCustom.tsx
+++ b/components/Drawer/DrawerCustom.tsx
@@ -1,10 +1,10 @@
 import React, { useRef } from "react";
 import {
  Animated,
-    InteractionManager,
  PanResponder,
  StyleSheet,
  View,
+  InteractionManager,
 } from "react-native";

 import { AccentColor, MainColor } from "@/constants/color-palet";
@@ -86,7 +86,7 @@ DrawerCustomProps) {
        {...panResponder.panHandlers}
      >
        <View
-          style={[styles.headerBar, { backgroundColor: MainColor.white_gray }]}
+          style={[styles.headerBar, { backgroundColor: MainColor.white }]}
        />

        {children}
@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
  headerBar: {
    width: 40,
    height: 5,
-    backgroundColor: MainColor.white_gray,
+    backgroundColor: MainColor.white,
    borderRadius: 5,
    alignSelf: "center",
    marginVertical: 10,
--- a/components/Stack/StackCustom.tsx
+++ b/components/Stack/StackCustom.tsx
@@ -19,7 +19,7 @@ const StackCustom: React.FC<StackProps> = ({
  children,
  align = "stretch",
  justify = "flex-start",
-  gap = "xs",
+  gap = "md",
  direction = "column",
  style,
 }) => {
--- a/components/TextInput/TextInputCustom.tsx
+++ b/components/TextInput/TextInputCustom.tsx
@@ -89,19 +89,14 @@ const TextInputCustom = ({
          disabled && GStyles.disabledBox,
        ]}
      >
-        {iconLeft && (
+        {/* {iconLeft && (
          <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
-        )}
+        )} */}
        <RNTextInput
          style={[
            GStyles.inputText,
            { color: fontColor },
-            disabled
-              ? GStyles.inputTextDisabled // <-- custom style untuk text saat disabled
-              : GStyles.inputText,
-            disabled
-              ? GStyles.inputPlaceholderDisabled // <-- placeholder saat disabled
-              : GStyles.inputPlaceholder,
+            disabled && GStyles.inputPlaceholderDisabled, // <-- placeholder saat disabled
          ]}
          editable={!disabled}
          secureTextEntry={secureTextEntry && !isPasswordVisible}
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -31,8 +31,8 @@ export default function LoginView() {
    console.log("login user id :", id);

    // router.navigate("/verification");
-    router.navigate(`/(application)/(user)/profile/${id}`);
-    // router.navigate("/(application)/home");
+    // router.navigate(`/(application)/(user)/profile/${id}`);
+    router.navigate("/(application)/(user)/home");
    // router.navigate(`/(application)/profile/${id}/edit`);
  }

--- a/screens/Profile/ListPage.tsx
+++ b/screens/Profile/ListPage.tsx
@@ -0,0 +1,35 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+
+export const drawerItems = ({ id }: { id: string }): IMenuDrawerItem[] => [
+  {
+    icon: "create",
+    label: "Edit profile",
+    path: `/(application)/profile/${id}/edit`,
+  },
+  {
+    icon: "camera",
+    label: "Ubah foto profile",
+    path: `/(application)/profile/${id}/update-photo`,
+  },
+  {
+    icon: "image",
+    label: "Ubah latar belakang",
+    path: `/(application)/profile/${id}/update-background`,
+  },
+  {
+    icon: "add-circle",
+    label: "Tambah portofolio",
+    path: `/(application)/portofolio/${id}/create`,
+  },
+  // {
+  //   icon: "settings",
+  //   label: "Dashboard Admin",
+  //   path: `/(application)/profile/dashboard-admin`,
+  // },
+  { icon: "log-out", label: "Keluar", color: "red", path: "" },
+  {
+    icon: "create-outline",
+    label: "Create profile",
+    path: `/(application)/profile/${id}/create`,
+  },
+];
--- a/styles/global-styles.ts
+++ b/styles/global-styles.ts
@@ -79,6 +79,7 @@ export const GStyles = StyleSheet.create({
  headerTitleStyle: {
    color: MainColor.yellow,
    fontWeight: "bold",
+    fontSize: TEXT_SIZE_LARGE,
  },
  // =============== STACK HEADER =============== //