feature profile

deskripsi:
- drawer & alert
- screen baru: edit profile, update photo, update background, create portofolio

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

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function Portofolio() {
+    return (
+        <View>
+            <Text>Portofolio</Text>
+        </View>
+    );
+}

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

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function PortofolioCreate() {
+    const { id } = useLocalSearchParams();
+    return (
+        <View>
+            <Text>Portofolio Create {id}</Text>
+        </View> 
+    );
+}

app/(application)/profile/[id].tsx

@@ -1,25 +1,51 @@
+
+import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { AccentColor, MainColor } from "@/constants/color-palet";
+import AlertCustom from "@/components/Alert/AlertCustom";
+import DrawerCustom from "@/components/Drawer/DrawerCustom";
+import { MainColor } from "@/constants/color-palet";
+import { DRAWER_HEIGHT } from "@/constants/constans-value";
+import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
 import { Styles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useRef, useState } from "react";
-import {
-  Alert,
-  Animated,
-  PanResponder,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { Animated, Text, TouchableOpacity } from "react-native";
 
-const DRAWER_HEIGHT = 300; // tinggi drawer
 export default function Profile() {
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [showLogoutAlert, setShowLogoutAlert] = useState(false);
 
+  const drawerItems: IMenuDrawerItem[] = [
+    {
+      icon: "create",
+      label: "Edit profile",
+      path: "/(application)/profile/edit",
+    },
+    {
+      icon: "camera",
+      label: "Ubah foto profile",
+      path: `/(application)/profile/update-photo/${id}`,
+    },
+    {
+      icon: "image",
+      label: "Ubah latar belakang",
+      path: `/(application)/profile/update-background/${id}`,
+    },
+    {
+      icon: "add-circle",
+      label: "Tambah portofolio",
+      path: `/(application)/portofolio/create/${id}`,
+    },
+    // {
+    //   icon: "settings",
+    //   label: "Dashboard Admin",
+    //   path: `/(application)/profile/dashboard-admin`,
+    // },
+    { icon: "log-out", label: "Keluar", color: "red", path: "" },
+  ];
+
   // Animasi menggunakan translateY (lebih kompatibel)
   const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
 
@@ -42,35 +68,16 @@ export default function Profile() {
     });
   };
 
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        return gestureState.dy > 10; // gesek ke bawah
-      },
-      onPanResponderMove: (_, gestureState) => {
-        const offset = gestureState.dy;
-        if (offset >= 0 && offset <= DRAWER_HEIGHT) {
-          drawerAnim.setValue(offset); // batasi hingga max 500
-        }
-      },
-      onPanResponderRelease: (_, gestureState) => {
-        if (gestureState.dy > 200) {
-          // Tutup drawer sepenuhnya jika gesek lebih dari 200
-          closeDrawer();
-        } else {
-          // Reset ke posisi awal jika gesek kurang
-          Animated.spring(drawerAnim, {
-            toValue: 0,
-            useNativeDriver: true,
-          }).start();
-        }
-      },
-    })
-  ).current;
+  const handleLogout = () => {
+    console.log("User logout");
+    router.replace("/");
+    setShowLogoutAlert(false);
+  };
 
   return (
     <>
       <ViewWrapper>
+        {/* Header */}
         <Stack.Screen
           options={{
             title: "Profile",
@@ -96,212 +103,29 @@ export default function Profile() {
         <Text style={Styles.textLabel}>Profile {id}</Text>
       </ViewWrapper>
 
-      {/* Overlay Gelap */}
-      {isDrawerOpen && (
-        <View
-          style={[
-            stylesDrawer.overlay,
-            { opacity: isDrawerOpen ? 0.6 : 0 }, // tampilkan overlay hanya saat drawer terbuka
-          ]}
-          pointerEvents={isDrawerOpen ? "auto" : "none"}
-        >
-          <TouchableOpacity onPress={closeDrawer} />
-        </View>
-      )}
+      {/* Drawer Komponen Eksternal */}
+      <DrawerCustom
+        height={350}
+        isVisible={isDrawerOpen}
+        drawerAnim={drawerAnim}
+        closeDrawer={closeDrawer}
+      >
+        <Profile_MenuDrawerSection
+          drawerItems={drawerItems}
+          setShowLogoutAlert={setShowLogoutAlert}
+        />
+      </DrawerCustom>
 
-      {/* Custom Bottom Drawer */}
-      {isDrawerOpen && (
-        <Animated.View
-          style={[
-            stylesDrawer.drawer,
-            { transform: [{ translateY: drawerAnim }] },
-          ]}
-          {...panResponder.panHandlers}
-        >
-          <View
-            style={[
-              stylesDrawer.headerBar,
-              { backgroundColor: MainColor.white },
-            ]}
-          />
-
-          <TouchableOpacity
-            style={stylesDrawer.menuItem}
-            onPress={() => {
-              alert("Pilihan 1 diklik");
-              closeDrawer();
-            }}
-          >
-            <Text>Menu Item 1</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            style={stylesDrawer.menuItem}
-            onPress={() => {
-              alert("Pilihan 2 diklik");
-              closeDrawer();
-            }}
-          >
-            <Text>Menu Item 2</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            style={stylesDrawer.menuItem}
-            onPress={() => setShowLogoutAlert(true)}
-          >
-            <Text style={{ color: "red" }}>Logout Custom</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            style={stylesDrawer.menuItem}
-            onPress={() =>
-              Alert.alert(
-                "Konfirmasi Logout",
-                "Apakah Anda sudah yakin?",
-                [
-                  {
-                    text: "Batal",
-                    onPress: () => console.log("Batal logout"),
-                    style: "cancel",
-                  },
-                  {
-                    text: "Ya",
-                    onPress: () => {
-                      console.log("Logout dipilih");
-                      // Di sini Anda bisa tambahkan fungsi logout seperti clear token, redirect, dll
-                      closeDrawer();
-                    },
-                  },
-                ],
-                { cancelable: true }
-              )
-            }
-          >
-            <Text style={{ color: "red" }}>Keluar</Text>
-          </TouchableOpacity>
-        </Animated.View>
-      )}
-
-      {showLogoutAlert && (
-        <View style={styles.alertOverlay}>
-          <View style={styles.alertBox}>
-            <Text style={styles.alertTitle}>Konfirmasi Logout</Text>
-            <Text style={styles.alertMessage}>Apakah Anda sudah yakin?</Text>
-            <View style={styles.alertButtons}>
-              <TouchableOpacity
-                style={[styles.alertButton, styles.cancelButton]}
-                onPress={() => setShowLogoutAlert(false)}
-              >
-                <Text style={styles.buttonText}>Batal</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={[styles.alertButton, styles.confirmButton]}
-                onPress={() => {
-                  console.log("Logout dipilih");
-                  setShowLogoutAlert(false);
-                  closeDrawer();
-                }}
-              >
-                <Text style={styles.buttonText}>Ya</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </View>
-      )}
+      {/* Alert Komponen Eksternal */}
+      <AlertCustom
+        isVisible={showLogoutAlert}
+        onLeftPress={() => setShowLogoutAlert(false)}
+        onRightPress={handleLogout}
+        title="Apakah anda yakin ingin keluar?"
+        textLeft="Batal"
+        textRight="Keluar"
+        colorRight={MainColor.red}
+      />
     </>
   );
 }
-
-const stylesDrawer = StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "black",
-    opacity: 0.4,
-  },
-  drawer: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: DRAWER_HEIGHT,
-    backgroundColor: AccentColor.darkblue,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    padding: 20,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.2,
-    elevation: 5,
-  },
-  headerBar: {
-    width: 40,
-    height: 5,
-    backgroundColor: MainColor.white,
-    borderRadius: 5,
-    alignSelf: "center",
-    marginVertical: 10,
-  },
-  menuItem: {
-    padding: 15,
-  },
-});
-
-const styles = StyleSheet.create({
-  alertOverlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0,0,0,0.5)",
-    justifyContent: "center",
-    alignItems: "center",
-    zIndex: 999,
-  },
-  alertBox: {
-    width: "80%",
-    backgroundColor: "white",
-    borderRadius: 10,
-    padding: 20,
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    elevation: 5,
-  },
-  alertTitle: {
-    fontSize: 18,
-    fontWeight: "bold",
-    marginBottom: 10,
-  },
-  alertMessage: {
-    textAlign: "center",
-    marginBottom: 20,
-  },
-  alertButtons: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  alertButton: {
-    flex: 1,
-    padding: 10,
-    borderRadius: 5,
-    marginHorizontal: 5,
-    alignItems: "center",
-  },
-  cancelButton: {
-    backgroundColor: "#ccc",
-  },
-  confirmButton: {
-    backgroundColor: "red",
-  },
-  buttonText: {
-    color: "white",
-    fontWeight: "bold",
-  },
-});

