2025-10-27 11:32:16 +08:00
94 changed files with 5428 additions and 495 deletions
--- a/app.json
+++ b/app.json
@@ -1,6 +1,6 @@
 {
  "expo": {
-    "name": "hipmi-mobile",
+    "name": "HIPMI BADUNG",
    "slug": "hipmi-mobile",
    "version": "1.0.0",
    "orientation": "portrait",
--- a/app/(application)/(user)/portofolio/[id]/create.tsx
+++ b/app/(application)/(user)/portofolio/[id]/create.tsx
@@ -1,24 +1,23 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
-    BoxButtonOnFooter,
-    ButtonCenteredOnly,
-    ButtonCustom,
-    Grid,
-    InformationBox,
-    LandscapeFrameUploaded,
-    SelectCustom,
-    Spacing,
-    StackCustom,
-    TextAreaCustom,
-    TextCustom,
-    TextInputCustom,
-    ViewWrapper,
+  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 { useLocalSearchParams } from "expo-router";
+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";
@@ -60,11 +59,13 @@ export default function PortofolioCreate() {
      <StackCustom>
        <InformationBox text="Lengkapi data bisnis anda." />
        <TextInputCustom
+          // disabled
          required
          label="Nama Bisnis"
          placeholder="Masukkan nama bisnis"
        />
        <SelectCustom
+          // disabled
          label="Bidang Usaha"
          required
          data={dummyMasterBidangBisnis.map((item) => ({
@@ -80,6 +81,7 @@ export default function PortofolioCreate() {
        <Grid>
          <Grid.Col span={10}>
            <SelectCustom
+              // disabled
              label="Sub Bidang Usaha"
              required
              data={dummyMasterSubBidangBisnis.map((item) => ({
@@ -145,12 +147,22 @@ export default function PortofolioCreate() {
          maxLength={100}
        />
        <Spacing />
+
+        {/* Logo */}
        <InformationBox text="Upload logo bisnis anda untuk di tampilaka pada portofolio." />
        <LandscapeFrameUploaded />
-        <ButtonCenteredOnly icon="upload" onPress={() => console.log("upload")}>
+        <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"
--- a/app/(application)/(user)/profile/[id]/create.tsx
+++ b/app/(application)/(user)/profile/[id]/create.tsx
@@ -1,5 +1,6 @@
 import {
  AvatarCustom,
+  ButtonCenteredOnly,
  ButtonCustom,
  SelectCustom,
  Spacing,
@@ -9,7 +10,6 @@ import {
 } 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 { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
@@ -47,9 +47,12 @@ export default function CreateProfile() {
        <View style={{ alignItems: "center" }}>
          <AvatarCustom size="xl" />
          <Spacing />
-          <ButtonUpload
+          <ButtonCenteredOnly
+            icon="upload"
            onPress={() => router.navigate(`/take-picture/${id}`)}
-          />
+          >
+            Upload
+          </ButtonCenteredOnly>
        </View>

        <Spacing />
@@ -58,9 +61,12 @@ export default function CreateProfile() {
          <InformationBox text="Upload foto latar belakang anda." />
          <LandscapeFrameUploaded />
          <Spacing />
-          <ButtonUpload
+          <ButtonCenteredOnly
+            icon="upload"
            onPress={() => router.navigate(`/take-picture/${id}`)}
-          />
+          >
+            Upload
+          </ButtonCenteredOnly>
        </View>

        <Spacing />
--- a/app/(application)/(user)/profile/[id]/update-background.tsx
+++ b/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>
  );
 }
--- a/app/(application)/(user)/profile/[id]/update-photo.tsx
+++ b/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>
  );
 }
--- a/components/Button/ButtonCustom.tsx
+++ b/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>
  );
 };
--- a/components/Button/ButtonUpload.tsx
+++ b/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>
-  );
-}
--- a/components/Button/buttonCustomStyles.ts
+++ b/components/Button/buttonCustomStyles.ts
@@ -4,24 +4,18 @@ 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,
+      color: MainColor.black,
      fontSize: TEXT_SIZE_MEDIUM,
      fontWeight: "600",
    },
@@ -29,4 +23,3 @@ export default function buttonStyles({
      backgroundColor: MainColor.disabled,
    },
  });
-}
--- a/components/Select/SelectCustom.tsx
+++ b/components/Select/SelectCustom.tsx
@@ -7,7 +7,7 @@ import {
  Pressable,
  Text,
  TouchableOpacity,
-  View
+  View,
 } from "react-native";

 type SelectItem = {
@@ -21,6 +21,7 @@ type SelectProps = {
  data: SelectItem[];
  value?: string | number | null;
  required?: boolean; // <-- new prop
+  disabled?: boolean; // <-- tambahkan prop disabled
  onChange: (value: string | number) => void;
  borderRadius?: number;
 };
@@ -31,6 +32,7 @@ const SelectCustom: React.FC<SelectProps> = ({
  data,
  value,
  required = false, // <-- default false
+  disabled = false, // <-- default false
  onChange,
  borderRadius = 8,
 }) => {
@@ -51,13 +53,22 @@ const SelectCustom: React.FC<SelectProps> = ({
      <Pressable
        style={[
          { borderRadius },
-          GStyles.inputContainerInput,
          hasError ? GStyles.inputErrorBorder : null,
+          GStyles.inputContainerInput,
+          disabled && GStyles.disabledBox,
        ]} // <-- add error style
-        onPress={() => setModalVisible(true)}
+        onPress={() => !disabled && setModalVisible(true)}
      >
        <Text
-          style={selectedItem ? GStyles.inputText : GStyles.inputPlaceholder}
+          style={
+            selectedItem
+              ? disabled
+                ? GStyles.inputTextDisabled
+                : GStyles.inputText
+              : disabled
+              ? GStyles.inputPlaceholderDisabled
+              : GStyles.inputPlaceholder
+          }
        >
          {selectedItem?.label || placeholder}
        </Text>
--- a/components/TextArea/TextAreaCustom.tsx
+++ b/components/TextArea/TextAreaCustom.tsx
@@ -87,7 +87,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
      <View
        style={[
          GStyles.inputContainerInput,
-          disabled && GStyles.inputDisabled,
+          disabled && GStyles.disabledBox,
          hasError ? GStyles.inputErrorBorder : {},
          { borderRadius },
          style,
--- a/components/TextInput/TextInputCustom.tsx
+++ b/components/TextInput/TextInputCustom.tsx
@@ -10,7 +10,6 @@ import {
  ViewStyle,
 } from "react-native";

-
 type IconType = React.ReactNode | string;

 type Props = {
@@ -83,18 +82,27 @@ const TextInputCustom = ({
      )}
      <View
        style={[
-          GStyles.inputContainerInput,
-          disabled && GStyles.inputDisabled,
+          style,
          { borderRadius },
          externalError || internalError ? GStyles.inputErrorBorder : null,
-          style,
+          GStyles.inputContainerInput,
+          disabled && GStyles.disabledBox,
        ]}
      >
        {iconLeft && (
          <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
        )}
        <RNTextInput
-          style={[GStyles.inputText, { color: fontColor }]}
+          style={[
+            GStyles.inputText,
+            { color: fontColor },
+            disabled
+              ? GStyles.inputTextDisabled // <-- custom style untuk text saat disabled
+              : GStyles.inputText,
+            disabled
+              ? GStyles.inputPlaceholderDisabled // <-- placeholder saat disabled
+              : GStyles.inputPlaceholder,
+          ]}
          editable={!disabled}
          secureTextEntry={secureTextEntry && !isPasswordVisible}
          keyboardType={keyboardType}
--- a/components/index.ts
+++ b/components/index.ts
@@ -4,7 +4,6 @@ import AlertCustom from "./Alert/AlertCustom";
 import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
 import ButtonCustom from "./Button/ButtonCustom";
-import ButtonUpload from "./Button/ButtonUpload";
 // Drawer
 import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
@@ -38,12 +37,11 @@ export {
  AvatarCustom,
  LandscapeFrameUploaded,
  // Button
+  ButtonCustom,
  LeftButtonCustom as BackButton,
+  ButtonCenteredOnly,
  // Box
  BaseBox,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  ButtonUpload,
  BoxButtonOnFooter,
  InformationBox,
  // Drawer
--- a/constants/color-palet.ts
+++ b/constants/color-palet.ts
@@ -3,24 +3,27 @@ export const MainColor = {
  darkblue: "#001D3D",
  soft_darkblue: "#0e3763",
  yellow: "#E1B525",
-  white_gray: "#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 = {
--- a/styles/global-styles.ts
+++ b/styles/global-styles.ts
@@ -1,10 +1,15 @@
-import { TEXT_SIZE_LARGE, TEXT_SIZE_MEDIUM, TEXT_SIZE_SMALL } 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,15 +62,17 @@ export const GStyles = StyleSheet.create({
    color: MainColor.yellow,
    fontWeight: "bold",
  },
+  // =============== AUTHENTICATION =============== //

-  // TEXT & LABEL
+  // =============== TEXT & LABEL =============== //
  textLabel: {
    fontSize: TEXT_SIZE_MEDIUM,
    color: MainColor.white_gray,
    fontWeight: "normal",
  },
+  // =============== TEXT & LABEL =============== //

-  // Stack Header Style
+  // =============== STACK HEADER =============== //
  headerStyle: {
    backgroundColor: AccentColor.darkblue,
  },
@@ -56,14 +80,16 @@ export const GStyles = StyleSheet.create({
    color: MainColor.yellow,
    fontWeight: "bold",
  },
+  // =============== STACK HEADER =============== //

-  // HOME
+  // =============== HOME =============== //
  homeContainer: {
    flex: 1,
    paddingInline: 25,
    paddingBlock: 10,
    backgroundColor: MainColor.darkblue,
  },
+  // =============== HOME =============== //

  // =============== TAB =============== //
  tabBar: {
@@ -149,6 +175,7 @@ export const GStyles = StyleSheet.create({
  // =============== BOTTOM BAR =============== //

  // =============== BUTTON =============== //
+
  buttonCentered50Percent: {
    width: "50%",
    alignSelf: "center",
@@ -198,12 +225,6 @@ export const GStyles = StyleSheet.create({
    height: 50,
  },

-  // Style saat disabled
-  inputDisabled: {
-    backgroundColor: "#f9f9f9",
-    borderColor: "#e0e0e0",
-  },
-
  // Input utama (TextInput)
  inputText: {
    flex: 1,