feature & fix

deksripsi:
feature:
- Information Box
- Create profile
fix:
component: Alet, Avatar, Select
# No Issue

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

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  AvatarCustom,
+  ButtonCustom,
+  Spacing,
+  StackCustom,
+  SelectCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import InformationBox from "@/components/Box/InformationBox";
+import ButtonUpload from "@/components/Button/ButtonUpload";
+import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
+import { View } from "react-native";
+import { useState } from "react";
+import { router } from "expo-router";
+
+export default function CreateProfile() {
+  const [data, setData] = useState({
+    name: "",
+    email: "",
+    address: "",
+    gender: "",
+  });
+
+  const handlerSave = () => {
+    console.log("data create profile >>", data);
+    // router.back();
+  };
+
+  return (
+    <ViewWrapper
+      bottomBarComponent={
+        <ButtonCustom
+          onPress={handlerSave}
+          disabled={!data.name || !data.email || !data.address || !data.gender}
+        >
+          Simpan
+        </ButtonCustom>
+      }
+    >
+      <StackCustom>
+        <InformationBox text="Upload foto profile anda." />
+        <View style={{ alignItems: "center" }}>
+          <AvatarCustom size="xl" />
+          <Spacing />
+          <ButtonUpload onPress={() => console.log("pressed")} />
+        </View>
+
+        <Spacing />
+
+        <View>
+          <InformationBox text="Upload foto latar belakang anda." />
+          <LandscapeFrameUploaded />
+          <Spacing />
+          <ButtonUpload onPress={() => console.log("pressed")} />
+        </View>
+
+        <Spacing />
+        <TextInputCustom
+          required
+          label="Nama"
+          placeholder="Masukkan nama"
+          value={data.name}
+          onChangeText={(text) => setData({ ...data, name: text })}
+        />
+        <TextInputCustom
+          keyboardType="email-address"
+          required
+          label="Email"
+          placeholder="Masukkan email"
+          value={data.email}
+          onChangeText={(text) => setData({ ...data, email: text })}
+        />
+        <TextInputCustom
+          required
+          label="Alamat"
+          placeholder="Masukkan alamat"
+          value={data.address}
+          onChangeText={(text) => setData({ ...data, address: text })}
+        />
+        <SelectCustom
+          label="Jenis Kelamin"
+          placeholder="Pilih jenis kelamin"
+          data={[
+            { label: "Laki-laki", value: "laki-laki" },
+            { label: "Perempuan", value: "perempuan" },
+          ]}
+          value={data.gender}
+          required
+          onChange={(value) => setData({ ...(data as any), gender: value })}
+        />
+        <Spacing height={100} />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -45,6 +45,11 @@ export default function Profile() {
     //   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)

app/(application)/profile/_layout.tsx

@@ -24,6 +24,10 @@ export default function ProfileLayout() {
           name="[id]/update-background"
           options={{ title: "Update Latar Belakang" }}
         />
+        <Stack.Screen
+          name="[id]/create"
+          options={{ title: "Buat Profile" }}
+        />
       </Stack>
     </>
   );

components/Alert/AlertCustom.tsx

@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
   alertButton: {
     flex: 1,
     padding: 10,
-    borderRadius: 5,
+    borderRadius: 50,
     marginHorizontal: 5,
     alignItems: "center",
   },

components/Box/InformationBox.tsx

@@ -0,0 +1,33 @@
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import Grid from "../Grid/GridCustom";
+import TextCustom from "../Text/TextCustom";
+import BaseBox from "./BaseBox";
+
+export default function InformationBox({ text }: { text: string }) {
+  return (
+    <>
+      <BaseBox>
+        <Grid>
+          <Grid.Col
+            span={2}
+            style={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <Ionicons
+              name="information-circle-outline"
+              size={24}
+              color={MainColor.white}
+            />
+          </Grid.Col>
+          <Grid.Col span={10} style={{ justifyContent: "center" }}>
+            <TextCustom>
+              {text
+                ? text
+                : "Lorem ipsum dolor sit amet consectetur adipisicing elit."}
+            </TextCustom>
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}

components/Image/AvatarCustom.tsx

@@ -1,7 +1,8 @@
 import { MainColor } from "@/constants/color-palet";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
 
-type Size = "base" | "sm" | "md" | "lg";
+type Size = "base" | "sm" | "md" | "lg" | "xl";
 
 interface AvatarCustomProps {
   source?: ImageSourcePropType;
@@ -13,10 +14,11 @@ const sizeMap = {
   sm: 60,
   md: 80,
   lg: 100,
+  xl: 120,
 };
 
 export default function AvatarCustom({
-  source = require("@/assets/images/dummy/dummy-avatar.png"),
+  source = DUMMY_IMAGE.avatar,
   size = "base",
 }: AvatarCustomProps) {
   const dimension = sizeMap[size];

components/Image/LandscapeFrameUploaded.tsx

@@ -0,0 +1,20 @@
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { Image } from "react-native";
+import BaseBox from "../Box/BaseBox";
+
+export default function LandscapeFrameUploaded() {
+  return (
+    <BaseBox
+      style={{
+        height: 250,
+        width: "100%",
+      }}
+    >
+      <Image
+        source={DUMMY_IMAGE.background}
+        resizeMode="cover"
+        style={{ width: "100%", height: "100%", borderRadius: 10 }}
+      />
+    </BaseBox>
+  );
+}

components/Select/SelectCustom.tsx

@@ -22,6 +22,7 @@ type SelectProps = {
   placeholder?: string;
   data: SelectItem[];
   value?: string | number | null;
+  required?: boolean; // <-- new prop
   onChange: (value: string | number) => void;
 };
 
@@ -30,16 +31,27 @@ const SelectCustom: React.FC<SelectProps> = ({
   placeholder = "Pilih opsi",
   data,
   value,
+  required = false, // <-- default false
   onChange,
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
   const selectedItem = data.find((item) => item.value === value);
 
+  const hasError = required && value === null; // <-- check if empty and required
+
   return (
     <View style={styles.container}>
-      {label && <Text style={styles.label}>{label}</Text>}
+      {label && (
-      <Pressable style={styles.input} onPress={() => setModalVisible(true)}>
+        <Text style={styles.label}>
+          {label}
+          {required && <Text style={styles.requiredIndicator}> *</Text>}
+        </Text>
+      )}
+      <Pressable
+        style={[styles.input, hasError ? styles.inputError : null]} // <-- add error style
+        onPress={() => setModalVisible(true)}
+      >
         <Text style={selectedItem ? styles.text : styles.placeholder}>
           {selectedItem?.label || placeholder}
         </Text>
@@ -70,6 +82,11 @@ const SelectCustom: React.FC<SelectProps> = ({
           </View>
         </TouchableOpacity>
       </Modal>
+
+      {/* Optional Error Message */}
+      {hasError && (
+        <Text style={styles.errorMessage}>Harap pilih salah satu</Text>
+      )}
     </View>
   );
 };
@@ -86,6 +103,10 @@ const styles = StyleSheet.create({
     color: MainColor.white,
     fontWeight: "500",
   },
+  requiredIndicator: {
+    color: "red",
+    fontWeight: "bold",
+  },
   input: {
     borderWidth: 1,
     borderColor: "#ccc",
@@ -95,6 +116,9 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: MainColor.white,
   },
+  inputError: {
+    borderColor: "red",
+  },
   text: {
     fontSize: TEXT_SIZE_MEDIUM,
   },
@@ -120,4 +144,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: "#eee",
   },
+  errorMessage: {
+    marginTop: 4,
+    fontSize: 12,
+    color: "red",
+  },
 });

components/TextInput/TextInputCustom.tsx

@@ -1,5 +1,3 @@
-// components/TextInputCustom.tsx
-
 import Ionicons from "@expo/vector-icons/Ionicons";
 import React, { useState } from "react";
 import {
@@ -32,15 +30,18 @@ export const TextInputCustom = ({
   iconRight,
   label,
   required = false,
-  error = "",
+  error: externalError = "",
   secureTextEntry = false,
   fontColor = "#000",
   disabled = false,
   borderRadius = 8,
   style,
+  keyboardType,
+  onChangeText,
   ...rest
 }: Props) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [internalError, setInternalError] = useState("");
 
   // Helper untuk render ikon
   const renderIcon = (icon: IconType) => {
@@ -52,6 +53,23 @@ export const TextInputCustom = ({
     );
   };
 
+  // Validasi email jika keyboardType = email-address
+  const handleTextChange = (text: string) => {
+    if (keyboardType === "email-address") {
+      const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(text);
+      if (!isValid) {
+        setInternalError("Masukkan email yang valid");
+      } else {
+        setInternalError("");
+      }
+    }
+
+    // Panggil onChangeText eksternal jika ada
+    if (onChangeText) {
+      onChangeText(text);
+    }
+  };
+
   return (
     <View style={textInputStyles.container}>
       {label && (
@@ -65,7 +83,7 @@ export const TextInputCustom = ({
           textInputStyles.inputContainer,
           disabled && textInputStyles.disabled,
           { borderRadius },
-          error ? textInputStyles.errorBorder : null,
+          externalError || internalError ? textInputStyles.errorBorder : null,
           style,
         ]}
       >
@@ -76,6 +94,8 @@ export const TextInputCustom = ({
           style={[textInputStyles.input, { color: fontColor }]}
           editable={!disabled}
           secureTextEntry={secureTextEntry && !isPasswordVisible}
+          keyboardType={keyboardType}
+          onChangeText={handleTextChange}
           {...rest}
         />
         {secureTextEntry && (
@@ -94,7 +114,12 @@ export const TextInputCustom = ({
           <View style={textInputStyles.icon}>{renderIcon(iconRight)}</View>
         )}
       </View>
-      {error ? <Text style={textInputStyles.errorMessage}>{error}</Text> : null}
+      {/* Prioritaskan error eksternal */}
+      {externalError || internalError ? (
+        <Text style={textInputStyles.errorMessage}>
+          {externalError || internalError}
+        </Text>
+      ) : null}
     </View>
   );
 };

components/_ShareComponent/ViewWrapper.tsx

@@ -47,42 +47,11 @@ const ViewWrapper = ({
         {tabBarComponent ? tabBarComponent : null}
         {bottomBarComponent ? (
           <View style={GStyles.bottomBar}>
-            <View style={GStyles.bottomBarContainer}>
+            <View style={GStyles.bottomBarContainer}>{bottomBarComponent}</View>
-              {bottomBarComponent}
-            </View>
           </View>
         ) : null}
       </SafeAreaView>
     </>
-
-    // <SafeAreaProvider>
-    //   <SafeAreaView
-    //     edges={[
-    //       "bottom",
-    //       // "top",
-    //     ]}
-    //     style={{
-    //       flex: 1,
-    //       // paddingTop: StatusBar.currentHeight,
-    //       backgroundColor: MainColor.darkblue,
-    //     }}
-    //   >
-    //     <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-    //       {withBackground ? (
-    //         <ImageBackground
-    //           source={assetBackground}
-    //           resizeMode="cover"
-    //           style={Styles.imageBackground}
-    //         >
-    //           <View style={Styles.containerWithBackground}>{children}</View>
-    //         </ImageBackground>
-    //       ) : (
-    //         <View style={Styles.container}>{children}</View>
-    //       )}
-    //     </ScrollView>
-    //     {tabBarComponent}
-    //   </SafeAreaView>
-    // </SafeAreaProvider>
   );
 };
 

components/index.ts

@@ -18,7 +18,7 @@ import Grid from "./Grid/GridCustom";
 // Box
 import BaseBox from "./Box/BaseBox";
 // Avatar
-import AvatarCustom from "./Avatar/AvatarCustom"
+import AvatarCustom from "./Image/AvatarCustom"
 // Stack
 import StackCustom from "./Stack/StackCustom";
 // Select

screens/Authentication/LoginView.tsx

@@ -28,10 +28,10 @@ export default function LoginView() {
     const randomAlfabet = Math.random().toString(36).substring(2, 8);
     const randomNumber = Math.floor(Math.random() * 1000000);
     const id = randomAlfabet + randomNumber + fixNumber;
-    console.log("user id :", id);
+    console.log("login user id :", id);
     
-    // router.navigate("/verification");
+    router.navigate("/verification");
-    router.navigate(`/(application)/profile/${id}`);
+    // router.navigate(`/(application)/profile/${id}`);
     // router.navigate("/(application)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
 

screens/Profile/AvatarAndBackground.tsx

@@ -1,12 +1,13 @@
 import { AvatarCustom } from "@/components";
 import { AccentColor } from "@/constants/color-palet";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { View, ImageBackground, StyleSheet } from "react-native";
 
 const AvatarAndBackground = () => {
   return (
     <View style={styles.container}>
       <ImageBackground
-        source={require("@/assets/images/logo-hipmi.png")}
+        source={DUMMY_IMAGE.background}
         style={styles.backgroundImage}
         resizeMode="contain"
       />
@@ -15,7 +16,7 @@ const AvatarAndBackground = () => {
       {/* Avatar yang sedikit keluar */}
       <View style={styles.avatarOverlap}>
         <AvatarCustom
-          source={require("@/assets/images/react-logo.png")}
+          source={DUMMY_IMAGE.avatar}
           size="lg"
         />
       </View>