app/(application)/profile/edit.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function ProfileEdit() {
+    return (
+        <View>
+            <Text>Profile Edit</Text>
+        </View>
+    )
+}

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

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function UpdatePhotoBackground() {
+    const { id } = useLocalSearchParams();
+    return (
+        <View>
+            <Text>Update Photo Background {id}</Text>
+        </View>
+    )
+}

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

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function UpdatePhotoProfile() {
+  const { id } = useLocalSearchParams();
+  return (
+    <View>
+      <Text>Update Photo Profile {id}</Text>
+    </View>
+  );
+}

components/Alert/AlertCustom.tsx

@@ -0,0 +1,127 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { TEXT_SIZE_LARGE } from "@/constants/constans-value";
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+interface AlertCustomProps {
+  isVisible: boolean;
+  onLeftPress: () => void;
+  onRightPress: () => void;
+  title?: string;
+  message?: string;
+  textLeft?: string;
+  textRight?: string;
+  colorLeft?: string;
+  colorRight?: string;
+}
+
+export default function AlertCustom({
+  isVisible,
+  onLeftPress,
+  onRightPress,
+  title,
+  message,
+  textLeft,
+  textRight,
+  colorLeft,
+  colorRight,
+}: AlertCustomProps) {
+  if (!isVisible) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.alertBox}>
+        {title && message ? (
+          <>
+            <Text style={styles.alertTitle}>{title}</Text>
+            <Text style={styles.alertMessage}>{message}</Text>
+          </>
+        ) : title ? (
+          <Text style={styles.alertTitle}>{title}</Text>
+        ) : (
+          <Text style={styles.alertMessage}>{message}</Text>
+        )}
+        <View style={styles.alertButtons}>
+          <TouchableOpacity
+            style={[
+              styles.alertButton,
+              colorLeft ? { backgroundColor: colorLeft } : styles.leftButton,
+            ]}
+            onPress={onLeftPress}
+          >
+            <Text style={styles.buttonText}>{textLeft}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.alertButton,
+              colorRight ? { backgroundColor: colorRight } : styles.rightButton,
+            ]}
+            onPress={onRightPress}
+          >
+            <Text style={styles.buttonText}>{textRight}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+  },
+  alertBox: {
+    width: "90%",
+    backgroundColor: MainColor.darkblue,
+    borderColor: AccentColor.blue,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 20,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    elevation: 5,
+  },
+  alertTitle: {
+    fontSize: TEXT_SIZE_LARGE,
+    fontWeight: "bold",
+    marginBottom: 20,
+    color: MainColor.white,
+  },
+  alertMessage: {
+    textAlign: "center",
+    marginBottom: 20,
+    color: MainColor.white,
+  },
+  alertButtons: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  alertButton: {
+    flex: 1,
+    padding: 10,
+    borderRadius: 5,
+    marginHorizontal: 5,
+    alignItems: "center",
+  },
+  leftButton: {
+    backgroundColor: "gray",
+  },
+  rightButton: {
+    backgroundColor: MainColor.green,
+  },
+  buttonText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});

