feature & fix

deskripsi:
- perubahan komponen drawer
- penambahan list page drawer portofolio
- new file portofolio: edit, edit logo, edit sosmed
- new file maps: edit, custom-pin
#No Issue

app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "hipmi-mobile",
+    "name": "HIPMI BADUNG",
     "slug": "hipmi-mobile",
     "version": "1.0.0",
     "orientation": "portrait",

app/(application)/(user)/_layout.tsx

@@ -0,0 +1,138 @@
+import { BackButton } from "@/components";
+import LeftButtonCustom from "@/components/Button/BackButton";
+import { MainColor } from "@/constants/color-palet";
+import { HeaderStyles } from "@/styles/header-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+
+export default function UserLayout() {
+  return (
+    <>
+      <Stack screenOptions={HeaderStyles}>
+        <Stack.Screen
+          name="home"
+          options={{
+            title: "HIPMI",
+            headerLeft: () => (
+              <Ionicons
+                name="search"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.push("/user-search")}
+              />
+            ),
+            headerRight: () => (
+              <Ionicons
+                name="notifications"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.push("/notifications")}
+              />
+            ),
+          }}
+        />
+
+        {/* ========== Profile Section ========= */}
+        <Stack.Screen
+          name="profile"
+          options={{
+            headerShown: false,
+          }}
+        />
+
+        {/* ========== Portofolio Section ========= */}
+        <Stack.Screen
+          name="portofolio"
+          options={{
+            headerShown: false,
+          }}
+        />
+
+        {/* ========== User Search Section ========= */}
+        <Stack.Screen
+          name="user-search/index"
+          options={{
+            title: "Pencarian Pengguna",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Notification Section ========= */}
+        <Stack.Screen
+          name="notifications/index"
+          options={{
+            title: "Notifikasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Event Section ========= */}
+        <Stack.Screen
+          name="event/(tabs)"
+          options={{
+            title: "Event",
+            headerLeft: () => (
+              <LeftButtonCustom path="/(application)/(user)/home" />
+            ),
+          }}
+        />
+
+        <Stack.Screen
+          name="event/detail/[id]"
+          options={{
+            title: "Event Detail",
+            headerLeft: () => <LeftButtonCustom />,
+          }}
+        />
+
+        {/* ========== Forum Section ========= */}
+        <Stack.Screen
+          name="forum/index"
+          options={{
+            title: "Forum",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Maps Section ========= */}
+        <Stack.Screen
+          name="maps/index"
+          options={{
+            title: "Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="maps/create"
+          options={{
+            title: "Tambah Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="maps/[id]/edit"
+          options={{
+            title: "Edit Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="maps/[id]/custom-pin"
+          options={{
+            title: "Custom Pin Maps",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== Marketplace Section ========= */}
+        <Stack.Screen
+          name="marketplace/index"
+          options={{
+            title: "Market Place",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+      </Stack>
+    </>
+  );
+}

app/(application)/(user)/event/(tabs)/_layout.tsx

@@ -8,7 +8,7 @@ export default function EventLayout() {
       screenOptions={{
         headerShown: false,
         tabBarActiveTintColor: MainColor.yellow,
-        tabBarInactiveTintColor: MainColor.white,
+        tabBarInactiveTintColor: MainColor.white_gray,
         tabBarStyle: {
           backgroundColor: MainColor.darkblue,
         },

app/(application)/(user)/forum/index.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function Forum() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Forum</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function MapsCustomPin() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Maps Custom Pin</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function MapsEdit() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Maps Edit</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

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

@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function Maps() {
+    return (
+        <ViewWrapper>
+            <TextCustom>Maps</TextCustom>
+        </ViewWrapper>
+    )
+}

app/(application)/(user)/marketplace/index.tsx

@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function Marketplace() {
+    return (
+        <ViewWrapper>
+            <TextCustom>Marketplace</TextCustom>
+        </ViewWrapper>
+    );
+}

app/(application)/(user)/notifications/index.tsx

@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function Notifications() {
+  return (
+    <ViewWrapper>
+      <TextCustom>Notifications</TextCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,191 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  InformationBox,
+  LandscapeFrameUploaded,
+  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 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: "",
+    deskripsi: "",
+  });
+
+  function handleInputValue(phoneNumber: string) {
+    setInputValue(phoneNumber);
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  function handleSave() {
+    console.log("Selanjutnya");
+    router.replace(`/maps/create`);
+  }
+
+  const buttonSave = (
+    <BoxButtonOnFooter>
+      <ButtonCustom onPress={handleSave}>Selanjutnya</ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper footerComponent={buttonSave}>
+      {/* <TextCustom>Portofolio Create {id}</TextCustom> */}
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Lengkapi data bisnis anda." />
+        <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 />
+
+        {/* Logo */}
+        <InformationBox text="Upload logo bisnis anda untuk di tampilaka pada portofolio." />
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => {
+            console.log("Upload logo >>", id);
+            router.navigate(`/(application)/take-picture/${id}`);
+          }}
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing height={40} />
+
+        {/* Social Media */}
+        <InformationBox text="Isi hanya pada sosial media yang anda miliki." />
+        <TextInputCustom
+          label="Tiktok"
+          placeholder="Masukkan username tiktok"
+        />
+        <TextInputCustom
+          label="Facebook"
+          placeholder="Masukkan username facebook"
+        />
+        <TextInputCustom
+          label="Instagram"
+          placeholder="Masukkan username instagram"
+        />
+        <TextInputCustom
+          label="Twitter"
+          placeholder="Masukkan username twitter"
+        />
+        <TextInputCustom
+          label="Youtube"
+          placeholder="Masukkan username youtube"
+        />
+        <Spacing />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function PortofolioEditLogo() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Portofolio Edit Logo</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function PortofolioEditSocialMedia() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Portofolio Edit Social Media</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function PortofolioEdit() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Portofolio Edit</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { DrawerCustom } from "@/components";
+import LeftButtonCustom from "@/components/Button/BackButton";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { drawerItemsPortofolio } from "@/screens/Portofolio/ListPage";
+import Portofolio_MenuDrawerSection from "@/screens/Portofolio/MenuDrawer";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import {
+  Text,
+  TouchableOpacity
+} from "react-native";
+
+export default function Portofolio() {
+  const { id } = useLocalSearchParams();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const openDrawer = () => {
+    setIsDrawerOpen(true);
+  };
+  const closeDrawer = () => {
+    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>
+            ),
+            headerStyle: GStyles.headerStyle,
+            headerTitleStyle: GStyles.headerTitleStyle,
+          }}
+        />
+        <Text style={GStyles.textLabel}>Portofolio {id}</Text>
+      </ViewWrapper>
+
+      {/* Drawer Komponen Eksternal */}
+      <DrawerCustom
+        isVisible={isDrawerOpen}
+        closeDrawer={closeDrawer}
+        height={350}
+      >
+        <Portofolio_MenuDrawerSection
+          drawerItems={drawerItemsPortofolio({ id: id as string })}
+          setIsDrawerOpen={setIsDrawerOpen}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,47 @@
+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";
+
+export default function ListPortofolio() {
+  const { id } = useLocalSearchParams();
+  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>
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/portofolio/_layout.tsx

@@ -0,0 +1,32 @@
+import LeftButtonCustom from "@/components/Button/BackButton";
+import { HeaderStyles } from "@/styles/header-styles";
+import { Stack } from "expo-router";
+
+export default function PortofolioLayout() {
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          ...HeaderStyles,
+          headerLeft: () => <LeftButtonCustom />,
+        }}
+      >
+        {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}
+        <Stack.Screen
+          name="[id]/create"
+          options={{ title: "Tambah Portofolio" }}
+        />
+        <Stack.Screen
+          name="[id]/list"
+          options={{ title: "Daftar Portofolio" }}
+        />
+        <Stack.Screen name="[id]/edit" options={{ title: "Edit Portofolio" }} />
+        <Stack.Screen name="[id]/edit-logo" options={{ title: "Edit Logo " }} />
+        <Stack.Screen
+          name="[id]/edit-social-media"
+          options={{ title: "Edit Social Media" }}
+        />
+      </Stack>
+    </>
+  );
+}

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

@@ -1,5 +1,6 @@
 import {
   AvatarCustom,
+  ButtonCenteredOnly,
   ButtonCustom,
   SelectCustom,
   Spacing,
@@ -7,14 +8,15 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
-import ButtonUpload from "@/components/Button/ButtonUpload";
 import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
-import { GStyles } from "@/styles/global-styles";
+import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { View } from "react-native";
 
 export default function CreateProfile() {
+  const { id } = useLocalSearchParams();
   const [data, setData] = useState({
     name: "",
     email: "",
@@ -24,20 +26,18 @@ export default function CreateProfile() {
 
   const handlerSave = () => {
     console.log("data create profile >>", data);
-    // router.back();
+    router.back();
   };
 
   const footerComponent = (
-    <View style={GStyles.bottomBar}>
-      <View style={GStyles.bottomBarContainer}>
-        <ButtonCustom
-          onPress={handlerSave}
-          disabled={!data.name || !data.email || !data.address || !data.gender}
-        >
-          Simpan
-        </ButtonCustom>
-      </View>
-    </View>
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={handlerSave}
+        // disabled={!data.name || !data.email || !data.address || !data.gender}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
   );
 
   return (
@@ -47,7 +47,12 @@ export default function CreateProfile() {
         <View style={{ alignItems: "center" }}>
           <AvatarCustom size="xl" />
           <Spacing />
-          <ButtonUpload onPress={() => console.log("pressed")} />
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() => router.navigate(`/take-picture/${id}`)}
+          >
+            Upload
+          </ButtonCenteredOnly>
         </View>
 
         <Spacing />
@@ -56,7 +61,12 @@ export default function CreateProfile() {
           <InformationBox text="Upload foto latar belakang anda." />
           <LandscapeFrameUploaded />
           <Spacing />
-          <ButtonUpload onPress={() => console.log("pressed")} />
+          <ButtonCenteredOnly
+            icon="upload"
+            onPress={() => router.navigate(`/take-picture/${id}`)}
+          >
+            Upload
+          </ButtonCenteredOnly>
         </View>
 
         <Spacing />

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

@@ -6,6 +6,7 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { StyleSheet } from "react-native";
@@ -44,15 +45,17 @@ export default function ProfileEdit() {
 
   return (
     <ViewWrapper
-      bottomBarComponent={
-        <ButtonCustom
-          disabled={
-            !data.nama || !data.email || !data.alamat || !data.selectedValue
-          }
-          onPress={handleSave}
-        >
-          Simpan
-        </ButtonCustom>
+      footerComponent={
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            // disabled={
+            //   !data.nama || !data.email || !data.alamat || !data.selectedValue
+            // }
+            onPress={handleSave}
+          >
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
       }
     >
       <StackCustom gap={"xs"}>

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

@@ -1,79 +1,28 @@
-import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import AlertCustom from "@/components/Alert/AlertCustom";
-import BackButton from "@/components/Button/BackButton";
+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 { drawerItemsProfile } from "@/screens/Profile/ListPage";
 import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
 import ProfilSection from "@/screens/Profile/ProfilSection";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import React, { useRef, useState } from "react";
-import { Animated, InteractionManager, TouchableOpacity } from "react-native";
+import React, { useState } from "react";
+import { TouchableOpacity } from "react-native";
 
 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/${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
-
   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);
   };
 
   const handleLogout = () => {
@@ -89,7 +38,7 @@ export default function Profile() {
         <Stack.Screen
           options={{
             title: "Profile",
-            headerLeft: () => <BackButton />,
+            headerLeft: () => <LeftButtonCustom />,
             headerRight: () => (
               <TouchableOpacity onPress={openDrawer}>
                 <Ionicons
@@ -104,18 +53,16 @@ export default function Profile() {
           }}
         />
         <ProfilSection />
-       
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
         height={350}
         isVisible={isDrawerOpen}
-        drawerAnim={drawerAnim}
         closeDrawer={closeDrawer}
       >
         <Profile_MenuDrawerSection
-          drawerItems={drawerItems}
+          drawerItems={drawerItemsProfile({ id: id as string })}
           setShowLogoutAlert={setShowLogoutAlert}
           setIsDrawerOpen={setIsDrawerOpen}
         />

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

@@ -1,25 +1,31 @@
-import { BaseBox, ButtonCustom } from "@/components";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import ButtonUpload from "@/components/Button/ButtonUpload";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { router, useLocalSearchParams } from "expo-router";
 import { Image } from "react-native";
 
 export default function UpdateBackgroundProfile() {
   const { id } = useLocalSearchParams();
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Simpan foto background >>", id);
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
   return (
-    <ViewWrapper
-      bottomBarComponent={
-        <ButtonCustom
-          onPress={() => {
-            console.log("Simpan foto background >>", id);
-            router.back();
-          }}
-        >
-          Simpan
-        </ButtonCustom>
-      }
-    >
+    <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -30,12 +36,12 @@ export default function UpdateBackgroundProfile() {
         />
       </BaseBox>
 
-      <ButtonUpload
-        title="Update"
-        onPress={() =>
-          router.navigate(`/(application)/take-picture/${id}`)
-        }
-      />
+      <ButtonCenteredOnly
+        icon="upload"
+        onPress={() => router.navigate(`/(application)/take-picture/${id}`)}
+      >
+        Update
+      </ButtonCenteredOnly>
     </ViewWrapper>
   );
 }

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

@@ -1,25 +1,30 @@
-import { BaseBox, ButtonCustom } from "@/components";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import ButtonUpload from "@/components/Button/ButtonUpload";
 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();
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        onPress={() => {
+          console.log("Simpan foto profile >>", id);
+          router.back();
+        }}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
-    <ViewWrapper
-      bottomBarComponent={
-        <ButtonCustom
-          onPress={() => {
-            console.log("Simpan foto profile >>", id);
-            router.back();
-          }}
-        >
-          Simpan
-        </ButtonCustom>
-      }
-    >
+    <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -30,13 +35,18 @@ export default function UpdatePhotoProfile() {
         />
       </BaseBox>
 
-      <ButtonUpload
-        title="Update"
+      <ButtonCenteredOnly
+        icon="upload"
         onPress={() => {
           console.log("Update photo >>", id);
           router.navigate(`/(application)/take-picture/${id}`);
         }}
-      />
+      >
+        Update
+      </ButtonCenteredOnly>
+
+      {/* <Spacing />
+      <ButtonCustom>Test</ButtonCustom> */}
     </ViewWrapper>
   );
 }

app/(application)/(user)/user-search/index.tsx

@@ -0,0 +1,9 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function UserSearch() {
+  return (
+    <ViewWrapper>
+      <TextCustom>User Search</TextCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/_layout.tsx

@@ -1,171 +1,13 @@
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { GStyles } from "@/styles/global-styles";
+import { MainColor } from "@/constants/color-palet";
+import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
 export default function ApplicationLayout() {
   return (
     <>
-      <Stack
-        screenOptions={{
-          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: GStyles.headerTitleStyle,
-          headerTitleAlign: "center",
-          contentStyle: {
-            borderBottomColor: AccentColor.blue,
-            borderBottomWidth: 2,
-          },
-          // headerLargeStyle: {
-          //   backgroundColor: MainColor.darkblue,
-          // },
-        }}
-      >
-        <Stack.Screen
-          name="home"
-          options={{
-            title: "HIPMI",
-            headerLeft: () => (
-              <Ionicons
-                name="search"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/(application)/user-search")}
-              />
-            ),
-            headerRight: () => (
-              <Ionicons
-                name="notifications"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/(application)/notifications")}
-              />
-            ),
-          }}
-        />
-
-        <Stack.Screen
-          name="forum/index"
-          options={{
-            title: "Forum",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
-          }}
-        />
-
-        <Stack.Screen
-          name="maps/index"
-          options={{
-            title: "Maps",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
-          }}
-        />
-
-        <Stack.Screen
-          name="marketplace/index"
-          options={{
-            title: "Market Place",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
-          }}
-        />
-
-        {/* Profile */}
-        <Stack.Screen
-          name="profile"
-          options={{
-            headerShown: false,
-          }}
-        />
-
-        {/* Portofolio */}
-        <Stack.Screen
-          name="portofolio"
-          options={{
-            headerShown: false,
-          }}
-        />
-
-        {/* Event */}
-        <Stack.Screen
-          name="event/(tabs)"
-          options={{
-            title: "Event",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.push("/(application)/home")}
-              />
-            ),
-          }}
-        />
-
-        <Stack.Screen
-          name="event/detail/[id]"
-          options={{
-            title: "Detail",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
-          }}
-        />
-
-        {/* User Search */}
-        <Stack.Screen
-          name="user-search/index"
-          options={{
-            title: "Pencarian Pengguna",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
-          }}
-        />
-
-        {/* Notification */}
-        <Stack.Screen
-          name="notifications/index"
-          options={{
-            title: "Notifikasi",
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
-          }}
-        />
+      <Stack screenOptions={HeaderStyles}>
+        <Stack.Screen name="(user)" options={{ headerShown: false }} />
 
         {/* Take Picture */}
         <Stack.Screen

app/(application)/forum/index.tsx

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

app/(application)/maps/index.tsx

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

app/(application)/marketplace/index.tsx

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

app/(application)/notifications/index.tsx

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

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

@@ -1,11 +0,0 @@
-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)/portofolio/[id]/index.tsx

@@ -1,32 +0,0 @@
-import BackButton from "@/components/Button/BackButton";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { GStyles } from "@/styles/global-styles";
-import { Stack, useLocalSearchParams } from "expo-router";
-import { Text } from "react-native";
-
-export default function Portofolio() {
-    const { id } = useLocalSearchParams();
-  return (
-    <ViewWrapper>
-      {/* Header */}
-      <Stack.Screen
-        options={{
-          title: "Portofolio",
-          headerLeft: () => <BackButton />,
-        //   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>
-  );
-}

app/(application)/portofolio/_layout.tsx

@@ -1,26 +0,0 @@
-
-import BackButton from "@/components/Button/BackButton";
-import { GStyles } from "@/styles/global-styles";
-import { Stack } from "expo-router";
-
-export default function PortofolioLayout() {
-  return (
-    <>
-      <Stack
-        screenOptions={{
-          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: GStyles.headerTitleStyle,
-          headerTitleAlign: "center",
-          headerBackButtonDisplayMode: "minimal",
-          headerLeft: () => <BackButton />,
-        }}
-      >
-        {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}
-        <Stack.Screen
-          name="[id]/create"
-          options={{ title: "Tambah Portofolio" }}
-        />
-      </Stack>
-    </>
-  );
-}

app/(application)/take-picture/[id]/index.tsx

@@ -67,7 +67,7 @@ export default function TakePicture() {
         />
         <Spacing />
 
-        <StackCustom>
+        <StackCustom >
           <ButtonCustom onPress={() => setUri(null)} title="Foto ulang" />
           <ButtonCustom
             onPress={() => {

app/(application)/user-search/index.tsx

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

app/+not-found.tsx

@@ -1,9 +1,16 @@
-import { Text, View } from "react-native";
+import { StackCustom, TextCustom, ViewWrapper } from "@/components";
 
 export default function NotFoundScreen() {
     return (
-        <View>
-            <Text>Not Found</Text>
-        </View>
-    )
+      <ViewWrapper>
+        <StackCustom align="center" gap={0} style={{justifyContent: "center", alignItems: "center", flex: 1}}>
+          <TextCustom size="large" bold style={{fontSize: 100}}>
+            404
+          </TextCustom>
+          <TextCustom size="large" bold>
+            Sorry, File Not Found
+          </TextCustom>
+        </StackCustom>
+      </ViewWrapper>
+    );
 }

app/_layout.tsx

@@ -15,6 +15,7 @@ export default function RootLayout() {
           }}
         >
           <Stack.Screen name="index" options={{ title: "" }} />
+          <Stack.Screen name="+not-found" options={{ title: "" }} />
           <Stack.Screen
             name="verification"
             options={{ title: "", headerBackVisible: false }}

components/Alert/AlertCustom.tsx

@@ -95,12 +95,12 @@ const styles = StyleSheet.create({
     fontSize: TEXT_SIZE_LARGE,
     fontWeight: "bold",
     marginBottom: 20,
-    color: MainColor.white,
+    color: MainColor.white_gray,
   },
   alertMessage: {
     textAlign: "center",
     marginBottom: 20,
-    color: MainColor.white,
+    color: MainColor.white_gray,
   },
   alertButtons: {
     flexDirection: "row",

components/Box/BoxButtonOnFooter.tsx

@@ -0,0 +1,16 @@
+import { GStyles } from "@/styles/global-styles";
+import { StyleProp, View, ViewStyle } from "react-native";
+
+export default function BoxButtonOnFooter({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) {
+  return (
+    <View style={GStyles.bottomBar}>
+      <View style={[GStyles.bottomBarContainer, style]}>{children}</View>
+    </View>
+  );
+}

components/Box/InformationBox.tsx

@@ -16,7 +16,7 @@ export default function InformationBox({ text }: { text: string }) {
             <Ionicons
               name="information-circle-outline"
               size={24}
-              color={MainColor.white}
+              color={MainColor.white_gray}
             />
           </Grid.Col>
           <Grid.Col span={10} style={{ justifyContent: "center" }}>

components/Button/BackButton.tsx

@@ -1,16 +1,22 @@
-import { Ionicons } from "@expo/vector-icons";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { Href, router } from "expo-router";
 
-const BackButton = () => {
+/**
+ * 
+ * @param path - path to navigate to ?
+ * @default router.back()
+ * @returns if path : router.replace(path) else router.back()
+ */
+const LeftButtonCustom = ({path}: {path?: Href}) => {
   return (
     <Ionicons
       name="arrow-back"
       size={20}
       color={MainColor.yellow}
-      onPress={() => router.back()}
+      onPress={() => path ? router.replace(path) : router.back()}
     />
   );
 };
 
-export default BackButton;
+export default LeftButtonCustom;

components/Button/ButtonCenteredOnly.tsx

@@ -0,0 +1,29 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import { Feather } from "@expo/vector-icons";
+import React from "react";
+import ButtonCustom from "./ButtonCustom";
+
+interface ButtonCenteredOnlyProps {
+  children?: React.ReactNode;
+  icon?: "plus" | "upload";
+  onPress: () => void;
+}
+export default function ButtonCenteredOnly({
+  onPress,
+  children,
+  icon = "plus"
+}: ButtonCenteredOnlyProps) {
+  return (
+    <ButtonCustom
+      onPress={onPress}
+      iconLeft={
+        <Feather name={icon} size={ICON_SIZE_BUTTON} color={MainColor.black} />
+      }
+      style={[GStyles.buttonCentered50Percent]}
+    >
+      {children}
+    </ButtonCustom>
+  );
+}

components/Button/ButtonCustom.tsx

@@ -2,13 +2,12 @@
 
 import React from "react";
 import { StyleProp, Text, TouchableOpacity, ViewStyle } from "react-native";
-import buttonStyles from "./buttonCustomStyles";
 import { radiusMap } from "@/constants/radius-value";
 import { MainColor } from "@/constants/color-palet";
+import { stylesButton } from "./buttonCustomStyles";
 
 // Import radiusMap
 
-
 // Definisi type untuk radius
 type RadiusType = keyof typeof radiusMap | number;
 
@@ -30,30 +29,29 @@ const ButtonCustom: React.FC<ButtonProps> = ({
   title = "Button",
   backgroundColor = MainColor.yellow,
   textColor = MainColor.black,
-  radius = "full", // default md
+  radius = 50, // default md
   disabled = false,
   iconLeft,
   style,
 }) => {
-  const borderRadius =
-    typeof radius === "number" ? radius : radiusMap[radius ?? "md"]; // fallback ke 'md'
-
-  const styles = buttonStyles({
-    backgroundColor,
-    textColor,
-    borderRadius,
-  });
-
   return (
     <TouchableOpacity
-      style={[styles.button, disabled && styles.disabled, style]}
+      style={[
+        stylesButton.button,
+        disabled && stylesButton.disabled,
+        style,
+        { borderRadius: radius },
+        { backgroundColor },
+      ]}
       onPress={onPress}
       disabled={disabled}
       activeOpacity={0.8}
     >
       {/* Render icon jika tersedia */}
       {iconLeft && iconLeft}
-      <Text style={styles.buttonText}>{children || title}</Text>
+      <Text style={[stylesButton.buttonText, { color: textColor }]}>
+        {children || title}
+      </Text>
     </TouchableOpacity>
   );
 };

components/Button/ButtonUpload.tsx

@@ -1,21 +0,0 @@
-import { MainColor } from "@/constants/color-palet";
-import { GStyles } from "@/styles/global-styles";
-import { Feather } from "@expo/vector-icons";
-import React from "react";
-import ButtonCustom from "./ButtonCustom";
-
-interface ButtonUploadProps {
-    title?: string;
-    onPress: () => void;
-}
-export default function ButtonUpload({ onPress, title = "Upload" }: ButtonUploadProps) {
-  return (
-    <ButtonCustom
-      onPress={onPress}
-      iconLeft={<Feather name="upload" size={20} color={MainColor.black} />}
-      style={GStyles.buttonCentered50Percent}
-    >
-      {title}
-    </ButtonCustom>
-  );
-}

components/Button/buttonCustomStyles.ts

@@ -1,31 +1,25 @@
 // components/Button/buttonStyles.js
 
 import { MainColor } from "@/constants/color-palet";
+import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
 import { StyleSheet } from "react-native";
 
-export default function buttonStyles({
-  backgroundColor = "#007AFF",
-  textColor = "#FFFFFF",
-  borderRadius = 8,
-}) {
-  return StyleSheet.create({
+export const stylesButton = StyleSheet.create({
     button: {
-      backgroundColor,
+      backgroundColor: MainColor.yellow,
       paddingVertical: 12,
       paddingHorizontal: 20,
-      borderRadius,
       flexDirection: "row", // 👈 Tambahkan baris ini
       alignItems: "center",
       justifyContent: "center",
       gap: 8,
     },
     buttonText: {
-      color: textColor,
-      fontSize: 16,
+      color: MainColor.black,
+      fontSize: TEXT_SIZE_MEDIUM,
       fontWeight: "600",
     },
     disabled: {
       backgroundColor: MainColor.disabled,
     },
   });
-}

components/Drawer/DrawerCustom.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import {
   Animated,
   PanResponder,
@@ -14,7 +14,7 @@ interface DrawerCustomProps {
   children?: React.ReactNode;
   height?: number;
   isVisible: boolean;
-  drawerAnim: Animated.Value;
+  drawerAnim?: Animated.Value;
   closeDrawer: () => void;
   //   openLogoutAlert: () => void;
 }
@@ -33,6 +33,26 @@ export default function DrawerCustom({
   closeDrawer,
 }: //   openLogoutAlert,
 DrawerCustomProps) {
+  const drawerAnima = useRef(
+    new Animated.Value(height || DRAWER_HEIGHT)
+  ).current;
+  // Efek untuk handle open/close drawer
+  useEffect(() => {
+    if (isVisible) {
+      Animated.timing(drawerAnima, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(drawerAnima, {
+        toValue: height || DRAWER_HEIGHT,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isVisible, drawerAnim, height, closeDrawer, drawerAnima]);
+
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (_, gestureState) => {
@@ -41,7 +61,7 @@ DrawerCustomProps) {
       onPanResponderMove: (_, gestureState) => {
         const offset = gestureState.dy;
         if (offset >= 0 && offset <= DRAWER_HEIGHT) {
-          drawerAnim.setValue(offset);
+          drawerAnima.setValue(offset);
         }
       },
       onPanResponderRelease: (_, gestureState) => {
@@ -50,7 +70,7 @@ DrawerCustomProps) {
             closeDrawer();
           });
         } else {
-          Animated.spring(drawerAnim, {
+          Animated.spring(drawerAnima, {
             toValue: 0,
             useNativeDriver: true,
           }).start();
@@ -80,7 +100,7 @@ DrawerCustomProps) {
           styles.drawer,
           {
             height: height || DRAWER_HEIGHT,
-            transform: [{ translateY: drawerAnim }],
+            transform: [{ translateY: drawerAnima }],
           },
         ]}
         {...panResponder.panHandlers}

components/Drawer/MenuDrawerDynamicGird.tsx

@@ -1,7 +1,7 @@
 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";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 
 const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
   const numColumns = columns;
@@ -18,7 +18,7 @@ const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
             <Ionicons
               name={item.icon}
               size={ICON_SIZE_MEDIUM}
-              color={item.color || MainColor.white}
+              color={item.color || MainColor.white_gray}
             />
           </View>
           <Text style={styles.label}>{item.label}</Text>
@@ -52,6 +52,6 @@ const styles = StyleSheet.create({
     marginTop: 10,
     fontSize: TEXT_SIZE_SMALL,
     textAlign: "center",
-    color: MainColor.white,
+    color: MainColor.white_gray,
   },
 });

components/Grid/GridCustom.tsx

@@ -109,5 +109,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "flex-start",
+    marginInline: 0.1
   },
 });

components/Image/AvatarCustom.tsx

@@ -47,7 +47,7 @@ const styles = StyleSheet.create({
   overlappingAvatar: {
     borderWidth: 2,
     borderColor: "#fff",
-    backgroundColor: MainColor.white,
+    backgroundColor: MainColor.white_gray,
     // shadowColor: "#000",
     // shadowOffset: { width: 0, height: 2 },
     // shadowOpacity: 0.2,

components/Select/SelectCustom.tsx

@@ -1,15 +1,13 @@
 // components/Select.tsx
-import { MainColor } from "@/constants/color-palet";
-import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
 import React, { useState } from "react";
 import {
-  View,
-  Text,
-  Pressable,
-  Modal,
   FlatList,
-  StyleSheet,
+  Modal,
+  Pressable,
+  Text,
   TouchableOpacity,
+  View,
 } from "react-native";
 
 type SelectItem = {
@@ -23,7 +21,9 @@ type SelectProps = {
   data: SelectItem[];
   value?: string | number | null;
   required?: boolean; // <-- new prop
+  disabled?: boolean; // <-- tambahkan prop disabled
   onChange: (value: string | number) => void;
+  borderRadius?: number;
 };
 
 const SelectCustom: React.FC<SelectProps> = ({
@@ -32,7 +32,9 @@ const SelectCustom: React.FC<SelectProps> = ({
   data,
   value,
   required = false, // <-- default false
+  disabled = false, // <-- default false
   onChange,
+  borderRadius = 8,
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
@@ -41,35 +43,50 @@ const SelectCustom: React.FC<SelectProps> = ({
   const hasError = required && value === null; // <-- check if empty and required
 
   return (
-    <View style={styles.container}>
+    <View style={GStyles.inputContainerArea}>
       {label && (
-        <Text style={styles.label}>
+        <Text style={GStyles.inputLabel}>
           {label}
-          {required && <Text style={styles.requiredIndicator}> *</Text>}
+          {required && <Text style={GStyles.inputRequired}> *</Text>}
         </Text>
       )}
       <Pressable
-        style={[styles.input, hasError ? styles.inputError : null]} // <-- add error style
-        onPress={() => setModalVisible(true)}
+        style={[
+          { borderRadius },
+          hasError ? GStyles.inputErrorBorder : null,
+          GStyles.inputContainerInput,
+          disabled && GStyles.disabledBox,
+        ]} // <-- add error style
+        onPress={() => !disabled && setModalVisible(true)}
       >
-        <Text style={selectedItem ? styles.text : styles.placeholder}>
+        <Text
+          style={
+            selectedItem
+              ? disabled
+                ? GStyles.inputTextDisabled
+                : GStyles.inputText
+              : disabled
+              ? GStyles.inputPlaceholderDisabled
+              : GStyles.inputPlaceholder
+          }
+        >
           {selectedItem?.label || placeholder}
         </Text>
       </Pressable>
 
       <Modal visible={modalVisible} transparent animationType="fade">
         <TouchableOpacity
-          style={styles.modalOverlay}
+          style={GStyles.selectModalOverlay}
           activeOpacity={1}
           onPressOut={() => setModalVisible(false)}
         >
-          <View style={styles.modalContent}>
+          <View style={GStyles.selectModalContent}>
             <FlatList
               data={data}
               keyExtractor={(item) => String(item.value)}
               renderItem={({ item }) => (
                 <TouchableOpacity
-                  style={styles.option}
+                  style={GStyles.selectOption}
                   onPress={() => {
                     onChange(item.value);
                     setModalVisible(false);
@@ -85,68 +102,10 @@ const SelectCustom: React.FC<SelectProps> = ({
 
       {/* Optional Error Message */}
       {hasError && (
-        <Text style={styles.errorMessage}>Harap pilih salah satu</Text>
+        <Text style={GStyles.inputErrorMessage}>Harap pilih salah satu</Text>
       )}
     </View>
   );
 };
 
 export default SelectCustom;
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 16,
-  },
-  label: {
-    fontSize: TEXT_SIZE_MEDIUM,
-    marginBottom: 4,
-    color: MainColor.white,
-    fontWeight: "500",
-  },
-  requiredIndicator: {
-    color: "red",
-    fontWeight: "bold",
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ccc",
-    padding: 12,
-    borderRadius: 8,
-    minHeight: 48,
-    justifyContent: "center",
-    backgroundColor: MainColor.white,
-  },
-  inputError: {
-    borderColor: "red",
-  },
-  text: {
-    fontSize: TEXT_SIZE_MEDIUM,
-  },
-  placeholder: {
-    fontSize: TEXT_SIZE_MEDIUM,
-    color: MainColor.placeholder,
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.3)",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  modalContent: {
-    width: "80%",
-    maxHeight: 300,
-    backgroundColor: "white",
-    borderRadius: 8,
-    overflow: "hidden",
-  },
-  option: {
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: "#eee",
-  },
-  errorMessage: {
-    marginTop: 4,
-    fontSize: 12,
-    color: "red",
-  },
-});

components/Stack/StackCustom.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 // components/Stack.tsx
 
 import React from "react";
@@ -57,10 +58,10 @@ const convertToSpacing = (value: GapSizeType): number => {
   return sizes[value] || 16; // default md
 };
 
-const styles = StyleSheet.create({
-  stack: {
-    flex: 1,
-  },
-});
+// const styles = StyleSheet.create({
+//   stack: {
+//     flex: 1,
+//   },
+// });
 
 export default StackCustom;

components/Text/TextCustom.tsx

@@ -5,7 +5,7 @@ import {
   TEXT_SIZE_SMALL,
 } from "@/constants/constans-value";
 import React from "react";
-import { Text as RNText, StyleProp, StyleSheet, TextStyle } from "react-native";
+import { Text as RNText, StyleProp, StyleSheet, TextStyle, TouchableOpacity } from "react-native";
 
 // Tambahkan type TextAlignProps agar lebih type-safe
 type TextAlign = "left" | "center" | "right";
@@ -19,6 +19,7 @@ interface TextCustomProps {
   color?: "default" | "yellow" | "red";
   align?: TextAlign; // Prop untuk alignment
   truncate?: boolean | number;
+  onPress?: () => void;
 }
 
 const TextCustom: React.FC<TextCustomProps> = ({
@@ -30,6 +31,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
   color = "default",
   align = "left", // Default alignment
   truncate = false,
+  onPress,
 }) => {
   const getStyle = () => {
     let selectedStyles = [];
@@ -61,15 +63,29 @@ const TextCustom: React.FC<TextCustomProps> = ({
   };
 
   return (
-    <RNText
-      numberOfLines={
-        typeof truncate === "number" ? truncate : truncate ? 1 : undefined
-      }
-      ellipsizeMode="tail"
-      style={getStyle()}
-    >
-      {children}
-    </RNText>
+    onPress ? (
+      <TouchableOpacity onPress={onPress}>
+        <RNText
+          numberOfLines={
+            typeof truncate === "number" ? truncate : truncate ? 1 : undefined
+          }
+          ellipsizeMode="tail"
+          style={getStyle()}
+        >
+          {children}
+        </RNText>
+      </TouchableOpacity>
+    ) : (
+      <RNText
+        numberOfLines={
+          typeof truncate === "number" ? truncate : truncate ? 1 : undefined
+        }
+        ellipsizeMode="tail"
+        style={getStyle()}
+      >
+        {children}
+      </RNText>
+    )
   );
 };
 

components/TextArea/TextAreaCustom.tsx

@@ -0,0 +1,143 @@
+import { GStyles } from "@/styles/global-styles";
+import React, { useEffect, useState } from "react";
+import {
+    TextInput as RNTextInput,
+    StyleProp,
+    Text,
+    View,
+    ViewStyle,
+} from "react-native";
+
+type IconType = React.ReactNode | string;
+
+type BaseProps = {
+  iconLeft?: IconType;
+  iconRight?: IconType;
+  label?: string;
+  required?: boolean;
+  error?: string;
+  fontColor?: string;
+  disabled?: boolean;
+  borderRadius?: number;
+  autosize?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  showCount?: boolean;
+  maxLength?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+type NativeTextInputProps = Omit<
+  React.ComponentProps<typeof RNTextInput>,
+  "style"
+>;
+
+export type TextAreaCustomProps = BaseProps & NativeTextInputProps;
+
+const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
+  iconLeft,
+  iconRight,
+  label,
+  required = false,
+  error = "",
+  fontColor = "#000",
+  disabled = false,
+  borderRadius = 8,
+  autosize = false,
+  minRows = 3,
+  maxRows = 6,
+  showCount = false,
+  maxLength,
+  value,
+  onChangeText,
+  style,
+  ...rest
+}) => {
+  const [numberOfLines, setNumberOfLines] = useState(minRows);
+
+  // Autosizing logic
+  useEffect(() => {
+    if (!autosize || !value) return;
+
+    const text = value as string;
+    const lines = text.split("\n").length;
+    const newLines = Math.max(minRows, Math.min(maxRows, lines));
+    setNumberOfLines(newLines);
+  }, [value, autosize, minRows, maxRows]);
+
+  const hasError = Boolean(error);
+
+  const renderIcon = (icon: IconType) => {
+    if (!icon) return null;
+    return typeof icon === "string" ? (
+      <Text style={GStyles.inputIconText}>{icon}</Text>
+    ) : (
+      icon
+    );
+  };
+
+  return (
+    <View style={GStyles.inputContainerArea}>
+      {label && (
+        <Text style={GStyles.inputLabel}>
+          {label}
+          {required && <Text style={GStyles.inputRequired}> *</Text>}
+        </Text>
+      )}
+      <View
+        style={[
+          GStyles.inputContainerInput,
+          disabled && GStyles.disabledBox,
+          hasError ? GStyles.inputErrorBorder : {},
+          { borderRadius },
+          style,
+        ]}
+      >
+        {iconLeft && (
+          <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
+        )}
+
+        <RNTextInput
+          maxLength={maxLength}
+          multiline
+          numberOfLines={numberOfLines}
+          style={[
+            GStyles.inputText,
+            GStyles.textAreaInput,
+            { color: fontColor },
+          ]}
+          editable={!disabled}
+          value={value as string}
+          onChangeText={onChangeText}
+          {...rest}
+        />
+
+        {iconRight && (
+          <View style={GStyles.inputIcon}>{renderIcon(iconRight)}</View>
+        )}
+      </View>
+
+      {/* Error Message atau Counter */}
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginTop: 4,
+          minHeight: 16,
+        }}
+      >
+        {hasError ? (
+          <Text style={GStyles.inputErrorMessage}>{error}</Text>
+        ) : null}
+
+        {showCount && maxLength ? (
+          <Text style={GStyles.inputMaxLength}>
+            {(value as string)?.length || 0}/{maxLength}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+export default TextAreaCustom;

components/TextInput/TextInputCustom.tsx

@@ -1,3 +1,4 @@
+import { GStyles } from "@/styles/global-styles";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import React, { useState } from "react";
 import {
@@ -8,7 +9,6 @@ import {
   View,
   ViewStyle,
 } from "react-native";
-import { textInputStyles } from "./textInputStyles";
 
 type IconType = React.ReactNode | string;
 
@@ -23,9 +23,10 @@ type Props = {
   disabled?: boolean;
   borderRadius?: number;
   style?: StyleProp<ViewStyle>;
+  maxLength?: number;
 } & Omit<React.ComponentProps<typeof RNTextInput>, "style">;
 
-export const TextInputCustom = ({
+const TextInputCustom = ({
   iconLeft,
   iconRight,
   label,
@@ -38,6 +39,7 @@ export const TextInputCustom = ({
   style,
   keyboardType,
   onChangeText,
+  maxLength,
   ...rest
 }: Props) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -47,7 +49,7 @@ export const TextInputCustom = ({
   const renderIcon = (icon: IconType) => {
     if (!icon) return null;
     return typeof icon === "string" ? (
-      <Text style={textInputStyles.iconText}>{icon}</Text>
+      <Text style={GStyles.inputIconText}>{icon}</Text>
     ) : (
       icon
     );
@@ -71,37 +73,42 @@ export const TextInputCustom = ({
   };
 
   return (
-    <View style={textInputStyles.container}>
+    <View style={GStyles.inputContainerArea}>
       {label && (
-        <Text style={textInputStyles.label}>
+        <Text style={GStyles.inputLabel}>
           {label}
-          {required && <Text style={textInputStyles.required}> *</Text>}
+          {required && <Text style={GStyles.inputRequired}> *</Text>}
         </Text>
       )}
       <View
         style={[
-          textInputStyles.inputContainer,
-          disabled && textInputStyles.disabled,
-          { borderRadius },
-          externalError || internalError ? textInputStyles.errorBorder : null,
           style,
+          { borderRadius },
+          externalError || internalError ? GStyles.inputErrorBorder : null,
+          GStyles.inputContainerInput,
+          disabled && GStyles.disabledBox,
         ]}
       >
-        {iconLeft && (
-          <View style={textInputStyles.icon}>{renderIcon(iconLeft)}</View>
-        )}
+        {/* {iconLeft && (
+          <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
+        )} */}
         <RNTextInput
-          style={[textInputStyles.input, { color: fontColor }]}
+          style={[
+            GStyles.inputText,
+            { color: fontColor },
+            disabled && GStyles.inputPlaceholderDisabled, // <-- placeholder saat disabled
+          ]}
           editable={!disabled}
           secureTextEntry={secureTextEntry && !isPasswordVisible}
           keyboardType={keyboardType}
           onChangeText={handleTextChange}
+          maxLength={maxLength}
           {...rest}
         />
         {secureTextEntry && (
           <TouchableOpacity
             onPress={() => setIsPasswordVisible((prev) => !prev)}
-            style={textInputStyles.icon}
+            style={GStyles.inputIcon}
           >
             <Ionicons
               name={isPasswordVisible ? "eye-off" : "eye"}
@@ -111,15 +118,17 @@ export const TextInputCustom = ({
           </TouchableOpacity>
         )}
         {iconRight && (
-          <View style={textInputStyles.icon}>{renderIcon(iconRight)}</View>
+          <View style={GStyles.inputIcon}>{renderIcon(iconRight)}</View>
         )}
       </View>
       {/* Prioritaskan error eksternal */}
       {externalError || internalError ? (
-        <Text style={textInputStyles.errorMessage}>
+        <Text style={GStyles.inputErrorMessage}>
           {externalError || internalError}
         </Text>
       ) : null}
     </View>
   );
 };
+
+export default TextInputCustom;

components/TextInput/index.ts

@@ -1,3 +0,0 @@
-import { TextInputCustom } from "./TextInputCustom";
-
-export { TextInputCustom };

components/TextInput/textInputStyles.ts

@@ -1,71 +0,0 @@
-// components/text-input.styles.ts
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { StyleSheet } from "react-native";
-
-export const textInputStyles = StyleSheet.create({
-  // Container utama input (View luar)
-  container: {
-    marginBottom: 16,
-  },
-
-  // Label di atas input
-  label: {
-    fontSize: 14,
-    marginBottom: 6,
-    fontWeight: "500",
-    color: MainColor.white,
-  },
-
-  // Tanda bintang merah untuk required
-  required: {
-    color: "red",
-  },
-
-  // Pesan error di bawah input
-  errorMessage: {
-    marginTop: 4,
-    fontSize: 12,
-    color: MainColor.red,
-  },
-
-  // Wrapper input (View pembungkus TextInput)
-  inputContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderWidth: 1,
-    borderColor: AccentColor.white,
-    backgroundColor: MainColor.white,
-    paddingHorizontal: 12,
-    height: 50,
-  },
-
-  // Style saat disabled
-  disabled: {
-    backgroundColor: "#f9f9f9",
-    borderColor: "#e0e0e0",
-  },
-
-  // Input utama (TextInput)
-  input: {
-    flex: 1,
-    fontSize: 16,
-    paddingVertical: 0,
-  },
-
-  // Ikon di kiri/kanan
-  icon: {
-    marginHorizontal: 4,
-    justifyContent: "center",
-  },
-
-  // Teks ikon jika berupa string
-  iconText: {
-    fontSize: 16,
-    color: "#000",
-  },
-
-  // Border merah jika ada error
-  errorBorder: {
-    borderColor: "red",
-  },
-});

components/_ShareComponent/ViewWrapper.tsx

@@ -28,7 +28,7 @@ const ViewWrapper = ({
     <>
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
+        style={{ flex: 1, backgroundColor: MainColor.darkblue }}
       >
         <ScrollView
           contentContainerStyle={{ flexGrow: 1 }}
@@ -57,7 +57,6 @@ const ViewWrapper = ({
           <SafeAreaView
             edges={["bottom"]}
             style={{
-              flex: 1,
               backgroundColor: MainColor.darkblue,
             }}
           >

components/index.ts

@@ -1,52 +1,66 @@
 // Alert
 import AlertCustom from "./Alert/AlertCustom";
 // Button
-import BackButton from "./Button/BackButton";
+import LeftButtonCustom from "./Button/BackButton";
+import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
 import ButtonCustom from "./Button/ButtonCustom";
 // Drawer
 import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
 // ShareComponent
-import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import Spacing from "./_ShareComponent/Spacing";
+import ViewWrapper from "./_ShareComponent/ViewWrapper";
 // Text
 import TextCustom from "./Text/TextCustom";
 // TextInput
-import { TextInputCustom } from "./TextInput/TextInputCustom";
+import TextInputCustom from "./TextInput/TextInputCustom";
+// TextArea
+import TextAreaCustom from "./TextArea/TextAreaCustom";
 // Grid
 import Grid from "./Grid/GridCustom";
 // Box
 import BaseBox from "./Box/BaseBox";
-// Avatar
-import AvatarCustom from "./Image/AvatarCustom"
+import BoxButtonOnFooter from "./Box/BoxButtonOnFooter";
+import InformationBox from "./Box/InformationBox";
+
 // Stack
 import StackCustom from "./Stack/StackCustom";
 // Select
 import SelectCustom from "./Select/SelectCustom";
+// Image
+import AvatarCustom from "./Image/AvatarCustom";
+import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
 
 export {
   AlertCustom,
+  // Image
+  AvatarCustom,
+  LandscapeFrameUploaded,
   // Button
-  BackButton,
   ButtonCustom,
+  LeftButtonCustom as BackButton,
+  ButtonCenteredOnly,
+  // Box
+  BaseBox,
+  BoxButtonOnFooter,
+  InformationBox,
   // Drawer
   DrawerCustom,
+  // Grid
+  Grid,
   MenuDrawerDynamicGrid,
+  // Select
+  SelectCustom,
   // ShareComponent
   Spacing,
-  ViewWrapper,
+  // Stack
+  StackCustom,
+  // TextArea
+  TextAreaCustom,
   // Text
   TextCustom,
   // TextInput
   TextInputCustom,
-  // Grid
-  Grid,
-  // Box
-  BaseBox,
-  // Avatar
-  AvatarCustom,
-  // Stack
-  StackCustom,
-  // Select
-  SelectCustom,
+  // ViewWrapper
+  ViewWrapper,
 };

constants/color-palet.ts

@@ -3,23 +3,27 @@ export const MainColor = {
   darkblue: "#001D3D",
   soft_darkblue: "#0e3763",
   yellow: "#E1B525",
-  white: "#D4D0D0",
   red: "#FF4B4C",
   orange: "#FF7043",
   green: "#4CAF4F",
+  white_gray: "#D4D0D0",
   text_input: "#EDEBEBFF",
-  placeholder: "#999",
-  disabled: "#606360",
+  placeholder: "#888",
+  white: "#ffffff",
+  // disabled color
+  disabled: "#777",
 };
 
 export const AccentColor = {
-  blackgray: "#333533FF",
+  blackgray: "#aaa",
   darkblue: "#002E59",
   blue: "#00447D",
   softblue: "#007CBA",
   skyblue: "#00BFFF",
   yellow: "#F8A824",
   white: "#FEFFFE",
+  // disable color
+  disabledBorder: "#aaa",
 };
 
 export const AdminColor = {

constants/constans-value.ts

@@ -6,6 +6,7 @@ export {
   ICON_SIZE_MEDIUM,
   DRAWER_HEIGHT,
   RADIUS_BUTTON,
+  ICON_SIZE_BUTTON,
 };
 
 const TEXT_SIZE_SMALL = 12;
@@ -14,4 +15,5 @@ const TEXT_SIZE_LARGE = 16;
 const ICON_SIZE_SMALL = 20;
 const ICON_SIZE_MEDIUM = 24;
 const DRAWER_HEIGHT = 500; // tinggi drawer5
-const RADIUS_BUTTON = 50
+const RADIUS_BUTTON = 50
+const ICON_SIZE_BUTTON = 18

lib/dummy-data/master-bidang-bisnis.ts

@@ -0,0 +1,100 @@
+const dummyMasterBidangBisnis = [
+  {
+    id: "1",
+    name: "Teknologi dan Digital",
+    slug: "teknologi_dan_digital",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.403Z",
+    updatedAt: "2025-06-16T09:57:16.403Z",
+  },
+  {
+    id: "2",
+    name: "Kuliner",
+    slug: "kuliner",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.424Z",
+    updatedAt: "2025-06-16T09:57:16.424Z",
+  },
+  {
+    id: "3",
+    name: "Fashion dan Kecantikan",
+    slug: "fashion_dan_kecantikan",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.442Z",
+    updatedAt: "2025-06-16T09:57:16.442Z",
+  },
+  {
+    id: "4",
+    name: "Otomotif",
+    slug: "otomotif",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.459Z",
+    updatedAt: "2025-06-16T09:57:16.459Z",
+  },
+  {
+    id: "5",
+    name: "Industri Kreatif",
+    slug: "industri_kreatif",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.471Z",
+    updatedAt: "2025-06-16T09:57:16.471Z",
+  },
+  {
+    id: "6",
+    name: "Konstruksi dan Pertukangan",
+    slug: "konstruksi_dan_pertukangan",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.483Z",
+    updatedAt: "2025-06-16T09:57:16.483Z",
+  },
+  {
+    id: "7",
+    name: "Agribisnis dan Pertanian",
+    slug: "agribisnis_dan_pertanian",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.492Z",
+    updatedAt: "2025-06-16T09:57:16.492Z",
+  },
+  {
+    id: "8",
+    name: "Jasa Umum",
+    slug: "jasa_umum",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.502Z",
+    updatedAt: "2025-06-16T09:57:16.502Z",
+  },
+  {
+    id: "9",
+    name: "Edukasi dan Pelatihan",
+    slug: "edukasi_dan_pelatihan",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.517Z",
+    updatedAt: "2025-06-16T09:57:16.517Z",
+  },
+  {
+    id: "10",
+    name: "Keuangan dan Investasi",
+    slug: "keuangan_dan_investasi",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.527Z",
+    updatedAt: "2025-06-16T09:57:16.527Z",
+  },
+  {
+    id: "11",
+    name: "Perdagangan Umum",
+    slug: "perdagangan_umum",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.537Z",
+    updatedAt: "2025-06-16T09:57:16.537Z",
+  },
+  {
+    id: "12",
+    name: "Pariwisata dan Hospitality",
+    slug: "pariwisata_dan_hospitality",
+    active: true,
+    createdAt: "2025-06-16T09:57:16.547Z",
+    updatedAt: "2025-06-16T09:57:16.547Z",
+  },
+];
+
+export default dummyMasterBidangBisnis;

lib/dummy-data/master-sub-bidang-bisnis.ts

@@ -0,0 +1,734 @@
+const dummyMasterSubBidangBisnis = [
+  {
+    id: "TEK-01",
+    name: "Software Developer",
+    slug: "software_developer",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.406Z",
+    updatedAt: "2025-06-16T09:57:16.406Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-02",
+    name: "Web Developer",
+    slug: "web_developer",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.408Z",
+    updatedAt: "2025-06-16T09:57:16.408Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-03",
+    name: "Mobile App Developer",
+    slug: "mobile_app_developer",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.411Z",
+    updatedAt: "2025-06-16T09:57:16.411Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-04",
+    name: "Konsultan IT",
+    slug: "konsultan_it",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.413Z",
+    updatedAt: "2025-06-16T09:57:16.413Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-05",
+    name: "Digital Marketing",
+    slug: "digital_marketing",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.415Z",
+    updatedAt: "2025-06-16T09:57:16.415Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-06",
+    name: "Cybersecurity",
+    slug: "cybersecurity",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.417Z",
+    updatedAt: "2025-06-16T09:57:16.417Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-07",
+    name: "AI & Machine Learning Services",
+    slug: "ai_and_machine_learning_services",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.419Z",
+    updatedAt: "2025-06-16T09:57:16.419Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-08",
+    name: "Data Analyst/Data Scientist",
+    slug: "data_analyst_data_scientist",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.421Z",
+    updatedAt: "2025-06-16T09:57:16.421Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "TEK-09",
+    name: "Blockchain Developer",
+    slug: "blockchain_developer",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.423Z",
+    updatedAt: "2025-06-16T09:57:16.423Z",
+    masterBidangBisnisId: "1",
+  },
+  {
+    id: "KUL-01",
+    name: "Restoran",
+    slug: "restoran",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.426Z",
+    updatedAt: "2025-06-16T09:57:16.426Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "KUL-02",
+    name: "Kafe",
+    slug: "kafe",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.428Z",
+    updatedAt: "2025-06-16T09:57:16.428Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "KUL-03",
+    name: "Warung Makan",
+    slug: "warung_makan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.431Z",
+    updatedAt: "2025-06-16T09:57:16.431Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "KUL-04",
+    name: "Catering",
+    slug: "catering",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.433Z",
+    updatedAt: "2025-06-16T09:57:16.433Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "KUL-05",
+    name: "Food Truck",
+    slug: "food_truck",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.435Z",
+    updatedAt: "2025-06-16T09:57:16.435Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "KUL-06",
+    name: "Minuman Kekinian",
+    slug: "minuman_kekinian",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.437Z",
+    updatedAt: "2025-06-16T09:57:16.437Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "KUL-07",
+    name: "Toko Roti & Kue",
+    slug: "toko_roti_kue",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.438Z",
+    updatedAt: "2025-06-16T09:57:16.438Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "KUL-08",
+    name: "Supplier Bahan Makanan",
+    slug: "supplier_bahan_makanan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.440Z",
+    updatedAt: "2025-06-16T09:57:16.440Z",
+    masterBidangBisnisId: "2",
+  },
+  {
+    id: "FAS-01",
+    name: "Pakaian Dewasa & Anak",
+    slug: "pakaian_dewasa_anak",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.444Z",
+    updatedAt: "2025-06-16T09:57:16.444Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "FAS-02",
+    name: "Butik",
+    slug: "butik",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.445Z",
+    updatedAt: "2025-06-16T09:57:16.445Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "FAS-03",
+    name: "Desainer Fashion",
+    slug: "desainer_fashion",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.448Z",
+    updatedAt: "2025-06-16T09:57:16.448Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "FAS-04",
+    name: "Aksesoris & Perhiasan",
+    slug: "aksesoris_perhiasan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.449Z",
+    updatedAt: "2025-06-16T09:57:16.449Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "FAS-05",
+    name: "Kosmetik",
+    slug: "kosmetik",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.451Z",
+    updatedAt: "2025-06-16T09:57:16.451Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "FAS-06",
+    name: "Skincare",
+    slug: "skincare",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.453Z",
+    updatedAt: "2025-06-16T09:57:16.453Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "FAS-07",
+    name: "Salon Kecantikan",
+    slug: "salon_kecantikan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.455Z",
+    updatedAt: "2025-06-16T09:57:16.455Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "FAS-08",
+    name: "Barbershop",
+    slug: "barbershop",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.456Z",
+    updatedAt: "2025-06-16T09:57:16.456Z",
+    masterBidangBisnisId: "3",
+  },
+  {
+    id: "OTO-01",
+    name: "Jual Beli Mobil/Motor",
+    slug: "jual_beli_mobil_motor",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.461Z",
+    updatedAt: "2025-06-16T09:57:16.461Z",
+    masterBidangBisnisId: "4",
+  },
+  {
+    id: "OTO-02",
+    name: "Bengkel Mobil/Motor",
+    slug: "bengkel_mobil_motor",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.463Z",
+    updatedAt: "2025-06-16T09:57:16.463Z",
+    masterBidangBisnisId: "4",
+  },
+  {
+    id: "OTO-03",
+    name: "Aksesori Kendaraan",
+    slug: "aksesori_kendaraan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.465Z",
+    updatedAt: "2025-06-16T09:57:16.465Z",
+    masterBidangBisnisId: "4",
+  },
+  {
+    id: "OTO-04",
+    name: "Rental Kendaraan",
+    slug: "rental_kendaraan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.466Z",
+    updatedAt: "2025-06-16T09:57:16.466Z",
+    masterBidangBisnisId: "4",
+  },
+  {
+    id: "OTO-05",
+    name: "Cuci Mobil/Motor",
+    slug: "cuci_mobil_motor",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.468Z",
+    updatedAt: "2025-06-16T09:57:16.468Z",
+    masterBidangBisnisId: "4",
+  },
+  {
+    id: "OTO-06",
+    name: "Spare Part & Mesin Mobil",
+    slug: "spare_part_mesin_mobil",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.469Z",
+    updatedAt: "2025-06-16T09:57:16.469Z",
+    masterBidangBisnisId: "4",
+  },
+  {
+    id: "INK-01",
+    name: "Fotografi & Videografi",
+    slug: "fotografi_videografi",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.472Z",
+    updatedAt: "2025-06-16T09:57:16.472Z",
+    masterBidangBisnisId: "5",
+  },
+  {
+    id: "INK-02",
+    name: "Event Organizer",
+    slug: "event_organizer",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.473Z",
+    updatedAt: "2025-06-16T09:57:16.473Z",
+    masterBidangBisnisId: "5",
+  },
+  {
+    id: "INK-03",
+    name: "Desain Grafis",
+    slug: "desain_grafis",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.475Z",
+    updatedAt: "2025-06-16T09:57:16.475Z",
+    masterBidangBisnisId: "5",
+  },
+  {
+    id: "INK-04",
+    name: "Advertising & Branding",
+    slug: "advertising_branding",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.476Z",
+    updatedAt: "2025-06-16T09:57:16.476Z",
+    masterBidangBisnisId: "5",
+  },
+  {
+    id: "INK-05",
+    name: "Jasa Percetakan",
+    slug: "jasa_percetakan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.477Z",
+    updatedAt: "2025-06-16T09:57:16.477Z",
+    masterBidangBisnisId: "5",
+  },
+  {
+    id: "INK-06",
+    name: "Dekorasi & Wedding Planner",
+    slug: "dekorasi_wedding_planner",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.480Z",
+    updatedAt: "2025-06-16T09:57:16.480Z",
+    masterBidangBisnisId: "5",
+  },
+  {
+    id: "INK-07",
+    name: "Studio Musik & Produksi",
+    slug: "studio_musik_produksi",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.481Z",
+    updatedAt: "2025-06-16T09:57:16.481Z",
+    masterBidangBisnisId: "5",
+  },
+  {
+    id: "KON-01",
+    name: "Kontraktor Bangunan",
+    slug: "kontraktor_bangunan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.484Z",
+    updatedAt: "2025-06-16T09:57:16.484Z",
+    masterBidangBisnisId: "6",
+  },
+  {
+    id: "KON-02",
+    name: "Arsitek",
+    slug: "arsitek",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.486Z",
+    updatedAt: "2025-06-16T09:57:16.486Z",
+    masterBidangBisnisId: "6",
+  },
+  {
+    id: "KON-03",
+    name: "Desain Interior",
+    slug: "desain_interior",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.487Z",
+    updatedAt: "2025-06-16T09:57:16.487Z",
+    masterBidangBisnisId: "6",
+  },
+  {
+    id: "KON-04",
+    name: "Supplier Material Bangunan",
+    slug: "supplier_material_bangunan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.489Z",
+    updatedAt: "2025-06-16T09:57:16.489Z",
+    masterBidangBisnisId: "6",
+  },
+  {
+    id: "KON-05",
+    name: "Tukang & Renovasi Rumah",
+    slug: "tukang_renovasi_rumah",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.490Z",
+    updatedAt: "2025-06-16T09:57:16.490Z",
+    masterBidangBisnisId: "6",
+  },
+  {
+    id: "AGR-01",
+    name: "Perkebunan",
+    slug: "perkebunan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.493Z",
+    updatedAt: "2025-06-16T09:57:16.493Z",
+    masterBidangBisnisId: "7",
+  },
+  {
+    id: "AGR-02",
+    name: "Peternakan",
+    slug: "peternakan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.496Z",
+    updatedAt: "2025-06-16T09:57:16.496Z",
+    masterBidangBisnisId: "7",
+  },
+  {
+    id: "AGR-03",
+    name: "Perikanan",
+    slug: "perikanan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.497Z",
+    updatedAt: "2025-06-16T09:57:16.497Z",
+    masterBidangBisnisId: "7",
+  },
+  {
+    id: "AGR-04",
+    name: "Supplier Bibit & Pupuk",
+    slug: "supplier_bibit_pupuk",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.498Z",
+    updatedAt: "2025-06-16T09:57:16.498Z",
+    masterBidangBisnisId: "7",
+  },
+  {
+    id: "AGR-05",
+    name: "Hasil Tani Organik",
+    slug: "hasil_tani_organik",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.500Z",
+    updatedAt: "2025-06-16T09:57:16.500Z",
+    masterBidangBisnisId: "7",
+  },
+  {
+    id: "AGR-06",
+    name: "Alat & Mesin Pertanian",
+    slug: "alat_mesin_pertanian",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.501Z",
+    updatedAt: "2025-06-16T09:57:16.501Z",
+    masterBidangBisnisId: "7",
+  },
+  {
+    id: "JAS-01",
+    name: "Jasa Kebersihan",
+    slug: "jasa_kebersihan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.504Z",
+    updatedAt: "2025-06-16T09:57:16.504Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "JAS-02",
+    name: "Laundry",
+    slug: "laundry",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.505Z",
+    updatedAt: "2025-06-16T09:57:16.505Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "JAS-03",
+    name: "Penitipan Anak",
+    slug: "penitipan_anak",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.506Z",
+    updatedAt: "2025-06-16T09:57:16.506Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "JAS-04",
+    name: "Jasa Keamanan",
+    slug: "jasa_keamanan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.508Z",
+    updatedAt: "2025-06-16T09:57:16.508Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "JAS-05",
+    name: "Jasa Pengiriman/Logistik",
+    slug: "jasa_pengiriman_logistik",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.511Z",
+    updatedAt: "2025-06-16T09:57:16.511Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "JAS-06",
+    name: "Jasa Ekspedisi",
+    slug: "jasa_ekspedisi",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.513Z",
+    updatedAt: "2025-06-16T09:57:16.513Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "JAS-07",
+    name: "Konsultan Bisnis",
+    slug: "konsultan_bisnis",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.514Z",
+    updatedAt: "2025-06-16T09:57:16.514Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "JAS-08",
+    name: "Jasa Hukum/Legal",
+    slug: "jasa_hukum_legal",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.516Z",
+    updatedAt: "2025-06-16T09:57:16.516Z",
+    masterBidangBisnisId: "8",
+  },
+  {
+    id: "EDU-01",
+    name: "Bimbingan Belajar",
+    slug: "bimbingan_belajar",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.518Z",
+    updatedAt: "2025-06-16T09:57:16.518Z",
+    masterBidangBisnisId: "9",
+  },
+  {
+    id: "EDU-02",
+    name: "Kursus Bahasa",
+    slug: "kursus_bahasa",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.520Z",
+    updatedAt: "2025-06-16T09:57:16.520Z",
+    masterBidangBisnisId: "9",
+  },
+  {
+    id: "EDU-03",
+    name: "Pelatihan Digital/Skill",
+    slug: "pelatihan_digital_skill",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.521Z",
+    updatedAt: "2025-06-16T09:57:16.521Z",
+    masterBidangBisnisId: "9",
+  },
+  {
+    id: "EDU-04",
+    name: "LPK (Lembaga Pelatihan Kerja)",
+    slug: "lpk_lembaga_pelatihan_kerja",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.523Z",
+    updatedAt: "2025-06-16T09:57:16.523Z",
+    masterBidangBisnisId: "9",
+  },
+  {
+    id: "EDU-05",
+    name: "Homeschooling",
+    slug: "homeschooling",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.525Z",
+    updatedAt: "2025-06-16T09:57:16.525Z",
+    masterBidangBisnisId: "9",
+  },
+  {
+    id: "KEU-01",
+    name: "Koperasi",
+    slug: "koperasi",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.529Z",
+    updatedAt: "2025-06-16T09:57:16.529Z",
+    masterBidangBisnisId: "10",
+  },
+  {
+    id: "KEU-02",
+    name: "FinTEKh",
+    slug: "finTEKh",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.530Z",
+    updatedAt: "2025-06-16T09:57:16.530Z",
+    masterBidangBisnisId: "10",
+  },
+  {
+    id: "KEU-03",
+    name: "Konsultan Keuangan",
+    slug: "konsultan_keuangan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.531Z",
+    updatedAt: "2025-06-16T09:57:16.531Z",
+    masterBidangBisnisId: "10",
+  },
+  {
+    id: "KEU-04",
+    name: "Investasi & Saham",
+    slug: "investasi_saham",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.532Z",
+    updatedAt: "2025-06-16T09:57:16.532Z",
+    masterBidangBisnisId: "10",
+  },
+  {
+    id: "KEU-05",
+    name: "Asuransi",
+    slug: "asuransi",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.534Z",
+    updatedAt: "2025-06-16T09:57:16.534Z",
+    masterBidangBisnisId: "10",
+  },
+  {
+    id: "KEU-06",
+    name: "Akuntan Publik",
+    slug: "akuntan_publik",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.535Z",
+    updatedAt: "2025-06-16T09:57:16.535Z",
+    masterBidangBisnisId: "10",
+  },
+  {
+    id: "PER-01",
+    name: "Toko Kelontong",
+    slug: "toko_kelontong",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.538Z",
+    updatedAt: "2025-06-16T09:57:16.538Z",
+    masterBidangBisnisId: "11",
+  },
+  {
+    id: "PER-02",
+    name: "Minimarket",
+    slug: "minimarket",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.540Z",
+    updatedAt: "2025-06-16T09:57:16.540Z",
+    masterBidangBisnisId: "11",
+  },
+  {
+    id: "PER-03",
+    name: "Grosir & Distributor",
+    slug: "grosir_distributor",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.541Z",
+    updatedAt: "2025-06-16T09:57:16.541Z",
+    masterBidangBisnisId: "11",
+  },
+  {
+    id: "PER-04",
+    name: "Dropshipper & Reseller",
+    slug: "dropshipper_reseller",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.543Z",
+    updatedAt: "2025-06-16T09:57:16.543Z",
+    masterBidangBisnisId: "11",
+  },
+  {
+    id: "PER-05",
+    name: "Marketplace & E-commerce",
+    slug: "marketplace_e_commerce",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.544Z",
+    updatedAt: "2025-06-16T09:57:16.544Z",
+    masterBidangBisnisId: "11",
+  },
+  {
+    id: "PER-06",
+    name: "Supplier Produk",
+    slug: "supplier_produk",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.546Z",
+    updatedAt: "2025-06-16T09:57:16.546Z",
+    masterBidangBisnisId: "11",
+  },
+  {
+    id: "PAR-01",
+    name: "Agen Travel",
+    slug: "agen_travel",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.549Z",
+    updatedAt: "2025-06-16T09:57:16.549Z",
+    masterBidangBisnisId: "12",
+  },
+  {
+    id: "PAR-02",
+    name: "Tour Guide",
+    slug: "tour_guide",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.550Z",
+    updatedAt: "2025-06-16T09:57:16.550Z",
+    masterBidangBisnisId: "12",
+  },
+  {
+    id: "PAR-03",
+    name: "Villa & Penginapan",
+    slug: "villa_penginapan",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.551Z",
+    updatedAt: "2025-06-16T09:57:16.551Z",
+    masterBidangBisnisId: "12",
+  },
+  {
+    id: "PAR-04",
+    name: "Homestay",
+    slug: "homestay",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.552Z",
+    updatedAt: "2025-06-16T09:57:16.552Z",
+    masterBidangBisnisId: "12",
+  },
+  {
+    id: "PAR-05",
+    name: "Hotel",
+    slug: "hotel",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.554Z",
+    updatedAt: "2025-06-16T09:57:16.554Z",
+    masterBidangBisnisId: "12",
+  },
+  {
+    id: "PAR-06",
+    name: "Sewa Motor/Travel",
+    slug: "sewa_motor_travel",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.555Z",
+    updatedAt: "2025-06-16T09:57:16.555Z",
+    masterBidangBisnisId: "12",
+  },
+  {
+    id: "PAR-07",
+    name: "Sovenir & Oleh-Oleh",
+    slug: "sovenir_oleh_oleh",
+    isActive: true,
+    createdAt: "2025-06-16T09:57:16.557Z",
+    updatedAt: "2025-06-16T09:57:16.557Z",
+    masterBidangBisnisId: "12",
+  },
+];
+
+
+export default dummyMasterSubBidangBisnis;

screens/Authentication/LoginView.tsx

@@ -30,9 +30,9 @@ export default function LoginView() {
     const id = randomAlfabet + randomNumber + fixNumber;
     console.log("login user id :", id);
 
-    router.navigate("/verification");
-    // router.navigate(`/(application)/profile/${id}`);
-    // router.navigate("/(application)/home");
+    // router.navigate("/verification");
+    // router.navigate(`/(application)/(user)/profile/${id}`);
+    router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
   }
 
@@ -55,7 +55,7 @@ export default function LoginView() {
               fontSize: 10,
               fontWeight: "thin",
               fontStyle: "italic",
-              color: MainColor.white,
+              color: MainColor.white_gray,
             }}
           >
             powered by muku.id

screens/Authentication/RegisterView.tsx

@@ -13,7 +13,7 @@ export default function RegisterView() {
   const [username, setUsername] = useState("Bagas Banuna");
   const handleRegister = () => {
     console.log("Success register", username);
-    router.push("/(application)/home");
+    router.push("/(application)/(user)/home");
   };
   return (
     <>

screens/Home/UiHome.tsx

@@ -1,5 +1,5 @@
 // import { ITabs } from "@/components/_Interface/types";
-import Spacing from "@/components/_ShareComponent/Spacing";
+import { StackCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { useNavigation } from "expo-router";
 import React, { useEffect } from "react";
@@ -16,21 +16,16 @@ export default function UiHome() {
     navigation.setOptions({});
   }, [navigation]);
 
-
   return (
     <>
       <ViewWrapper footerComponent={<TabSection tabs={tabsHome} />}>
-        {/* Content Image */}
-        <Home_ImageSection />
-        <Spacing height={10} />
+        <StackCustom>
+          <Home_ImageSection />
 
-        {/* Grid Section */}
-        <Home_FeatureSection />
-        <Spacing height={10} />
+          <Home_FeatureSection />
 
-        {/* Job Vacancy Section */}
-        <Home_BottomFeatureSection />
-        <Spacing height={20} />
+          <Home_BottomFeatureSection />
+        </StackCustom>
       </ViewWrapper>
     </>
   );

screens/Home/topFeatureSection.tsx

@@ -9,7 +9,7 @@ export default function Home_FeatureSection() {
       <View style={stylesHome.gridContainer}>
         <TouchableOpacity
           style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/event/(tabs)")}
+          onPress={() => router.push("/(application)/(user)/event/(tabs)")}
         >
           <Ionicons name="analytics" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Event</Text>

screens/Portofolio/ListPage.tsx

@@ -0,0 +1,33 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+
+export const drawerItemsPortofolio = ({
+  id,
+}: {
+  id: string;
+}): IMenuDrawerItem[] => [
+  {
+    icon: "create",
+    label: "Edit portofolio",
+    path: `/(application)/portofolio/${id}/edit`,
+  },
+  {
+    icon: "camera",
+    label: "Edit logo ",
+    path: `/(application)/portofolio/${id}/edit-logo`,
+  },
+  {
+    icon: "image",
+    label: "Edit social media ",
+    path: `/(application)/portofolio/${id}/edit-social-media`,
+  },
+  {
+    icon: "add-circle",
+    label: "Edit Map",
+    path: `/(application)/maps/${id}/edit`,
+  },
+  {
+    icon: "create-outline",
+    label: "Custom Pin Map",
+    path: `/(application)/maps/${id}/custom-pin`,
+  },
+];

screens/Portofolio/MenuDrawer.tsx

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

screens/Profile/ListPage.tsx

@@ -0,0 +1,35 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+
+export const drawerItemsProfile = ({ 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`,
+  },
+];

screens/Profile/profilSection.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { BaseBox, Grid, Spacing, TextCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
-import { useLocalSearchParams } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
 import AvatarAndBackground from "./AvatarAndBackground";
 
@@ -85,7 +84,10 @@ export default function ProfilSection() {
             <BaseBox
               key={index}
               style={{ backgroundColor: MainColor.darkblue }}
-              onPress={() => console.log("pressed")}
+              onPress={() => {
+                console.log("press to Portofolio");
+                router.push(`/portofolio/${id}`);
+              }}
             >
               <Grid>
                 <Grid.Col
@@ -113,9 +115,15 @@ export default function ProfilSection() {
             </BaseBox>
           ))}
         </View>
+
+        <TextCustom
+          bold
+          align="right"
+          onPress={() => router.push(`/portofolio/${id}/list`)}
+        >
+          Lihat semua
+        </TextCustom>
       </BaseBox>
     </>
   );
 }
-
-

styles/global-styles.ts

@@ -1,10 +1,15 @@
-import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import {
+  TEXT_SIZE_LARGE,
+  TEXT_SIZE_MEDIUM,
+  TEXT_SIZE_SMALL,
+} from "@/constants/constans-value";
 import { Dimensions, StyleSheet } from "react-native";
 import { AccentColor, MainColor } from "../constants/color-palet";
 
 const { width } = Dimensions.get("window");
 
 export const GStyles = StyleSheet.create({
+  // =============== Main Styles =============== //
   container: {
     flex: 1,
     paddingInline: 20,
@@ -20,8 +25,25 @@ export const GStyles = StyleSheet.create({
     height: "100%",
     width: "100%",
   },
+  // Style saat disabled
+  disabledBox: {
+    backgroundColor: MainColor.disabled,
+    borderColor: AccentColor.disabledBorder,
+  },
 
-  // AUTHENTICATION
+  inputDisabled: {
+    backgroundColor: "#f0f0f0",
+    borderColor: "#ddd",
+  },
+  inputTextDisabled: {
+    color: "#777",
+  },
+  inputPlaceholderDisabled: {
+    color: "#444",
+  },
+  // =============== Main Styles =============== //
+
+  // =============== AUTHENTICATION =============== //
   authContainer: {
     flex: 1,
     justifyContent: "center",
@@ -40,30 +62,35 @@ export const GStyles = StyleSheet.create({
     color: MainColor.yellow,
     fontWeight: "bold",
   },
+  // =============== AUTHENTICATION =============== //
 
-  // TEXT & LABEL
+  // =============== TEXT & LABEL =============== //
   textLabel: {
     fontSize: TEXT_SIZE_MEDIUM,
-    color: MainColor.white,
+    color: MainColor.white_gray,
     fontWeight: "normal",
   },
+  // =============== TEXT & LABEL =============== //
 
-  // Stack Header Style
+  // =============== STACK HEADER =============== //
   headerStyle: {
     backgroundColor: AccentColor.darkblue,
   },
   headerTitleStyle: {
     color: MainColor.yellow,
     fontWeight: "bold",
+    fontSize: TEXT_SIZE_LARGE,
   },
+  // =============== STACK HEADER =============== //
 
-  // HOME
+  // =============== HOME =============== //
   homeContainer: {
     flex: 1,
     paddingInline: 25,
     paddingBlock: 10,
     backgroundColor: MainColor.darkblue,
   },
+  // =============== HOME =============== //
 
   // =============== TAB =============== //
   tabBar: {
@@ -123,7 +150,7 @@ export const GStyles = StyleSheet.create({
     fontWeight: "500",
   },
   activeTabLabel: {
-    color: MainColor.white,
+    color: MainColor.white_gray,
     fontWeight: "600",
   },
   activeIndicator: {
@@ -141,14 +168,6 @@ export const GStyles = StyleSheet.create({
     backgroundColor: MainColor.darkblue,
     borderTopColor: AccentColor.blue,
     borderTopWidth: 1,
-    // shadowColor: AccentColor.blue,
-    // shadowOffset: {
-    //   width: 0,
-    //   height: -1,
-    // },
-    // shadowOpacity: 0.9,
-    // shadowRadius: 5,
-    // elevation: 5,
   },
   bottomBarContainer: {
     paddingHorizontal: 15,
@@ -157,8 +176,113 @@ export const GStyles = StyleSheet.create({
   // =============== BOTTOM BAR =============== //
 
   // =============== BUTTON =============== //
+
   buttonCentered50Percent: {
     width: "50%",
     alignSelf: "center",
   },
+  // =============== BUTTON =============== //
+
+  // =============== TEXT INPUT , TEXT AREA , SELECT =============== //
+  // Container utama input (View luar)
+  inputContainerArea: {
+    marginBottom: 16,
+  },
+
+  // Label di atas input
+  inputLabel: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    marginBottom: 4,
+    fontWeight: "500",
+    color: MainColor.white_gray,
+  },
+
+  // Tanda bintang merah untuk required
+  inputRequired: {
+    color: "red",
+  },
+
+  // Pesan error di bawah input
+  inputErrorMessage: {
+    marginTop: 4,
+    fontSize: TEXT_SIZE_SMALL,
+    color: MainColor.red,
+  },
+
+  // Input Length
+  inputMaxLength: {
+    fontSize: TEXT_SIZE_SMALL,
+    color: MainColor.white_gray,
+  },
+
+  // Wrapper input (View pembungkus TextInput)
+  inputContainerInput: {
+    borderWidth: 1,
+    borderColor: MainColor.white_gray,
+    backgroundColor: MainColor.white,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    height: 50,
+  },
+
+  // Input utama (TextInput)
+  inputText: {
+    flex: 1,
+    fontSize: TEXT_SIZE_MEDIUM,
+    paddingVertical: 0,
+  },
+
+  // Ikon di kiri/kanan
+  inputIcon: {
+    marginHorizontal: 4,
+    justifyContent: "center",
+  },
+
+  // Teks ikon jika berupa string
+  inputIconText: {
+    fontSize: TEXT_SIZE_LARGE,
+    color: "#000",
+  },
+
+  // Border merah jika ada error
+  inputErrorBorder: {
+    borderColor: "red",
+    borderWidth: 1,
+  },
+
+  // Placeholder input
+  inputPlaceholder: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    color: MainColor.placeholder,
+  },
+
+  //  TextArea untuk tambahan
+  textAreaInput: {
+    textAlignVertical: "top",
+    padding: 5,
+    height: undefined, // biar multiline bebas tinggi
+  },
+
+  // Select
+  selectModalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  selectModalContent: {
+    width: "80%",
+    maxHeight: 300,
+    backgroundColor: "white",
+    borderRadius: 8,
+    overflow: "hidden",
+  },
+  selectOption: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: MainColor.white_gray,
+  },
+
+  // =============== TEXT INPUT , TEXT AREA , SELECT =============== //
 });

styles/header-styles.ts

@@ -0,0 +1,12 @@
+import { AccentColor } from "@/constants/color-palet";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
+import { GStyles } from "./global-styles";
+
+export const HeaderStyles: NativeStackNavigationOptions = {
+  headerStyle: GStyles.headerStyle,
+  headerTitleStyle: GStyles.headerTitleStyle,
+  headerTitleAlign: "center",
+  contentStyle: {
+    borderBottomColor: AccentColor.blue,
+  },
+};