components/Drawer/DrawerCustom.tsx

@@ -0,0 +1,150 @@
+import React, { useRef } from "react";
+import {
+    Animated,
+    PanResponder,
+    StyleSheet,
+    View
+} from "react-native";
+
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { DRAWER_HEIGHT } from "@/constants/constans-value";
+
+interface DrawerCustomProps {
+  children?: React.ReactNode;
+  height?: number;
+  isVisible: boolean;
+  drawerAnim: Animated.Value;
+  closeDrawer: () => void;
+  //   openLogoutAlert: () => void;
+}
+
+export default function DrawerCustom({
+  children,
+  height,
+  isVisible,
+  drawerAnim,
+  closeDrawer,
+}: //   openLogoutAlert,
+DrawerCustomProps) {
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return gestureState.dy > 10; // gesek ke bawah
+      },
+      onPanResponderMove: (_, gestureState) => {
+        const offset = gestureState.dy;
+        if (offset >= 0 && offset <= DRAWER_HEIGHT) {
+          drawerAnim.setValue(offset);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 200) {
+          closeDrawer();
+        } else {
+          Animated.spring(drawerAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  if (!isVisible) return null;
+
+  return (
+    <>
+      {/* Overlay Gelap */}
+      <View
+        style={styles.overlay}
+        pointerEvents="auto"
+        onTouchStart={closeDrawer}
+      />
+
+      {/* Custom Bottom Drawer */}
+      <Animated.View
+        style={[
+          styles.drawer,
+          {
+            height: height || DRAWER_HEIGHT,
+            transform: [{ translateY: drawerAnim }],
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        <View
+          style={[styles.headerBar, { backgroundColor: MainColor.white }]}
+        />
+
+        {children}
+
+        {/* <TouchableOpacity
+          style={styles.menuItem}
+          onPress={() => {
+            alert("Pilihan 1 diklik");
+            closeDrawer();
+          }}
+        >
+          <Text>Menu Item 1</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.menuItem}
+          onPress={() => {
+            alert("Pilihan 2 diklik");
+            closeDrawer();
+          }}
+        >
+          <Text>Menu Item 2</Text>
+        </TouchableOpacity>
+
+
+        <TouchableOpacity
+          style={styles.menuItem}
+          onPress={() => alert("Logout via Alert bawaan")}
+        >
+          <Text style={{ color: "red" }}>Keluar</Text>
+        </TouchableOpacity> */}
+      </Animated.View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "black",
+    opacity: 0.6,
+    zIndex: 998,
+  },
+  drawer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: AccentColor.darkblue,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.2,
+    elevation: 5,
+    zIndex: 999,
+  },
+  headerBar: {
+    width: 40,
+    height: 5,
+    backgroundColor: MainColor.white,
+    borderRadius: 5,
+    alignSelf: "center",
+    marginVertical: 10,
+  },
+  menuItem: {
+    padding: 15,
+  },
+});

components/Drawer/MenuDrawerDynamicGird.tsx

@@ -0,0 +1,57 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM, TEXT_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+
+const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
+  const numColumns = columns;
+
+  return (
+    <View style={styles.container}>
+      {data.map((item: any, index: any) => (
+        <TouchableOpacity
+          key={index}
+          style={[styles.itemContainer, { flexBasis: `${100 / numColumns}%` }]}
+          onPress={() => onPressItem?.(item)}
+        >
+          <View style={styles.iconContainer}>
+            <Ionicons
+              name={item.icon}
+              size={ICON_SIZE_MEDIUM}
+              color={item.color || MainColor.white}
+            />
+          </View>
+          <Text style={styles.label}>{item.label}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+export default MenuDrawerDynamicGrid;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    padding: 0,
+  },
+  itemContainer: {
+    padding: 10,
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: AccentColor.blue,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  label: {
+    marginTop: 10,
+    fontSize: TEXT_SIZE_SMALL,
+    textAlign: "center",
+    color: MainColor.white,
+  },
+});

components/_Interface/types.ts

@@ -1,6 +1,6 @@
 import { Href } from "expo-router";
 
-export { ICustomTab, ITabs };
+export { ICustomTab, ITabs, IMenuDrawerItem };
 
 interface ICustomTab {
   icon: string;
@@ -18,3 +18,10 @@ interface ITabs {
   isActive: boolean;
   disabled?: boolean;
 }
+
+interface IMenuDrawerItem {
+  icon: string;
+  label: string;
+  path?: string;
+  color?: string;
+}

constants/constans-value.ts

@@ -0,0 +1,15 @@
+export {
+  TEXT_SIZE_SMALL,
+  TEXT_SIZE_MEDIUM,
+  TEXT_SIZE_LARGE,
+  ICON_SIZE_SMALL,
+  ICON_SIZE_MEDIUM,
+  DRAWER_HEIGHT,
+};
+
+const TEXT_SIZE_SMALL = 12;
+const TEXT_SIZE_MEDIUM = 14;
+const TEXT_SIZE_LARGE = 16;
+const ICON_SIZE_SMALL = 20;
+const ICON_SIZE_MEDIUM = 24;
+const DRAWER_HEIGHT = 500; // tinggi drawer5

eas.build.android

@@ -0,0 +1 @@
+eas build --profile preview

eas.json

@@ -1,6 +1,6 @@
 {
   "cli": {
-    "version": ">= 16.12.0",
+    "version": ">= 16.10.0",
     "appVersionSource": "remote"
   },
   "build": {
@@ -9,7 +9,10 @@
       "distribution": "internal"
     },
     "preview": {
-      "distribution": "internal"
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      }
     },
     "production": {
       "autoIncrement": true

screens/Profile/menuDrawerSection.tsx

@@ -0,0 +1,31 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
+import { router } from "expo-router";
+
+export default function Profile_MenuDrawerSection({
+  drawerItems,
+  setShowLogoutAlert,
+}: {
+  drawerItems: IMenuDrawerItem[];
+  setShowLogoutAlert: (value: boolean) => void;
+}) {
+  const handlePress = (item: IMenuDrawerItem) => {
+    if (item.label === "Keluar") {
+    //   console.log("Logout clicked");
+      setShowLogoutAlert(true);
+    } else {
+      router.push(item.path as any);
+    }
+  };
+
+  return (
+    <>
+      {/* Menu Items */}
+      <MenuDrawerDynamicGrid
+        data={drawerItems}
+        columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
+        onPressItem={handlePress}
+      />
+    </>
+  );
+}