Fix QC Ayu

Fix:
- modified:   app/(application)/(user)/event/[id]/publish.tsx
- modified:   app/(application)/(user)/event/create.tsx
- modified:   app/(application)/(user)/portofolio/[id]/create.tsx
- modified:   app/(application)/(user)/portofolio/[id]/edit.tsx
- modified:   app/(application)/admin/collaboration/[id]/group.tsx
- modified:   app/(application)/admin/collaboration/group.tsx
- modified:   app/(application)/admin/collaboration/publish.tsx
- modified:   app/(application)/admin/forum/[id]/list-report-comment.tsx
- modified:   app/(application)/admin/forum/[id]/list-report-posting.tsx
- modified:   app/(application)/admin/forum/posting.tsx
- modified:   app/(application)/admin/forum/report-comment.tsx
- modified:   app/(application)/admin/forum/report-posting.tsx
- modified:   app/(application)/admin/voting/[status]/status.tsx
- modified:   app/(application)/admin/voting/history.tsx
- modified:   components/Select/SelectCustom.tsx
- modified:   components/_ShareComponent/GridSpan_4_8.tsx
- modified:   screens/Authentication/LoginView.tsx
- modified:   screens/Collaboration/BoxPublishSection.tsx
- modified:   screens/Event/BoxDetailPublishSection.tsx
- modified:   screens/Home/topFeatureSection.tsx
- modified:   screens/Portofolio/ButtonCreatePortofolio.tsx

Add:
- components/_ShareComponent/GridSpan_NewComponent.tsx

### No Issue

android/app/build.gradle

@@ -100,7 +100,7 @@ packagingOptions {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 2
+        versionCode 3
         versionName "1.0.1"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""

app.config.js

@@ -19,7 +19,7 @@ export default {
       "NSLocationWhenInUseUsageDescription": "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
     associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
-    buildNumber: "9",
+    buildNumber: "13",
   },
 
   android: {
@@ -30,7 +30,7 @@ export default {
     },
     edgeToEdgeEnabled: true,
     package: "com.bip.hipmimobileapp",
-    versionCode: 2,
+    versionCode: 3,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {

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

@@ -595,6 +595,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="forum/terms"
+          options={{
+            title: "Syarat & Ketentuan Forum",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== Maps Section ========= */}
         <Stack.Screen

app/(application)/(user)/collaboration/create.tsx

@@ -155,7 +155,7 @@ export default function CollaborationCreate() {
           <TextAreaCustom
             required
             label="Keuntungan Proyek"
-            placeholder="Masukan keuntungan proyek"
+            placeholder="Masukan keuntungan proyek, contoh: Meningkatkan relasi bisnis , menjamin kualitas produk, meningkatkan kinerja dan lain lain"
             showCount
             maxLength={1000}
             value={data?.benefit}

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

@@ -18,7 +18,7 @@ import {
 import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function EventEdit() {
@@ -55,6 +55,7 @@ export default function EventEdit() {
     try {
       setIsLoadData(true);
       const response = await apiEventGetOne({ id: id as string });
+      console.log("[DATA BY ID]", JSON.stringify(response, null, 2));
       if (response.success) {
         setData(response.data);
         setSelectedDate(new Date(response.data.tanggal));
@@ -209,7 +210,7 @@ export default function EventEdit() {
               minimumDate={new Date(Date.now())}
               label="Tanggal & Waktu Mulai"
               required
-              value={selectedDate as any}
+              value={selectedDate}
               onChange={(date: any) => {
                 setSelectedDate(date as any);
               }}
@@ -254,7 +255,6 @@ export default function EventEdit() {
               placeholder="Masukkan deskripsi event"
               required
               showCount
-              maxLength={100}
               value={data?.deskripsi}
               onChangeText={(value) => setData({ ...data, deskripsi: value })}
             />

app/(application)/(user)/event/[id]/publish.tsx

@@ -71,8 +71,6 @@ export default function EventDetailPublish() {
     }
   }
 
-  console.log("[participans]", isParticipant);
-
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
     router.navigate(item.path as any);
@@ -139,7 +137,7 @@ export default function EventDetailPublish() {
     <>
       <Stack.Screen
         options={{
-          title: `Event publish`,
+          title: `Event Publish`,
           headerLeft: () => <LeftButtonCustom />,
           headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}

app/(application)/(user)/event/create.tsx

@@ -110,13 +110,14 @@ export default function EventCreate() {
       const response = await apiEventCreate(newData);
       console.log("Response", JSON.stringify(response, null, 2));
 
-      router.navigate("/event/status");
+      router.replace("/event/status");
     } catch (error) {
       console.log(error);
     } finally {
       setIsLoading(false);
     }
   };
+  
 
   const buttonSubmit = (
     <ButtonCustom
@@ -144,7 +145,7 @@ export default function EventCreate() {
               label: item.name,
               value: item.id,
             }))}
-            value={data?.eventMaster_TipeAcaraId || ""}
+            value={data?.eventMaster_TipeAcaraId || null}
             onChange={(value: any) =>
               setData({ ...data, eventMaster_TipeAcaraId: value })
             }
@@ -191,7 +192,7 @@ export default function EventCreate() {
             placeholder="Masukkan deskripsi event"
             required
             showCount
-            maxLength={1000}
+            value={data?.deskripsi || ""}
             onChangeText={(value: any) =>
               setData({ ...data, deskripsi: value })
             }

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

@@ -5,9 +5,12 @@ import {
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
+import AlertWarning from "@/components/Alert/AlertWarning";
 import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
+import { Alert } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function ForumEdit() {
@@ -43,6 +46,12 @@ export default function ForumEdit() {
       });
       return;
     }
+
+    if (isBadContent(text)) {
+      AlertWarning({});
+      return;
+    }
+
     try {
       setIsLoading(true);
       const response = await apiForumUpdate({

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

@@ -7,6 +7,7 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import AlertWarning from "@/components/Alert/AlertWarning";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
@@ -18,9 +19,11 @@ import {
   apiForumGetOne,
   apiForumUpdateStatus,
 } from "@/service/api-client/api-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useEffect, useState } from "react";
+import { Alert } from "react-native";
 
 interface CommentProps {
   id: string;
@@ -110,11 +113,15 @@ export default function ForumDetail() {
 
   // Create Commentar
   const handlerCreateCommentar = async () => {
+    if (isBadContent(text)) {
+      AlertWarning({});
+      return;
+    }
+    
     const newData = {
       comment: text,
       authorId: user?.id,
     };
-
     try {
       setLoadingComment(true);
       const response = await apiForumCreateComment({

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

@@ -2,12 +2,15 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   TextAreaCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import AlertWarning from "@/components/Alert/AlertWarning";
 import { useAuth } from "@/hooks/use-auth";
 import { apiForumCreate } from "@/service/api-client/api-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
 import { router } from "expo-router";
 import { useState } from "react";
+import { Alert } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function ForumCreate() {
@@ -16,11 +19,16 @@ export default function ForumCreate() {
   const [isLoading, setIsLoading] = useState(false);
 
   const handlerSubmit = async () => {
+    
+    if (isBadContent(text)) {
+      AlertWarning({})
+      return;
+    }
+    
     const newData = {
       diskusi: text,
       authorId: user?.id,
     };
-
     try {
       setIsLoading(true);
       const response = await apiForumCreate({ data: newData });

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

@@ -0,0 +1,202 @@
+import {
+    BaseBox,
+    ButtonCustom,
+    CheckboxCustom,
+    NewWrapper,
+    StackCustom,
+    TextCustom,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiAcceptForumTerms } from "@/service/api-client/api-user";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import { Text } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function ForumSplash() {
+  const { user } = useAuth();
+  const [term, setTerm] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+      const respone = await apiAcceptForumTerms({
+        category: "Forum",
+        userId: user?.id as any,
+      });
+
+      if (respone.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: "Terima kasih telah menerima syarat & ketentuan forum ini",
+        });
+
+        router.replace("/(application)/forum");
+
+        return;
+      }
+
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Terjadi kesalahan, silahkan coba lagi",
+      });
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <NewWrapper>
+      {/* <TextCustom bold>HIPMI Badung Connect</TextCustom> . */}
+
+      <BaseBox>
+        <StackCustom>
+          <TextCustom>
+            Dengan mengakses dan menggunakan Forum HIPMI Badung Connect, Anda
+            secara sadar menyetujui ketentuan berikut:
+          </TextCustom>
+
+          <TextCustom bold>
+            1. Dilarang keras memposting konten yang mengandung:
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms1.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom bold>
+            2. Setiap pengguna bertanggung jawab penuh atas konten yang
+            diunggah. Konten yang melanggar ketentuan ini dapat dihapus kapan
+            saja tanpa pemberitahuan.
+          </TextCustom>
+
+          <TextCustom bold>
+            3. Jika Anda menemukan konten tidak pantas, segera:
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms2.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom bold>
+            4. Gunakan fitur “Blokir Pengguna” di profil pengguna terkait
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms3.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom>
+            Pelanggaran terhadap ketentuan ini berakibat{" "}
+            <TextCustom bold>pencabutan akses</TextCustom> ke Forum dan/atau{" "}
+            <TextCustom bold>pemblokiran akun secara permanen</TextCustom> tanpa
+            pemberitahuan lebih lanjut.
+          </TextCustom>
+
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              marginTop: 16,
+              marginBottom: 16,
+            }}
+          >
+            <CheckboxCustom value={term} onChange={() => setTerm(!term)} />
+
+            <Text style={GStyles.textLabel}>
+              Saya telah membaca dan menyetujui Syarat & Ketentuan Forum ini
+            </Text>
+          </View>
+
+          <ButtonCustom
+            disabled={!term || loading}
+            onPress={() => {
+              handleSubmit();
+            }}
+          >
+            Lanjut
+          </ButtonCustom>
+        </StackCustom>
+      </BaseBox>
+    </NewWrapper>
+  );
+}
+
+// Data dalam format JSON (bisa juga diimpor dari file terpisah)
+interface Term {
+  text: string;
+}
+
+const forumTerms1: Term[] = [
+  {
+    text: "Ujaran kebencian, diskriminasi, atau konten SARA (Suku, Agama, Ras, Antar-golongan)",
+  },
+  { text: "Kata kasar, pelecehan, ancaman, atau bullying" },
+  { text: "Pornografi, hoaks, spam, atau informasi menyesatkan" },
+  { text: "Promosi aktivitas ilegal seperti perjudian atau narkoba" },
+];
+
+const forumTerms2: Term[] = [
+  {
+    text: "Gunakan tombol “Laporkan” di setiap postingan, atau",
+  },
+  {
+    text: "Gunakan fitur “Blokir Pengguna” di profil pengguna terkait.",
+  },
+];
+
+const forumTerms3: Term[] = [
+  {
+    text: "Meninjau setiap laporan dalam waktu 24 jam",
+  },
+  {
+    text: "Menghapus konten yang melanggar",
+  },
+  {
+    text: "Memblokir akun pelanggar sesuai tingkat pelanggaran",
+  },
+];

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

@@ -11,35 +11,44 @@ import Home_FeatureSection from "@/screens/Home/topFeatureSection";
 import { apiUser } from "@/service/api-client/api-user";
 import { apiVersion } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
-import { Redirect, router, Stack } from "expo-router";
-import { useEffect, useState } from "react";
+import { Redirect, router, Stack, useFocusEffect } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { RefreshControl } from "react-native";
 
 export default function Application() {
-  const { token, user } = useAuth();
+  const { token, user, userData } = useAuth();
   const [data, setData] = useState<any>();
+  const [refreshing, setRefreshing] = useState(false);
+  console.log("[User] >>", JSON.stringify(user?.id, null, 2))
+
+  // ‼️ Untuk cek apakah: 1. user ada, 2. user punya profile, 3. accept temrs of forum nya ada atau tidak
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      checkVersion();
+      userData(token as string);
+    }, [user?.id, token])
+  );
 
-  console.log("[User] >>", JSON.stringify(user?.id, null, 2));
-  
-  useEffect(() => {
-    onLoadData();
-    checkVersion();
-  }, []);
-  
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
-    console.log(
-      "[Profile ID]>>",
-      JSON.stringify(response?.data?.Profile.id, null, 2)
-    );
-    
+    console.log("[Profile ID]>>", JSON.stringify(response?.data?.Profile?.id, null, 2));
+
     setData(response.data);
   }
-  
+
   const checkVersion = async () => {
     const response = await apiVersion();
     console.log("[Version] >>", JSON.stringify(response.data, null, 2));
   };
-  
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    onLoadData();
+    checkVersion();
+    setRefreshing(false);
+  }, []);
+
   if (user && user?.termsOfServiceAccepted === false) {
     console.log("User is not accept term service");
     return <Redirect href={`/terms-agreement`} />;
@@ -83,8 +92,16 @@ export default function Application() {
         }}
       />
       <ViewWrapper
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
         footerComponent={
-          <TabSection tabs={tabsHome(data?.Profile?.id as string)} />
+          <TabSection
+            tabs={tabsHome({
+              acceptedForumTermsAt: data?.acceptedForumTermsAt,
+              profileId: data?.Profile?.id,
+            })}
+          />
         }
       >
         <StackCustom>

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

@@ -15,6 +15,7 @@ import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvesta
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
 import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import {
   router,
@@ -23,7 +24,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import _ from "lodash";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export default function InvestmentDetail() {
   const { user } = useAuth();
@@ -62,6 +63,31 @@ export default function InvestmentDetail() {
     setOpenDrawerPublish(false);
   };
 
+    const [value, setValue] = useState({
+      sisa: 0,
+      reminder: false,
+    });
+  
+    useEffect(() => {
+      updateCountDown();
+    }, [data]);
+
+    console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));
+  
+    const updateCountDown = () => {
+      const countDown = countDownAndCondition({
+        duration: data?.MasterPencarianInvestor.name,
+        publishTime: data?.countDown,
+      });
+  
+      setValue({
+        sisa: countDown.durationDay,
+        reminder: countDown.reminder,
+      });
+    };
+
+
+
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
       id={id as string}
@@ -71,7 +97,7 @@ export default function InvestmentDetail() {
   );
 
   const buttonSection = (
-    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} />
+    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} reminder={value.reminder} />
   );
 
   return (

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

@@ -76,7 +76,7 @@ export default function PortofolioCreate() {
   function handleInputValue(phoneNumber: string) {
     setInputValue(phoneNumber);
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
-    const fixNumber = inputValue.replace(/\s+/g, "");
+    let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
     const realNumber = callingCode + fixNumber;
     setData({ ...data, tlpn: realNumber });
   }

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

@@ -244,7 +244,7 @@ export default function PortofolioEdit() {
 
   const handleSubmitUpdate = async () => {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
-    const fixNumber = data.tlpn.replace(/\s+/g, "");
+    let fixNumber = data.tlpn.replace(/\s+/g, "").replace(/^0+/, "");
     const realNumber = callingCode + fixNumber;
 
     const newData: IFormData = {

app/(application)/(user)/profile/[id]/blocked-list.tsx

@@ -121,7 +121,7 @@ export default function ProfileBlockedList() {
   return (
     <>
       <NewWrapper
-        headerComponent={renderHeader()}
+        // headerComponent={renderHeader()}
         listData={listData}
         renderItem={renderItem}
         onEndReached={loadMore}

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

@@ -64,14 +64,18 @@ export default function Profile() {
   };
 
   const onLoadPortofolio = async (id: string) => {
-    const response = await apiGetPortofolio({ id: id });
-    const lastTwoByDate = response.data
-      .sort(
-        (a: any, b: any) =>
-          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-      ) // urut desc
-      .slice(0, 2);
-    setListPortofolio(lastTwoByDate);
+    try {
+      const response = await apiGetPortofolio({ id: id });
+      const lastTwoByDate = response.data
+        .sort(
+          (a: any, b: any) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        ) // urut desc
+        .slice(0, 2);
+      setListPortofolio(lastTwoByDate);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
   };
 
   return (

app/(application)/(user)/voting/(tabs)/index.tsx

@@ -6,6 +6,7 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
 import { apiVotingGetAll } from "@/service/api-client/api-voting";
 import { router, useFocusEffect } from "expo-router";
@@ -13,6 +14,7 @@ import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function VotingBeranda() {
+  const { user } = useAuth();
   const [listData, setListData] = useState<any>([]);
   const [loadingGetData, setLoadingGetData] = useState(false);
   const [search, setSearch] = useState("");
@@ -29,6 +31,7 @@ export default function VotingBeranda() {
       const response = await apiVotingGetAll({
         search,
         category: "beranda",
+        userLoginId: user?.id,
       });
       if (response.success) {
         setListData(response.data);

app/(application)/(user)/voting/[id]/[status]/detail.tsx

@@ -134,7 +134,7 @@ export default function VotingDetailStatus() {
 
             {data &&
               data?.catatan &&
-              (status === "draft" || status === "rejected") && (
+              (status === "draft" || status === "reject") && (
                 <ReportBox text={data?.catatan} />
               )}
 

app/(application)/(user)/waiting-room.tsx

@@ -4,6 +4,7 @@ import {
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
+  NewWrapper,
   StackCustom,
   ViewWrapper,
 } from "@/components";
@@ -12,6 +13,7 @@ import { useAuth } from "@/hooks/use-auth";
 import { apiUser } from "@/service/api-client/api-user";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
+import { RefreshControl } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function WaitingRoom() {
@@ -33,7 +35,7 @@ export default function WaitingRoom() {
         } else {
           Toast.show({
             type: "success",
-            text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
+            text1: "Selamat ! Akun anda telah aktif", // text2: "Anda berhasil login",
           });
           router.replace(`/(application)/(user)/profile/create`);
         }
@@ -82,10 +84,18 @@ export default function WaitingRoom() {
 
   return (
     <>
-      <ViewWrapper footerComponent={logoutButton()}>
+      <NewWrapper
+        footerComponent={logoutButton()}
+        refreshControl={
+          <RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
+        }
+      >
         <StackCustom>
-          <InformationBox text="Permohonan akses Anda sedang dalam proses verifikasi oleh admin. Harap tunggu, Anda akan menerima pemberitahuan melalui Whatsapp setelah disetujui." />
-          <ButtonCenteredOnly
+          <InformationBox
+            text="Akun Anda sedang menunggu aktivasi.
+Silakan tunggu beberapa saat. Untuk memperbarui status, tarik layar ke bawah."
+          />
+          {/* <ButtonCenteredOnly
             isLoading={isLoading}
             onPress={() => {
               handleCheck();
@@ -93,9 +103,9 @@ export default function WaitingRoom() {
             icon="refresh-ccw"
           >
             Check
-          </ButtonCenteredOnly>
+          </ButtonCenteredOnly> */}
         </StackCustom>
-      </ViewWrapper>
+      </NewWrapper>
     </>
   );
 }

app/(application)/admin/collaboration/[id]/group.tsx

@@ -2,11 +2,13 @@
 import {
   BaseBox,
   Grid,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import { apiAdminCollaborationGetById } from "@/service/api-admin/api-admin-collaboration";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
@@ -28,6 +30,8 @@ export default function AdminCollaborationGroup() {
         category: "group",
       });
 
+      console.log("[DATA]", JSON.stringify(response.data, null, 2));
+
       if (response.success) {
         setData(response.data);
       }
@@ -59,38 +63,33 @@ export default function AdminCollaborationGroup() {
               ))}
             </StackCustom>
           </BaseBox>
+
+          <TextCustom bold>Anggota</TextCustom>
+          <Spacing height={5}/>
           <BaseBox>
             <StackCustom>
-              <TextCustom align="center">Anggota</TextCustom>
+
+              <Grid>
+                <Grid.Col span={6} style={{ justifyContent: "center", paddingRight: 10 }}>
+                  <TextCustom bold>Nomor</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                  <TextCustom bold>Username</TextCustom>
+                </Grid.Col>
+              </Grid>
 
               {data?.ProjectCollaboration_AnggotaRoomChat?.map(
                 (item: any, index: number) => (
-                  <StackCustom key={index} gap={0}>
-                    <Grid>
-                      <Grid.Col
-                        span={4}
-                        style={{ justifyContent: "center", paddingRight: 10 }}
-                      >
-                        <TextCustom bold>Nama</TextCustom>
-                      </Grid.Col>
-                      <Grid.Col span={8} style={{ justifyContent: "center" }}>
-                        <TextCustom>
-                          {item?.User?.Profile?.name || "-"}
-                        </TextCustom>
-                      </Grid.Col>
-                    </Grid>
-                    <Grid>
-                      <Grid.Col
-                        span={4}
-                        style={{ justifyContent: "center", paddingRight: 10 }}
-                      >
-                        <TextCustom bold>Username</TextCustom>
-                      </Grid.Col>
-                      <Grid.Col span={8} style={{ justifyContent: "center" }}>
-                        <TextCustom>{item?.User?.username || "-"}</TextCustom>
-                      </Grid.Col>
-                    </Grid>
-                  </StackCustom>
+                  <Grid key={index}>
+                    <Grid.Col span={6} style={{ justifyContent: "center", paddingRight: 10 }}>
+                      <TextCustom bold truncate>+{item?.User?.nomor || "-"}</TextCustom>
+                    </Grid.Col>
+                    <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                      <TextCustom bold>
+                        {item?.User?.username || "-"}
+                      </TextCustom>
+                    </Grid.Col>
+                  </Grid>
                 )
               )}
             </StackCustom>

app/(application)/admin/collaboration/group.tsx

@@ -1,17 +1,14 @@
 import {
-  ActionIcon,
+  ClickableCustom,
   LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper
 } from "@/components";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { apiAdminCollaboration } from "@/service/api-admin/api-admin-collaboration";
-import { Octicons } from "@expo/vector-icons";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
@@ -34,7 +31,7 @@ export default function AdminCollaborationGroup() {
       const response = await apiAdminCollaboration({
         category: "group",
       });
-      
+
       if (response.success) {
         setList(response.data);
       }
@@ -51,10 +48,19 @@ export default function AdminCollaborationGroup() {
         <StackCustom>
           <AdminComp_BoxTitle title="Group" />
           <>
-            <AdminTitleTable
-              title1="Aksi"
-              title2="Jumlah peserta"
-              title3="Nama group"
+            <GridSpan_NewComponent
+              span1={6}
+              span2={6}
+              text1={
+                <TextCustom bold truncate align="center">
+                  Jumlah Anggota
+                </TextCustom>
+              }
+              text2={
+                <TextCustom bold truncate>
+                  Nama Group
+                </TextCustom>
+              }
             />
             <Divider />
 
@@ -67,31 +73,27 @@ export default function AdminCollaborationGroup() {
             ) : (
               list?.map((item: any, index: number) => (
                 <View key={index}>
-                  <AdminTableValue
-                    value1={
-                      <ActionIcon
-                        icon={
-                          <Octicons
-                            name="eye"
-                            size={ICON_SIZE_BUTTON}
-                            color="black"
-                          />
-                        }
-                        onPress={() => {
-                          router.push(`/admin/collaboration/${item.id}/group`);
-                        }}
-                      />
-                    }
-                    value2={
-                      <TextCustom truncate={1}>
-                        {item?.ProjectCollaboration_AnggotaRoomChat?.length ||
-                          "-"}
-                      </TextCustom>
-                    }
-                    value3={
-                      <TextCustom truncate={2}>{item?.name || "-"}</TextCustom>
-                    }
-                  />
+                  <ClickableCustom
+                    onPress={() => {
+                      router.push(`/admin/collaboration/${item.id}/group`);
+                    }}
+                  >
+                    <GridSpan_NewComponent
+                      span1={6}
+                      span2={6}
+                      text1={
+                        <TextCustom truncate={1} align="center">
+                          {item?.ProjectCollaboration_AnggotaRoomChat?.length ||
+                            "-"}
+                        </TextCustom>
+                      }
+                      text2={
+                        <TextCustom truncate={2}>
+                          {item?.name || "-"}
+                        </TextCustom>
+                      }
+                    />
+                  </ClickableCustom>
                 </View>
               ))
             )}

app/(application)/admin/collaboration/publish.tsx

@@ -1,6 +1,8 @@
 import {
   ActionIcon,
+  ClickableCustom,
   LoaderCustom,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
@@ -9,6 +11,7 @@ import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage"
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { apiAdminCollaboration } from "@/service/api-admin/api-admin-collaboration";
 import { Octicons } from "@expo/vector-icons";
@@ -51,11 +54,7 @@ export default function AdminCollaborationPublish() {
         <StackCustom>
           <AdminComp_BoxTitle title="Publish" />
 
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
-            title3="Judul Proyek"
-          />
+          <GridSpan_NewComponent text1={<TextCustom bold>Username</TextCustom>} text2={<TextCustom bold>Judul Proyek</TextCustom>} />
           {/* <Spacing height={10} /> */}
           <Divider />
 
@@ -68,32 +67,26 @@ export default function AdminCollaborationPublish() {
           ) : (
             list?.map((item: any, index: number) => (
               <View key={index}>
-                <AdminTableValue
-                  value1={
-                    <ActionIcon
-                      icon={
-                        <Octicons
-                          name="eye"
-                          size={ICON_SIZE_BUTTON}
-                          color="black"
-                        />
-                      }
-                      onPress={() => {
-                        router.push(`/admin/collaboration/${item?.id}/publish`);
-                      }}
-                    />
-                  }
-                  value2={
-                    <TextCustom align="center" truncate={1}>
-                      {item?.Author?.username || "-"}{" "}
-                    </TextCustom>
-                  }
-                  value3={
-                    <TextCustom align="center" truncate={2}>
-                      {item?.title || "-"}
-                    </TextCustom>
-                  }
-                />
+                <ClickableCustom
+                  onPress={() => {
+                    router.push(`/admin/collaboration/${item?.id}/publish`);
+                  }}
+                >
+                  <GridSpan_NewComponent
+                    text1={
+                      <TextCustom truncate={1}>
+                        {item?.Author?.username || "-"}{" "}
+                      </TextCustom>
+                    }
+                    text2={
+                      <TextCustom truncate={2}>
+                        {item?.title || "-"}
+                      </TextCustom>
+                    }
+                  />
+                </ClickableCustom>
+                <Spacing height={8}/>
+                <Divider/>
               </View>
             ))
           )}

app/(application)/admin/donation/[id]/[status]/index.tsx

@@ -18,7 +18,7 @@ import { IconDot, IconList } from "@/components/_Icon/IconComponent";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import ReportBox from "@/components/Box/ReportBox";
 import { ICON_SIZE_BUTTON, TEXT_SIZE_LARGE } from "@/constants/constans-value";
 import AdminDonation_BoxOfDonationStory from "@/screens/Admin/Donation/BoxOfDonationStory";
@@ -195,7 +195,7 @@ export default function AdminDonationDetail() {
 
                 <StackCustom gap={5}>
                   {listPencarianDana.map((item, i) => (
-                    <GridDetail_4_8
+                    <GridSpan_4_8
                       key={i}
                       label={<TextCustom bold>{item.label}</TextCustom>}
                       value={<TextCustom>{item.value}</TextCustom>}
@@ -236,7 +236,7 @@ export default function AdminDonationDetail() {
               <Spacing />
 
               <StackCustom gap={"xs"}>
-                <GridDetail_4_8
+                <GridSpan_4_8
                   label={<TextCustom bold>Jumlah Donatur</TextCustom>}
                   value={
                     <TextCustom>
@@ -244,7 +244,7 @@ export default function AdminDonationDetail() {
                     </TextCustom>
                   }
                 />
-                <GridDetail_4_8
+                <GridSpan_4_8
                   label={<TextCustom bold>Dana Terkumpul</TextCustom>}
                   value={
                     <TextCustom>
@@ -261,7 +261,7 @@ export default function AdminDonationDetail() {
           <StackCustom>
             <DummyLandscapeImage imageId={data?.imageId || ""} />
             {listData.map((item, i) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={i}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}

app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx

@@ -8,7 +8,7 @@ import {
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import {
   apiAdminDonationInvoiceDetailById,
   apiAdminDonationInvoiceUpdateById,
@@ -177,7 +177,7 @@ export default function AdminDonasiTransactionDetail() {
         <BaseBox>
           <StackCustom>
             {listData.map((item, index) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={index}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}

app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx

@@ -7,7 +7,7 @@ import {
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import { apiAdminDonationDisbursementOfFundsListById } from "@/service/api-admin/api-admin-donation";
 import { dateTimeView } from "@/utils/dateTimeView";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
@@ -67,7 +67,7 @@ export default function AdminDonationDetailDisbursementOfFunds() {
         <BaseBox>
           <StackCustom>
             {listData?.map((item, index) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={index}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}

app/(application)/admin/donation/category-create.tsx

@@ -1,17 +1,56 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  StackCustom,
+  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+import { apiAdminMasterDonationCategoryCreate } from "@/service/api-admin/api-master-admin";
 import { useRouter } from "expo-router";
+import { useState } from "react";
+import { Switch } from "react-native-paper";
+import Toast from "react-native-toast-message";
 
 export default function AdminDonationCategoryCreate() {
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState({
+    name: "",
+    active: false,
+  });
+
+  const onSubmit = async () => {
+    try {
+      setLoading(true);
+      const response = await apiAdminMasterDonationCategoryCreate({ data });
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text2: "Data berhasil disimpan",
+        });
+        router.back();
+        return;
+      }
+
+      Toast.show({
+        type: "error",
+        text1: "Gagal menyimpan data",
+      });
+    } catch (error) {
+      console.log("[Error]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const buttonSubmit = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+      <ButtonCustom isLoading={loading} onPress={onSubmit}>
+        Simpan
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
   return (
@@ -20,7 +59,23 @@ export default function AdminDonationCategoryCreate() {
         headerComponent={<AdminBackButtonAntTitle title="Tambah Kategori" />}
         footerComponent={buttonSubmit}
       >
-        <TextInputCustom placeholder="Masukkan Kategori" />
+        <TextInputCustom
+          label=""
+          placeholder="Masukkan Kategori"
+          value={data.name}
+          onChangeText={(text) => setData({ ...data, name: text })}
+        />
+        <StackCustom gap={"sm"}>
+          <TextCustom>Status</TextCustom>
+          <Switch
+            style={{
+              alignSelf: "flex-start",
+            }}
+            color={MainColor.yellow}
+            value={data.active}
+            onValueChange={(value) => setData({ ...data, active: value })}
+          />
+        </StackCustom>
       </ViewWrapper>
     </>
   );

app/(application)/admin/donation/category-update.tsx

@@ -1,21 +1,76 @@
 import {
+  AlertDefaultSystem,
   BoxButtonOnFooter,
   ButtonCustom,
+  StackCustom,
+  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { MainColor } from "@/constants/color-palet";
+import {
+  apiAdminMasterDonationCategoryById,
+  apiAdminMasterDonationCategoryUpdate,
+} from "@/service/api-admin/api-master-admin";
 import { useLocalSearchParams, useRouter } from "expo-router";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { Switch } from "react-native-paper";
 
 export default function AdminDonationCategoryUpdate() {
+  const router = useRouter();
   const { id } = useLocalSearchParams();
   const [value, setValue] = useState(id);
 
-  const router = useRouter();
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await apiAdminMasterDonationCategoryById({
+        id: id as any,
+      });
+      console.log(JSON.stringify(response.data, null, 2));
+
+      setData(response.data);
+    };
+    fetchData();
+  }, [id]);
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiAdminMasterDonationCategoryUpdate({
+        id: id as any,
+        data: data,
+      });
+      console.log(JSON.stringify(response.data, null, 2));
+      router.back();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+      <ButtonCustom
+        disabled={isLoading || data?.name === ""}
+        isLoading={isLoading}
+        onPress={() => {
+          AlertDefaultSystem({
+            title: "Update Data",
+            message: "Apakah anda yakin ingin mengupdate data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {},
+            onPressRight: () => handlerSubmit(),
+          });
+        }}
+      >
+        Update
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
   return (
@@ -25,10 +80,28 @@ export default function AdminDonationCategoryUpdate() {
         footerComponent={buttonSubmit}
       >
         <TextInputCustom
+          label="Nama Kategori"
           placeholder="Masukkan Kategori"
-          value={value as any}
-          onChangeText={setValue}
+          value={data?.name}
+          onChangeText={(value) => setData({ ...data, name: value })}
         />
+        <StackCustom
+          gap={"sm"}
+          style={{
+            alignContent: "flex-start",
+          }}
+        >
+          <TextCustom>Status</TextCustom>
+
+          <Switch
+            style={{
+              alignSelf: "flex-start",
+            }}
+            color={MainColor.yellow}
+            value={data?.active}
+            onValueChange={(value) => setData({ ...data, active: value })}
+          />
+        </StackCustom>
       </ViewWrapper>
     </>
   );

app/(application)/admin/donation/category.tsx

@@ -1,27 +1,65 @@
 import {
-    ActionIcon,
-    BaseBox,
-    CenterCustom,
-    Spacing,
-    StackCustom,
-    TextCustom,
-    ViewWrapper,
+  BadgeCustom,
+  CenterCustom,
+  ClickableCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
 } from "@/components";
-import { IconEdit } from "@/components/_Icon";
 import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { GridView_3_3_6 } from "@/components/_ShareComponent/GridView_3_3_6";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { View } from "react-native";
-import { Divider, Switch } from "react-native-paper";
-import { router } from "expo-router";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import { apiAdminMasterDonationCategory } from "@/service/api-admin/api-master-admin";
+import { colorActivationForBadge } from "@/utils/colorActivationForBadge";
+import { router, useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { RefreshControl, View } from "react-native";
+import { Divider } from "react-native-paper";
 
 export default function AdminDonationCategory() {
+  const [listData, setListData] = useState<any[]>([]);
+  const [refreshing, setRefreshing] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchMaster();
+    }, [])
+  );
+
+  const fetchMaster = async () => {
+    try {
+      setLoading(true);
+      const response = await apiAdminMasterDonationCategory();
+      if (response.success) {
+        console.log(JSON.stringify(response.data, null, 2));
+        setListData(response.data);
+      } else {
+        setListData([]);
+      }
+    } catch (error) {
+      console.log("[Error]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await fetchMaster();
+    setRefreshing(false);
+  };
+
   return (
     <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Donasi" />}>
+      <ViewWrapper
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        headerComponent={<AdminTitlePage title="Donasi" />}
+      >
         <AdminComp_BoxTitle
           title="Kategori"
           rightComponent={
@@ -33,81 +71,65 @@ export default function AdminDonationCategory() {
           }
         />
 
-        <BaseBox>
-          <GridView_3_3_6
-            component1={
-              <TextCustom bold align="center">
-                Aksi
-              </TextCustom>
-            }
-            component2={<TextCustom bold>Status</TextCustom>}
-            component3={<TextCustom bold>Kategori</TextCustom>}
+        <View>
+          <GridSpan_4_8
+            label={<TextCustom bold>Status</TextCustom>}
+            value={<TextCustom bold>Kategori</TextCustom>}
           />
+          {/* <Grid>
+            <Grid.Col style={{ paddingLeft: 10 }} span={4}>
+              <TextCustom bold>Status</TextCustom>
+            </Grid.Col>
+            <Grid.Col span={8}>
+              <TextCustom bold>Kategori</TextCustom>
+            </Grid.Col>
+          </Grid> */}
+
           <Divider />
           <Spacing />
 
           <StackCustom>
             {listData.map((item, index) => (
-              <View key={index}>
-                <GridView_3_3_6
-                  component1={
+              <ClickableCustom
+                onPress={() => {
+                  router.push(`/admin/donation/category-update?id=${item.id}`);
+                }}
+                key={index}
+              >
+                <GridSpan_4_8
+                  label={
                     <CenterCustom>
-                      <ActionIcon
-                        icon={
-                          <IconEdit size={ICON_SIZE_BUTTON} color="black" />
-                        }
-                        onPress={() => {
-                            router.push(`/admin/donation/category-update?id=${index}`);
-                        }}
-                      />
+                      <BadgeCustom
+                        color={colorActivationForBadge({
+                          status: item.active,
+                        })}
+                      >
+                        {item.active ? "Aktif" : "Tidak Aktif"}
+                      </BadgeCustom>
                     </CenterCustom>
                   }
-                  component2={
-                    <Switch
-                      value={true}
-                      onValueChange={(item) => {
-                        console.log(item);
-                      }}
-                      color={MainColor.yellow}
-                      
-                    />
-                  }
-                  component3={<TextCustom bold>{item.label}</TextCustom>}
+                  value={<TextCustom>{item.name}</TextCustom>}
                 />
-                <Spacing height={10} />
+                {/* <Grid containerStyle={{ paddingBottom: 10 }}>
+                  <Grid.Col span={4} style={{ paddingLeft: 10 }}>
+                    <CenterCustom>
+                      <BadgeCustom
+                        color={item.active ? MainColor.green : MainColor.red}
+                      >
+                        {item.active ? "Aktif" : "Tidak Aktif"}
+                      </BadgeCustom>
+                    </CenterCustom>
+                  </Grid.Col>
+                  <Grid.Col span={8}>
+                    <TextCustom bold>{item.name}</TextCustom>
+                  </Grid.Col>
+                </Grid> */}
                 <Divider />
-              </View>
+              </ClickableCustom>
             ))}
           </StackCustom>
-        </BaseBox>
+        </View>
       </ViewWrapper>
     </>
   );
 }
-
-const listData = [
-  {
-    label: "Kegiatan Sosial",
-    value: "kegiatan_sosial",
-  },
-  {
-    label: "Pendidikan",
-    value: "pendidikan",
-  },
-  {
-    label: "Kesehatan",
-    value: "kesehatan",
-  },
-  {
-    label: "Kebudayaan",
-    value: "kebudayaan",
-  },
-  {
-    label: "Bencana Alami",
-    value: "bencana_alami",
-  },
-  {
-    label: "Lainnya",
-    value: "lainnya",
-  },
-];

app/(application)/admin/event/[id]/[status]/index.tsx

@@ -1,22 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ActionIcon,
-    AlertDefaultSystem,
-    BadgeCustom,
-    BaseBox,
-    DrawerCustom,
-    LoaderCustom,
-    MenuDrawerDynamicGrid,
-    Spacing,
-    StackCustom,
-    TextCustom,
-    ViewWrapper,
+  ActionIcon,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { IconDot, IconList } from "@/components/_Icon/IconComponent";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import ReportBox from "@/components/Box/ReportBox";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
@@ -39,6 +39,11 @@ export default function AdminEventDetail() {
   const [data, setData] = React.useState<any | null>(null);
   const [loadData, setLoadData] = React.useState(false);
   const deepLinkURL = `${DEEP_LINK_URL}/event/${id}/confirmation?userId=${user?.id}`;
+  const deepLinkURLDEV = `${DEEP_LINK_URL}/--/event/${id}/confirmation?userId=${user?.id}`;
+
+  const isDevLink = process.env.NODE_ENV === "development" ? deepLinkURLDEV : deepLinkURL;
+
+
   useFocusEffect(
     useCallback(() => {
       onLoadData();
@@ -156,7 +161,7 @@ export default function AdminEventDetail() {
         <BaseBox>
           <StackCustom>
             {listData.map((item, i) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={i}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}
@@ -181,7 +186,7 @@ export default function AdminEventDetail() {
                 <LoaderCustom />
               ) : (
                 <QRCode
-                  value={deepLinkURL}
+                  value={isDevLink}
                   size={200}
                   // logo={require("@/assets/images/logo-hipmi.png")}
                   // logoSize={70}
@@ -191,7 +196,7 @@ export default function AdminEventDetail() {
                 />
               )}
 
-              <TextCustom align="center">{deepLinkURL}</TextCustom>
+              <TextCustom align="center">{isDevLink}</TextCustom>
             </StackCustom>
           </BaseBox>
         )}

app/(application)/admin/event/[id]/list-of-participants.tsx

@@ -10,14 +10,17 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { apiAdminEventListOfParticipants } from "@/service/api-admin/api-admin-event";
+import dayjs, { Dayjs } from "dayjs";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
+import { View } from "moti";
 import { useCallback, useState } from "react";
 
 export default function AdminEventListOfParticipants() {
   const { id } = useLocalSearchParams();
   const [listData, setListData] = useState<any[] | null>(null);
   const [loadData, setLoadData] = useState(false);
+  const [startDate, setStartDate] = useState<Dayjs | undefined>();
 
   useFocusEffect(
     useCallback(() => {
@@ -32,8 +35,11 @@ export default function AdminEventListOfParticipants() {
         id: id as string,
       });
 
+      console.log("[DATA]", JSON.stringify(response, null, 2));
+
       if (response.success) {
         setListData(response.data);
+        setStartDate(dayjs(response.data.Event.tanggal));
       }
     } catch (error) {
       console.log("[ERROR]", error);
@@ -42,7 +48,6 @@ export default function AdminEventListOfParticipants() {
     }
   };
 
-
   return (
     <>
       <ViewWrapper
@@ -60,17 +65,35 @@ export default function AdminEventListOfParticipants() {
               <Grid>
                 <Grid.Col span={6}>
                   <StackCustom gap={"sm"}>
-                    <TextCustom bold truncate>{item?.User?.username}</TextCustom>
+                    <TextCustom bold truncate>
+                      {item?.User?.username}
+                    </TextCustom>
                     <TextCustom>+{item?.User?.nomor}</TextCustom>
                   </StackCustom>
                 </Grid.Col>
                 <Grid.Col span={6} style={{ justifyContent: "center" }}>
-                  <BadgeCustom
-                    style={{ alignSelf: "flex-end" }}
-                    color={item?.isPresent ? "green" : "red"}
-                  >
-                    {item?.isPresent ? "Hadir" : "Tidak Hadir"}
-                  </BadgeCustom>
+                  {startDate &&
+                  startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
+                    <BadgeCustom
+                      style={{ alignSelf: "flex-end" }}
+                      color={item?.isPresent ? "green" : "red"}
+                    >
+                      {item?.isPresent ? "Hadir" : "Tidak Hadir"}
+                    </BadgeCustom>
+                  ) : (
+                    <View
+                      style={{
+                        justifyContent: "flex-end",
+                      }}
+                    >
+                      <BadgeCustom
+                        style={{ alignSelf: "flex-end" }}
+                        color="gray"
+                      >
+                        -
+                      </BadgeCustom>
+                    </View>
+                  )}
                 </Grid.Col>
               </Grid>
             </BaseBox>

app/(application)/admin/event/[status]/status.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
+  ClickableCustom,
   LoaderCustom,
   SearchInput,
   StackCustom,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
@@ -13,6 +14,7 @@ import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { apiAdminEvent } from "@/service/api-admin/api-admin-event";
+import { dateTimeView } from "@/utils/dateTimeView";
 import { Octicons } from "@expo/vector-icons";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
@@ -74,8 +76,8 @@ export default function AdminEventStatus() {
 
         <StackCustom gap={"sm"}>
           <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
+            title1="Username"
+            title2="Tanggal"
             title3="Judul Event"
           />
           <Divider />
@@ -83,36 +85,47 @@ export default function AdminEventStatus() {
           {loadData ? (
             <LoaderCustom />
           ) : _.isEmpty(listData) ? (
-            <TextCustom align="center" size="small" color="gray">Belum ada data</TextCustom>
+            <TextCustom align="center" size="small" color="gray">
+              Belum ada data
+            </TextCustom>
           ) : (
             listData?.map((item, index) => (
-              <AdminTableValue
+              <ClickableCustom
                 key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/event/${item.id}/${status}`);
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.Author?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom align="center" truncate={2}>
-                    {item?.title || "-"}
-                  </TextCustom>
-                }
-              />
+                onPress={() => {
+                  router.push(`/admin/event/${item.id}/${status}`);
+                }}
+              >
+                <AdminTableValue
+                  key={index}
+                  value1={
+                    <TextCustom truncate={1}>
+                      {item?.Author?.username || "-"}
+                    </TextCustom>
+                    // <ActionIcon
+                    //   icon={
+                    //     <Octicons
+                    //       name="eye"
+                    //       size={ICON_SIZE_BUTTON}
+                    //       color="black"
+                    //     />
+                    //   }
+                    //   onPress={() => {
+                    //     router.push(`/admin/event/${item.id}/${status}`);
+                    //   }}
+                    // />
+                  }
+                  value2={
+                    <TextCustom truncate={1}>
+                      {dateTimeView({ date: item?.tanggal })}
+                    </TextCustom>
+                  }
+                  value3={
+                    <TextCustom truncate={2}>{item?.title || "-"}</TextCustom>
+                  }
+                />
+                <Divider/>
+              </ClickableCustom>
             ))
           )}
         </StackCustom>

app/(application)/admin/forum/[id]/index.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { IconDot } from "@/components/_Icon/IconComponent";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
 import { apiAdminForumPostingById } from "@/service/api-admin/api-admin-forum";
@@ -103,7 +103,7 @@ export default function AdminForumDetailPosting() {
         <BaseBox>
           <StackCustom gap={"sm"}>
             {listDataAction.map((item, i) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={i}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}

app/(application)/admin/forum/[id]/list-report-comment.tsx

@@ -3,6 +3,7 @@ import {
   ActionIcon,
   AlertDefaultSystem,
   BaseBox,
+  CenterCustom,
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
@@ -16,7 +17,8 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import {
@@ -27,6 +29,7 @@ import {
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { Divider } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
@@ -95,24 +98,24 @@ export default function AdminForumReportComment() {
       >
         <BaseBox>
           <StackCustom gap={"sm"}>
-            <GridDetail_4_8
-              label={<TextCustom bold>Username</TextCustom>}
-              value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
+            <GridSpan_NewComponent
+              text1={<TextCustom bold>Username</TextCustom>}
+              text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
             />
-            <GridDetail_4_8
-              label={<TextCustom bold>Komentar</TextCustom>}
-              value={<TextCustom>{data?.komentar || "-"}</TextCustom>}
+            <GridSpan_NewComponent
+              text1={<TextCustom bold>Komentar</TextCustom>}
+              text2={<TextCustom>{data?.komentar || "-"}</TextCustom>}
             />
           </StackCustom>
         </BaseBox>
 
         <AdminComp_BoxTitle title="Daftar Report Komentar" />
 
-        <StackCustom>
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Pelapor"
-            title3="Kategori Report"
+        <StackCustom  gap={"sm"}>
+          <GridSpan_NewComponent
+            text1={<TextCustom bold align="center">Aksi</TextCustom>}
+            text2={<TextCustom bold>Pelapor</TextCustom>}
+            text3={<TextCustom bold>Kategori Report</TextCustom>}
           />
           <Divider />
           {loadList ? (
@@ -123,34 +126,39 @@ export default function AdminForumReportComment() {
             </TextCustom>
           ) : (
             listReport?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                    onPress={() => {
-                      setOpenDrawerAction(true);
-                      setSelectedReport({
-                        id: item.id,
-                        username: item.User?.username,
-                        kategori: item.ForumMaster_KategoriReport?.title,
-                        keterangan: item.ForumMaster_KategoriReport?.deskripsi,
-                        deskripsi: item.deskripsi,
-                      });
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.User?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2} align="center">
-                    {item?.ForumMaster_KategoriReport?.title || "-"}
-                  </TextCustom>
-                }
-              />
+              <View key={index}>
+                <GridSpan_NewComponent
+                  text1={
+                   <CenterCustom>
+                     <ActionIcon
+                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
+                      onPress={() => {
+                        setOpenDrawerAction(true);
+                        setSelectedReport({
+                          id: item.id,
+                          username: item.User?.username,
+                          kategori: item.ForumMaster_KategoriReport?.title,
+                          keterangan:
+                            item.ForumMaster_KategoriReport?.deskripsi,
+                          deskripsi: item.deskripsi,
+                        });
+                      }}
+                    />
+                   </CenterCustom>
+                  }
+                  text2={
+                    <TextCustom truncate={1}>
+                      {item?.User?.username || "-"}
+                    </TextCustom>
+                  }
+                  text3={
+                    <TextCustom truncate={2}>
+                      {item?.ForumMaster_KategoriReport?.title || "-"}
+                    </TextCustom>
+                  }
+                />
+                <Divider />
+              </View>
             ))
           )}
         </StackCustom>
@@ -208,20 +216,20 @@ export default function AdminForumReportComment() {
         height={"auto"}
       >
         <StackCustom>
-          <GridDetail_4_8
+          <GridSpan_4_8
             label={<TextCustom bold>Pelapor</TextCustom>}
             value={<TextCustom>{selectedReport?.username || "-"}</TextCustom>}
           />
 
           {selectedReport?.kategori && (
             <>
-              <GridDetail_4_8
+              <GridSpan_4_8
                 label={<TextCustom bold>Kategori Report</TextCustom>}
                 value={
                   <TextCustom>{selectedReport?.kategori || "-"}</TextCustom>
                 }
               />
-              <GridDetail_4_8
+              <GridSpan_4_8
                 label={<TextCustom bold>Keterangan</TextCustom>}
                 value={
                   <TextCustom>{selectedReport?.keterangan || "-"}</TextCustom>
@@ -231,7 +239,7 @@ export default function AdminForumReportComment() {
           )}
 
           {selectedReport?.deskripsi && (
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>Deskripsi</TextCustom>}
               value={
                 <TextCustom>{selectedReport?.deskripsi || "-"}</TextCustom>

app/(application)/admin/forum/[id]/list-report-posting.tsx

@@ -4,6 +4,7 @@ import {
   AlertDefaultSystem,
   BadgeCustom,
   BaseBox,
+  CenterCustom,
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
@@ -17,7 +18,8 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import {
@@ -28,6 +30,7 @@ import {
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { Divider } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
@@ -95,14 +98,14 @@ export default function AdminForumReportPosting() {
       >
         <BaseBox>
           <StackCustom gap={"sm"}>
-            <GridDetail_4_8
-              label={<TextCustom bold>Username</TextCustom>}
-              value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
+            <GridSpan_NewComponent
+              text1={<TextCustom bold>Username</TextCustom>}
+              text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
             />
 
-            <GridDetail_4_8
-              label={<TextCustom bold>Status</TextCustom>}
-              value={
+            <GridSpan_NewComponent
+              text1={<TextCustom bold>Status</TextCustom>}
+              text2={
                 data && data?.ForumMaster_StatusPosting?.status ? (
                   <BadgeCustom
                     color={
@@ -121,19 +124,23 @@ export default function AdminForumReportPosting() {
               }
             />
 
-            <GridDetail_4_8
-              label={<TextCustom bold>Postingan</TextCustom>}
-              value={<TextCustom>{data?.diskusi || "-"}</TextCustom>}
+            <GridSpan_NewComponent
+              text1={<TextCustom bold>Postingan</TextCustom>}
+              text2={<TextCustom>{data?.diskusi || "-"}</TextCustom>}
             />
           </StackCustom>
         </BaseBox>
 
         <AdminComp_BoxTitle title="Daftar Report Posting" />
         <StackCustom gap={"sm"}>
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Pelapor"
-            title3="Kategori Report"
+          <GridSpan_NewComponent
+            text1={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            text2={<TextCustom bold>Pelapor</TextCustom>}
+            text3={<TextCustom bold>Kategori Report</TextCustom>}
           />
           <Divider />
           {loadListReport ? (
@@ -144,34 +151,41 @@ export default function AdminForumReportPosting() {
             </TextCustom>
           ) : (
             listReport?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                    onPress={() => {
-                      setOpenDrawerAction(true);
-                      setSelectedReport({
-                        id: item?.id,
-                        username: item?.User?.username,
-                        kategori: item?.ForumMaster_KategoriReport?.title,
-                        keterangan: item?.ForumMaster_KategoriReport?.deskripsi,
-                        deskripsi: item?.deskripsi,
-                      });
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.User?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2} align="center">
-                    {item?.ForumMaster_KategoriReport?.title || "-"}
-                  </TextCustom>
-                }
-              />
+              <View key={index}>
+                <GridSpan_NewComponent
+                  text1={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconView size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                          setOpenDrawerAction(true);
+                          setSelectedReport({
+                            id: item?.id,
+                            username: item?.User?.username,
+                            kategori: item?.ForumMaster_KategoriReport?.title,
+                            keterangan:
+                              item?.ForumMaster_KategoriReport?.deskripsi,
+                            deskripsi: item?.deskripsi,
+                          });
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  text2={
+                    <TextCustom truncate>
+                      {item?.User?.username || "-"}
+                    </TextCustom>
+                  }
+                  text3={
+                    <TextCustom truncate={2}>
+                      {item?.ForumMaster_KategoriReport?.title || "-"}
+                    </TextCustom>
+                  }
+                />
+                <Divider />
+              </View>
             ))
           )}
         </StackCustom>
@@ -229,20 +243,20 @@ export default function AdminForumReportPosting() {
         height={"auto"}
       >
         <StackCustom>
-          <GridDetail_4_8
+          <GridSpan_4_8
             label={<TextCustom bold>Pelapor</TextCustom>}
             value={<TextCustom>{selectedReport?.username || "-"}</TextCustom>}
           />
 
           {selectedReport?.kategori && (
             <>
-              <GridDetail_4_8
+              <GridSpan_4_8
                 label={<TextCustom bold>Kategori Report</TextCustom>}
                 value={
                   <TextCustom>{selectedReport?.kategori || "-"}</TextCustom>
                 }
               />
-              <GridDetail_4_8
+              <GridSpan_4_8
                 label={<TextCustom bold>Keterangan</TextCustom>}
                 value={
                   <TextCustom>{selectedReport?.keterangan || "-"}</TextCustom>
@@ -252,7 +266,7 @@ export default function AdminForumReportPosting() {
           )}
 
           {selectedReport?.deskripsi && (
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>Deskripsi</TextCustom>}
               value={
                 <TextCustom>{selectedReport?.deskripsi || "-"}</TextCustom>

app/(application)/admin/forum/posting.tsx

@@ -1,22 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  ActionIcon,
+  ClickableCustom,
   LoaderCustom,
   SearchInput,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { IconView } from "@/components/_Icon/IconComponent";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { Divider } from "react-native-paper";
 
 export default function AdminForumPosting() {
@@ -37,7 +37,9 @@ export default function AdminForumPosting() {
         category: "posting",
         search: search,
       });
-      
+
+      console.log("DATA", JSON.stringify(response, null, 2));
+
       if (response.success) {
         setList(response.data);
       }
@@ -51,7 +53,7 @@ export default function AdminForumPosting() {
   const rightComponent = (
     <SearchInput
       containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari"
+      placeholder="Cari postingan"
       value={search}
       onChangeText={setSearch}
     />
@@ -61,9 +63,15 @@ export default function AdminForumPosting() {
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
         <AdminComp_BoxTitle title={"Posting"} rightComponent={rightComponent} />
+        <GridSpan_NewComponent
+          text1={<TextCustom bold truncate>Username</TextCustom>}
+          text2={<TextCustom bold truncate> Postingan</TextCustom>}
+          text3={<TextCustom bold align="center" truncate> Report Posting</TextCustom>}
+          text4={<TextCustom bold align="center" truncate> Komentar</TextCustom>}
+        />
+        <Divider />
+        <Spacing />
         <StackCustom>
-          <AdminTitleTable title1="Aksi" title2="Username" title3="Postingan" />
-          <Divider />
           {loadList ? (
             <LoaderCustom />
           ) : _.isEmpty(list) ? (
@@ -72,25 +80,38 @@ export default function AdminForumPosting() {
             </TextCustom>
           ) : (
             list?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                    onPress={() => {
-                      router.push(`/admin/forum/${item?.id}`);
-                    }}
+              <View key={index}>
+                <ClickableCustom
+                  onPress={() => {
+                    router.push(`/admin/forum/${item.id}`);
+                  }}
+                >
+                  <GridSpan_NewComponent
+                    text1={
+                      <TextCustom truncate={1}>
+                        {item?.Author?.username || "-"}
+                      </TextCustom>
+                    }
+                    text2={
+                      <TextCustom truncate>
+                        {item?.diskusi || "-"}
+                      </TextCustom>
+                    }
+                    text3={
+                      <TextCustom align="center" truncate={2}>
+                        {item?.reportPosting || "-"}
+                      </TextCustom>
+                    } 
+                    text4={
+                      <TextCustom align="center" truncate={2}>
+                        {item?.komentar || "-"}
+                      </TextCustom>
+                    }
                   />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.Author?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2}>{item?.diskusi || "-"}</TextCustom>
-                }
-              />
+
+                </ClickableCustom>
+                <Divider />
+              </View>
             ))
           )}
         </StackCustom>

app/(application)/admin/forum/report-comment.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
+  ClickableCustom,
   LoaderCustom,
   SearchInput,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
@@ -12,12 +14,14 @@ import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage"
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { Divider } from "react-native-paper";
 
 export default function AdminForumReportComment() {
@@ -67,13 +71,26 @@ export default function AdminForumReportComment() {
           rightComponent={rightComponent}
         />
 
-        <StackCustom gap={"sm"}>
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Pelapor"
-            title3="Jenis Laporan"
-          />
-          <Divider />
+        <GridSpan_NewComponent
+          text1={
+            <TextCustom bold truncate>
+              Pelapor
+            </TextCustom>
+          }
+          text2={
+            <TextCustom bold truncate>
+              Komentar
+            </TextCustom>
+          }
+          text3={
+            <TextCustom bold truncate>
+              Jenis Laporan
+            </TextCustom>
+          }
+        />
+        <Divider />
+        <Spacing />
+        <StackCustom gap={"lg"}>
           {loadList ? (
             <LoaderCustom />
           ) : _.isEmpty(listData) ? (
@@ -82,34 +99,35 @@ export default function AdminForumReportComment() {
             </TextCustom>
           ) : (
             listData?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <IconView
-                        size={ICON_SIZE_BUTTON}
-                        color={MainColor.black}
-                      />
+              <View key={index}>
+                <ClickableCustom
+                  onPress={() => {
+                    router.push(
+                      `/admin/forum/${item?.Forum_Komentar?.id}/list-report-comment`
+                    );
+                  }}
+                >
+                  <GridSpan_NewComponent
+                    text1={
+                      <TextCustom truncate={1}>
+                        {item?.User?.username || "-"}
+                      </TextCustom>
+                    }
+                    text2={
+                      <TextCustom truncate={2}>
+                        {item?.Forum_Komentar?.komentar || "-"}
+                      </TextCustom>
+                    }
+                    text3={
+                      <TextCustom truncate={2}>
+                        {item?.ForumMaster_KategoriReport?.title || "-"}
+                      </TextCustom>
                     }
-                    onPress={() => {
-                      router.push(
-                        `/admin/forum/${item?.Forum_Komentar?.id}/list-report-comment`
-                      );
-                    }}
                   />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.User?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2} align="center">
-                    {item?.ForumMaster_KategoriReport?.title || "-"}
-                  </TextCustom>
-                }
-              />
+                </ClickableCustom>
+                <Spacing />
+                <Divider />
+              </View>
             ))
           )}
         </StackCustom>

app/(application)/admin/forum/report-posting.tsx

@@ -1,24 +1,27 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
+  ClickableCustom,
   Divider,
   LoaderCustom,
   SearchInput,
   StackCustom,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { IconView } from "@/components/_Icon/IconComponent";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function AdminForumReportPosting() {
   const [listData, setListData] = useState<any[] | null>(null);
@@ -67,46 +70,51 @@ export default function AdminForumReportPosting() {
           rightComponent={rightComponent}
         />
 
-        <StackCustom gap={"sm"}>
-          <AdminTitleTable title1="Aksi" title2="Pelapor" title3="Postingan" />
-
-          <Divider />
+        <GridSpan_NewComponent
+          text1={
+            <TextCustom bold truncate>
+              Username
+            </TextCustom>
+          }
+          text2={
+            <TextCustom bold truncate>
+              Postingan
+            </TextCustom>
+          }
+        />
+        <Divider />
+        <StackCustom>
           {loadList ? (
             <LoaderCustom />
           ) : _.isEmpty(listData) ? (
-            <TextCustom  align="center" color="gray">
+            <TextCustom align="center" color="gray">
               Belum ada data
             </TextCustom>
           ) : (
             listData?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <IconView
-                        size={ICON_SIZE_BUTTON}
-                        color={MainColor.black}
-                      />
+              <View key={index}>
+                <ClickableCustom
+                  onPress={() => {
+                    router.push(
+                      `/admin/forum/${item?.Forum_Posting?.id}/list-report-posting`
+                    );
+                  }}
+                >
+                  <GridSpan_NewComponent
+                    text1={
+                      <TextCustom truncate={1}>
+                        {item?.User?.username || "-"}
+                      </TextCustom>
+                    }
+                    text2={
+                      <TextCustom truncate={1}>
+                        {item?.Forum_Posting?.diskusi || "-"}
+                      </TextCustom>
                     }
-                    onPress={() => {
-                      router.push(
-                        `/admin/forum/${item?.Forum_Posting?.id}/list-report-posting`
-                      );
-                    }}
                   />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.User?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2} align="center">
-                    {item?.Forum_Posting?.diskusi || "-"}
-                  </TextCustom>
-                }
-              />
+                </ClickableCustom>
+                <Divider />
+              </View>
             ))
           )}
         </StackCustom>

app/(application)/admin/investment/[id]/[status]/index.tsx

@@ -19,7 +19,7 @@ import { IconDot, IconList } from "@/components/_Icon/IconComponent";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -183,7 +183,7 @@ export default function AdminInvestmentDetail() {
             />
             <Spacing />
             <StackCustom gap={"xs"}>
-              <GridDetail_4_8
+              <GridSpan_4_8
                 label={<TextCustom bold>Sisa Saham</TextCustom>}
                 value={
                   <TextCustom>
@@ -191,7 +191,7 @@ export default function AdminInvestmentDetail() {
                   </TextCustom>
                 }
               />
-              <GridDetail_4_8
+              <GridSpan_4_8
                 label={<TextCustom bold>Validasi Transaksi</TextCustom>}
                 value={
                   <TextCustom>
@@ -207,7 +207,7 @@ export default function AdminInvestmentDetail() {
           <StackCustom>
             <DummyLandscapeImage imageId={data?.imageId} />
             {listData.map((item, i) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={i}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}
@@ -218,7 +218,7 @@ export default function AdminInvestmentDetail() {
 
         <BaseBox>
           <StackCustom>
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>File Prospektus</TextCustom>}
               value={
                 <ButtonCustom
@@ -238,7 +238,7 @@ export default function AdminInvestmentDetail() {
                 </ButtonCustom>
               }
             />
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>File Dokumen</TextCustom>}
               value={
                 <StackCustom>

app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx

@@ -10,7 +10,7 @@ import {
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import { MainColor } from "@/constants/color-palet";
 import {
@@ -225,7 +225,7 @@ export default function AdminInvestmentTransactionDetail() {
         <BaseBox>
           <StackCustom>
             {listData.map((item, index) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={index}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}

app/(application)/admin/voting/[id]/[status]/index.tsx

@@ -1,19 +1,19 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-    AlertDefaultSystem,
-    BadgeCustom,
-    BaseBox,
-    CircleContainer,
-    Grid,
-    Spacing,
-    StackCustom,
-    TextCustom,
-    ViewWrapper,
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  CircleContainer,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
 import funUpdateStatusVoting from "@/screens/Admin/Voting/funUpdateStatus";
@@ -169,7 +169,7 @@ export default function AdminVotingDetail() {
         <BaseBox>
           <StackCustom>
             {listData.map((item, i) => (
-              <GridDetail_4_8
+              <GridSpan_4_8
                 key={i}
                 label={<TextCustom bold>{item.label}</TextCustom>}
                 value={<TextCustom>{item.value}</TextCustom>}

app/(application)/admin/voting/[status]/status.tsx

@@ -103,7 +103,7 @@ export default function AdminVotingStatus() {
                   </TextCustom>
                 }
                 value3={
-                  <TextCustom align="center" truncate={2}>
+                  <TextCustom truncate={2}>
                     {item?.title || "-"}
                   </TextCustom>
                 }

app/(application)/admin/voting/history.tsx

@@ -91,7 +91,7 @@ export default function AdminVotingHistory() {
               }
               value2={<TextCustom truncate={1}>{item?.Author?.username || "-"}</TextCustom>}
               value3={
-                <TextCustom align="center" truncate={2}>
+                <TextCustom truncate={2}>
                   {item?.title || "-"}
                 </TextCustom>
               }

app/(application)/terms-agreement.tsx

@@ -74,7 +74,7 @@ export default function TermsAgreement() {
     <>
       <Stack.Screen
         options={{
-          title: "Terms Agreement",
+          title: "Terms & Conditions",
         }}
       />
       <ViewWrapper footerComponent={footerComponent}>
@@ -87,6 +87,7 @@ export default function TermsAgreement() {
               alignItems: "center",
               marginTop: 16,
               marginBottom: 16,
+              paddingInline: 10,
             }}
           >
             <CheckboxCustom value={term} onChange={() => setTerm(!term)} />

components/Alert/AlertWarning.ts

@@ -0,0 +1,16 @@
+import { Alert } from "react-native";
+
+export default function AlertWarning({
+  title = "Peringatan Bagi Pengguna !",
+  description = "Konten yang Anda masukkan mengandung kata-kata yang tidak sesuai dengan pedoman komunitas kami. Mohon gunakan bahasa yang sopan dan menghargai sesama pengguna. Jika kata tersebut sebenarnya lumrah, mohon maaf—kemungkinan sistem kami belum mengenalnya sebagai wajar.",
+}: {
+  title?: string 
+  description?: string;
+}) {
+  return Alert.alert(title, description, [
+    {
+      text: "Tutup",
+      onPress: () => {},
+    },
+  ]);
+}

components/Button/FloatingButton.tsx

@@ -32,9 +32,10 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({
 const styles = StyleSheet.create({
   fab: {
     position: "absolute",
-    margin: 16,
+    margin: "auto",
     right: 0,
-    bottom: 0,
+    // bottom: 10,
+    top: -20,
     backgroundColor: AccentColor.softblue, // Warna Twitter biru
     borderRadius: 50,
     borderColor: AccentColor.blue,

components/DateInput/DateTimeIOS.tsx

@@ -7,7 +7,7 @@ import DateTimePicker, {
 } from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
 import React, { useState } from "react";
-import { StyleProp, Text, View, ViewStyle } from "react-native";
+import { Button, StyleProp, Text, View, ViewStyle } from "react-native";
 import ClickableCustom from "../Clickable/ClickableCustom";
 import TextCustom from "../Text/TextCustom";
 
@@ -129,24 +129,64 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
               borderWidth: 1,
             }}
           >
-            <View style={{ alignItems: "flex-end" }}>
+            {/* <View style={{ alignItems: "flex-start" }}>
               <Ionicons
                 name="close"
                 size={20}
                 color="black"
-                onPress={() => setShow(false)}
+                onPress={() => {
+                  setShow(false);
+                  setSelectedDate(undefined);
+                }}
               />
-            </View>
+            </View> */}
 
             <DateTimePicker
               value={selectedDate || new Date()}
               mode={"datetime"}
-              display="inline"
+              display="spinner"
               onChange={handleConfirm}
               minimumDate={minimumDate}
               maximumDate={maximumDate}
               themeVariant="light"
             />
+            <View style={{ flexDirection: "row", gap: 10 }}>
+              <ClickableCustom
+                onPress={() => {
+                  setShow(false)
+                  setSelectedDate(undefined)
+                }}
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: 12,
+                  borderRadius: 10,
+                  backgroundColor: MainColor.placeholder,
+                  marginTop: 10,
+                  width: "48%",
+                }}
+              >
+                <TextCustom color="black">Batal</TextCustom>
+              </ClickableCustom>
+
+              <ClickableCustom
+                onPress={() => {
+                  setShow(false)
+                  onChange(selectedDate as any)
+                }}
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: 12,
+                  borderRadius: 10,
+                  backgroundColor: MainColor.darkblue,
+                  marginTop: 10,
+                  width: "48%",
+                }}
+              >
+                <TextCustom>OK</TextCustom>
+              </ClickableCustom>
+            </View>
           </View>
         </>
       )}

components/Select/SelectCustom.tsx

@@ -87,7 +87,7 @@ const SelectCustom: React.FC<SelectProps> = ({
               borderRadius,
               flexDirection: "row",
               alignItems: "center",
-              paddingHorizontal: 10,
+              // paddingHorizontal: 0,
               height: 50,
             },
 

components/TextArea/TextAreaCustom.tsx

@@ -1,3 +1,4 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
 import React, { useEffect, useState } from "react";
 import {
@@ -6,7 +7,9 @@ import {
   Text,
   View,
   ViewStyle,
+  useColorScheme,
 } from "react-native";
+import { PlaceholderColor } from "@/constants/color-palet";
 
 type IconType = React.ReactNode | string;
 
@@ -48,7 +51,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
   minRows = 4,
   maxRows = 6,
   showCount = false,
-  maxLength,
+  maxLength = 1000,
   value,
   onChangeText,
   height = 100,
@@ -78,6 +81,9 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
     );
   };
 
+  const colorScheme = useColorScheme();
+  const theme = PlaceholderColor[colorScheme || "light"];
+
   return (
     <View style={[GStyles.inputContainerArea]}>
       {label && (
@@ -109,6 +115,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
             GStyles.textAreaInput,
             { color: fontColor },
           ]}
+          placeholderTextColor={theme.placeholder}
           editable={!disabled}
           value={value as string}
           onChangeText={onChangeText}

components/TextInput/TextInputCustom.tsx

@@ -1,3 +1,4 @@
+import { PlaceholderColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import React, { useState } from "react";
@@ -8,8 +9,10 @@ import {
   TouchableOpacity,
   View,
   ViewStyle,
+  useColorScheme
 } from "react-native";
 
+
 type IconType = React.ReactNode | string;
 
 type Props = {
@@ -74,6 +77,9 @@ const TextInputCustom = ({
     }
   };
 
+  const colorScheme = useColorScheme();
+  const theme = PlaceholderColor[colorScheme || "light"];
+
   return (
     <View style={[GStyles.inputContainerArea, containerStyle]}>
       {label && (
@@ -100,12 +106,14 @@ const TextInputCustom = ({
             { color: fontColor },
             disabled && GStyles.inputPlaceholderDisabled, // <-- placeholder saat disabled
           ]}
+          placeholderTextColor={theme.placeholder}
           editable={!disabled}
           secureTextEntry={secureTextEntry && !isPasswordVisible}
           keyboardType={keyboardType}
           onChangeText={handleTextChange}
           maxLength={maxLength}
           {...rest}
+          
         />
         {secureTextEntry && (
           <TouchableOpacity

components/_ShareComponent/Admin/ButtonReject.tsx

@@ -15,7 +15,7 @@ export default function AdminButtonReject({
     <>
       <ButtonCustom
         iconLeft={<IconReject size={16} />}
-        backgroundColor={MainColor.red}
+        backgroundColor={MainColor.orange}
         textColor="white"
         onPress={onReject}
         isLoading={isLoading}

components/_ShareComponent/Admin/TableValue.tsx

@@ -1,17 +1,23 @@
 import Grid from "@/components/Grid/GridCustom";
 import React from "react";
-import { View } from "react-native";
+import { StyleProp, View, ViewStyle } from "react-native";
 import { Divider } from "react-native-paper";
 
 export default function AdminTableValue({
   value1,
   value2,
   value3,
+  style1,
+  style2,
+  style3,
   bottomLine = false,
 }: {
   value1: React.ReactNode;
   value2: React.ReactNode;
   value3: React.ReactNode;
+  style1?: ViewStyle;
+  style2?: ViewStyle;
+  style3?: ViewStyle;
   bottomLine?: boolean;
 }) {
   return (
@@ -25,6 +31,7 @@ export default function AdminTableValue({
               justifyContent: "center",
               paddingLeft: 10,
               paddingRight: 10,
+              ...style1,
             }}
           >
             {value1}
@@ -36,6 +43,7 @@ export default function AdminTableValue({
               justifyContent: "center",
               paddingLeft: 10,
               paddingRight: 10,
+              ...style2,
             }}
           >
             {value2}
@@ -44,9 +52,10 @@ export default function AdminTableValue({
             span={6}
             style={{
               justifyContent: "center",
-              alignItems: "center",
+              alignItems: "flex-start",
               paddingLeft: 10,
               paddingRight: 10,
+              ...style3,
             }}
           >
             {value3}

components/_ShareComponent/GridDetail_4_8.tsx

@@ -1,20 +0,0 @@
-import { Grid } from "@/components";
-
-export const GridDetail_4_8 = ({
-    label,
-    value,
-}: {
-    label: React.ReactNode;
-    value: React.ReactNode;
-}) => {
-    return (
-        <Grid>
-            <Grid.Col span={4} style={{ justifyContent: "center", paddingRight: 10 }}>
-                {label}
-            </Grid.Col>
-            <Grid.Col span={8} style={{ justifyContent: "center" }}>
-                {value}
-            </Grid.Col>
-        </Grid>
-    );
-};

components/_ShareComponent/GridSpan_4_8.tsx

@@ -0,0 +1,27 @@
+import { Grid } from "@/components";
+
+export const GridSpan_4_8 = ({
+  label: text1,
+  value: text2,
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}) => {
+  return (
+    <Grid>
+      <Grid.Col
+        span={4}
+        style={{
+          justifyContent: "flex-start",
+          paddingRight: 8,
+          paddingLeft: 8,
+        }}
+      >
+        {text1}
+      </Grid.Col>
+      <Grid.Col span={8} style={{ justifyContent: "center", paddingRight: 8 }}>
+        {text2}
+      </Grid.Col>
+    </Grid>
+  );
+};

components/_ShareComponent/GridSpan_NewComponent.tsx

@@ -0,0 +1,54 @@
+import { Grid } from "@/components";
+
+export const GridSpan_NewComponent = ({
+  text1,
+  text2,
+  text3,
+  text4,
+  span1,
+  span2,
+}: {
+  text1: React.ReactNode;
+  text2: React.ReactNode;
+  text3?: React.ReactNode;
+  text4?: React.ReactNode;
+  span1?: number;
+  span2?: number;
+}) => {
+  return (
+    <Grid>
+      <Grid.Col
+        span={span1 ? span1 : text4 ? 3 : 4}
+        style={{
+          justifyContent: "flex-start",
+          paddingRight: 5,
+          paddingLeft: 5,
+        }}
+      >
+        {text1}
+      </Grid.Col>
+      <Grid.Col
+        span={span2 ? span2 : text4 ? 3 : text3 ? 4 : 8}
+        style={{ justifyContent: "flex-start", paddingRight: 5 }}
+      >
+        {text2}
+      </Grid.Col>
+      {text3 && (
+        <Grid.Col
+          span={text4 ? 3 : 4}
+          style={{ justifyContent: "flex-start", paddingRight: 5 }}
+        >
+          {text3}
+        </Grid.Col>
+      )}
+      {text4 && (
+        <Grid.Col
+          span={3}
+          style={{ justifyContent: "flex-start", paddingRight: 5 }}
+        >
+          {text4}
+        </Grid.Col>
+      )}
+    </Grid>
+  );
+};

constants/color-palet.ts

@@ -45,3 +45,23 @@ export const AdminColor = {
 // Warna Asli: #002e59
 // Warna Lebih Gelap: #001f3b
 // Warna Tergelap: #001323
+
+
+export const PlaceholderColor = {
+  light: {
+    text: "#000",
+    placeholder: "#666",
+    border: "#ccc",
+    background: "#fff",
+    error: "#d00",
+    icon: "#555",
+  },
+  dark: {
+    text: "#fff",
+    placeholder: "#aaa",
+    border: "#444",
+    background: "#1a1a1a",
+    error: "#ff4d4d",
+    icon: "#ccc",
+  },
+};

context/AuthContext.tsx

@@ -72,8 +72,31 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const loginWithNomor = async (nomor: string) => {
     setIsLoading(true);
     try {
+      console.log("[Masuk provider]", nomor);
       const response = await apiLogin({ nomor: nomor });
-      await AsyncStorage.setItem("kode_otp", response.kodeId);
+      console.log("[RESPONSE AUTH]", JSON.stringify(response));
+
+
+      if (response.success) {
+        console.log("[Keluar provider]", nomor);
+        Toast.show({
+          type: "success",
+          text1: "Sukses",
+          text2: "Kode OTP berhasil dikirim",
+        });
+
+        await AsyncStorage.setItem("kode_otp", response.kodeId);
+        router.push(`/verification?nomor=${nomor}`);
+        return;
+      } else {
+        router.push(`/register?nomor=${nomor}`);
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: "Silahkan mendaftar",
+        });
+        return;
+      }
     } catch (error: any) {
       throw new Error(error.response?.data?.message || "Gagal kirim OTP");
     } finally {
@@ -81,13 +104,26 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     }
   };
 
+  // const loginWithNomor = async (nomor: string) => {
+  //   setIsLoading(true);
+  //   try {
+  //     const response = await apiLogin({ nomor: nomor });
+  //     await AsyncStorage.setItem("kode_otp", response.kodeId);
+  //   } catch (error: any) {
+  //     throw new Error(error.response?.data?.message || "Gagal kirim OTP");
+  //   } finally {
+  //     setIsLoading(false);
+  //   }
+  // };
+
   // --- 2. Validasi OTP & cek user ---
   const validateOtp = async (nomor: string) => {
     try {
       setIsLoading(true);
       const response = await apiValidationCode({ nomor: nomor });
-
       const { token } = response;
+      console.log("[RESPONSE VALIDASI OTP]", JSON.stringify(response, null, 2));
+
       if (response.success) {
         setToken(token);
         await AsyncStorage.setItem("authToken", token);
@@ -104,20 +140,23 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 
         if (response.active) {
           if (response.roleId === "1") {
-            return "/(application)/(user)/home";
+            router.replace("/(application)/(user)/home");
+            return;
           } else {
-            return "/(application)/admin/dashboard";
+            router.replace("/(application)/admin/dashboard");
+            return;
           }
         } else {
-          return "/(application)/(user)/waiting-room";
+          router.replace("/(application)/(user)/waiting-room");
+          return;
         }
       } else {
         Toast.show({
           type: "info",
-          text1: "Anda belum terdaftar",
-          text2: "Silahkan daftar terlebih dahulu",
+          text1: "Terjadi kesalahan",
+          text2: "Silahkan coba lagi",
         });
-        return `/register?nomor=${nomor}`;
+        return;
       }
     } catch (error: any) {
       console.log("Error validasi otp >>", (error as Error).message || error);
@@ -132,6 +171,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   // --- 3. Ambil data user ---
   const userData = async (token: string) => {
     try {
+      if (!token) {
+        throw new Error("Token tidak ditemukan");
+      }
+
       setIsLoading(true);
       const response = await apiConfig.get(`/mobile?token=${token}`, {
         headers: {
@@ -145,7 +188,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
       return dataUser;
     } catch (error: any) {
-      console.log("[LOAD USER DATA]",error.response?.data?.message + "user" || "Gagal mengambil data user");
+      console.log(
+        "[LOAD USER DATA]",
+        error.response?.data?.message + "user" || "Gagal mengambil data user"
+      );
     } finally {
       setIsLoading(false);
     }
@@ -160,9 +206,8 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     setIsLoading(true);
     try {
       const response = await apiRegister({ data: userData });
-      console.log("response", response);
+      console.log("[REGISTER FETCH]", JSON.stringify(response, null, 2));
 
-      const { token } = response;
       if (!response.success) {
         Toast.show({
           type: "info",
@@ -173,23 +218,63 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         return;
       }
 
-      setToken(token);
-      await AsyncStorage.setItem("authToken", token);
       Toast.show({
         type: "success",
         text1: "Sukses",
         text2: "Anda berhasil terdaftar",
       });
-      router.replace("/(application)/(user)/waiting-room");
+      router.replace(`/verification?nomor=${userData.nomor}`);
       return;
     } catch (error: any) {
+      Toast.show({
+        type: "error",
+        text1: "Error",
+        text2: error.response?.data?.message || "Gagal mendaftar",
+      });
       console.log("Error register", error);
     } finally {
       setIsLoading(false);
     }
   };
+  // const registerUser = async (userData: {
+  //   username: string;
+  //   nomor: string;
+  //   termsOfServiceAccepted: boolean;
+  // }) => {
+  //   setIsLoading(true);
+  //   try {
+  //     const response = await apiRegister({ data: userData });
+  //     console.log("response", response);
+
+  //     const { token } = response;
+  //     if (!response.success) {
+  //       Toast.show({
+  //         type: "info",
+  //         text1: "Info",
+  //         text2: response.message,
+  //       });
+
+  //       return;
+  //     }
+
+  //     setToken(token);
+  //     await AsyncStorage.setItem("authToken", token);
+  //     Toast.show({
+  //       type: "success",
+  //       text1: "Sukses",
+  //       text2: "Anda berhasil terdaftar",
+  //     });
+  //     router.replace("/(application)/(user)/waiting-room");
+  //     return;
+  //   } catch (error: any) {
+  //     console.log("Error register", error);
+  //   } finally {
+  //     setIsLoading(false);
+  //   }
+  // };
 
   // --- 5. Logout ---
+
   const logout = async () => {
     try {
       setIsLoading(true);

ios/HIPMIBadungConnect.xcodeproj/project.pbxproj

@@ -422,7 +422,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.anonymous.hipmi-mobile";
-				PRODUCT_NAME = HIPMIBadungConnect;
+				PRODUCT_NAME = "HIPMIBadungConnect";
 				SWIFT_OBJC_BRIDGING_HEADER = "HIPMIBadungConnect/HIPMIBadungConnect-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -454,7 +454,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.anonymous.hipmi-mobile";
-				PRODUCT_NAME = HIPMIBadungConnect;
+				PRODUCT_NAME = "HIPMIBadungConnect";
 				SWIFT_OBJC_BRIDGING_HEADER = "HIPMIBadungConnect/HIPMIBadungConnect-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

ios/HIPMIBadungConnect/Info.plist

@@ -39,7 +39,7 @@
       </dict>
     </array>
     <key>CFBundleVersion</key>
-    <string>9</string>
+    <string>13</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false/>
     <key>LSMinimumSystemVersion</key>

screens/Authentication/LoginView.tsx

@@ -1,3 +1,4 @@
+import { NewWrapper } from "@/components";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
@@ -5,9 +6,11 @@ import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { apiVersion } from "@/service/api-config";
 import { GStyles } from "@/styles/global-styles";
-import { Redirect, router } from "expo-router";
+import versionBadge from "@/utils/viersionBadge";
+import VersionBadge from "@/utils/viersionBadge";
+import { Redirect } from "expo-router";
 import { useEffect, useState } from "react";
-import { Text, View } from "react-native";
+import { RefreshControl, Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import Toast from "react-native-toast-message";
 
@@ -16,6 +19,7 @@ export default function LoginView() {
   const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
   const [inputValue, setInputValue] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
 
   const { loginWithNomor, token, isAdmin, isUserActive } = useAuth();
 
@@ -25,7 +29,18 @@ export default function LoginView() {
 
   async function onLoadVersion() {
     const res = await apiVersion();
-    setVersion(res.data);
+
+    if (res.success) {
+      setVersion(versionBadge());
+    }
+  }
+
+  async function handleRefresh() {
+    setRefreshing(true);
+    await onLoadVersion();
+    setInputValue("");
+    setLoading(false);
+    setRefreshing(false);
   }
 
   function handleInputValue(phoneNumber: string) {
@@ -66,21 +81,13 @@ export default function LoginView() {
     if (!isValid) return;
 
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
-    const fixNumber = inputValue.replace(/\s+/g, "");
+    let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
+
     const realNumber = callingCode + fixNumber;
 
     try {
       setLoading(true);
-      // const response = await apiLogin({ nomor: realNumber });
       await loginWithNomor(realNumber);
-
-      Toast.show({
-        type: "success",
-        text1: "Sukses",
-        text2: "Kode OTP berhasil dikirim",
-      });
-
-      router.navigate(`/verification?nomor=${realNumber}`);
     } catch (error) {
       console.log("Error login", error);
       Toast.show({
@@ -91,6 +98,30 @@ export default function LoginView() {
     } finally {
       setLoading(false);
     }
+
+    // try {
+    //   setLoading(true);
+    //   // const response = await apiLogin({ nomor: realNumber });
+    //  const response =  await loginWithNomor(realNumber);
+    //  console.log("[RESPONSE]", response);
+
+    //   Toast.show({
+    //     type: "success",
+    //     text1: "Sukses",
+    //     text2: "Kode OTP berhasil dikirim",
+    //   });
+
+    //   // router.navigate(`/verification?nomor=${realNumber}`);
+    // } catch (error) {
+    //   console.log("Error login", error);
+    //   Toast.show({
+    //     type: "error",
+    //     text1: "Error",
+    //     text2: error as string,
+    //   });
+    // } finally {
+    //   setLoading(false);
+    // }
   }
 
   if (token && token !== "" && !isUserActive) {
@@ -103,14 +134,19 @@ export default function LoginView() {
 
   if (token && token !== "" && isAdmin) {
     // Akan di aktifkan jika sudah losos review
-    // return <Redirect href={"/(application)/admin/dashboard"} />;
+    return <Redirect href={"/(application)/admin/dashboard"} />;
 
     // Sementara gunakan ini
-    return <Redirect href={"/(application)/(user)/home"} />;
+    // return <Redirect href={"/(application)/(user)/home"} />;
   }
 
   return (
-    <ViewWrapper withBackground>
+    <NewWrapper
+      withBackground
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+      }
+    >
       <View style={GStyles.authContainer}>
         <View>
           <View style={GStyles.authContainerTitle}>
@@ -154,6 +190,6 @@ export default function LoginView() {
           Coba
         </ButtonCustom> */}
       </View>
-    </ViewWrapper>
+    </NewWrapper>
   );
 }

screens/Authentication/VerificationView.tsx

@@ -17,6 +17,8 @@ import Toast from "react-native-toast-message";
 export default function VerificationView() {
   const { nomor } = useLocalSearchParams<{ nomor: string }>();
 
+  console.log("[NOMOR]", nomor);
+
   const [inputOtp, setInputOtp] = useState<string>("");
   const [userNumber, setUserNumber] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
@@ -52,7 +54,7 @@ export default function VerificationView() {
     try {
       const response = await apiCheckCodeOtp({ kodeId });
       console.log(
-        "Response check code otp >>",
+        "[OTP] >>",
         JSON.stringify(response.otp, null, 2)
       );
       // Kita tidak perlu simpan codeOtp di state karena verifikasi dilakukan di backend
@@ -89,8 +91,9 @@ export default function VerificationView() {
       // ✅ VERIFIKASI OTOMATIS UNTUK APPLE REVIEW
       if (inputOtp === "1234") {
         try {
-          const response = await validateOtp(nomor as string);
-          router.replace(response);
+          await validateOtp(nomor as string);
+
+          return;
         } catch (error) {
           console.log("Error verification", error);
           Toast.show({ type: "error", text1: "Gagal verifikasi" });
@@ -103,16 +106,8 @@ export default function VerificationView() {
 
     // 🔁 VERIFIKASI NORMAL (untuk pengguna sungguhan)
     try {
-      const response = await validateOtp(nomor as string);
-      // registerForPushNotificationsAsync().then((token) => {
-      //   if (token) {
-      //     console.log("Expo Push Token:", token);
-      //     // TODO: Kirim token ke backend kamu
-      //   } else {
-      //     console.log("Failed to get Expo Push Token");
-      //   }
-      // });
-      router.replace(response);
+      await validateOtp(nomor as string);
+      return
     } catch (error) {
       console.log("Error verification", error);
       Toast.show({ type: "error", text1: "Gagal verifikasi" });

screens/Collaboration/BoxPublishSection.tsx

@@ -25,7 +25,7 @@ function Collaboration_BoxPublishSection({
             name={data?.Author?.username || "Username"}
             rightComponent={rightComponentAvatar}
             avatar={data?.Author?.Profile?.imageId}
-            withBottomLine
+            // withBottomLine
           />
 
           <StackCustom style={{paddingBlock: 10}}>

screens/Event/BoxDetailPublishSection.tsx

@@ -50,7 +50,7 @@ export default function Event_BoxDetailPublishSection({
               <Grid.Col span={4}>
                 <TextCustom bold>{item.title}</TextCustom>
               </Grid.Col>
-              <Grid.Col span={8}>
+              <Grid.Col span={8} style={{ paddingLeft: 10 }}>
                 <TextCustom>{item.value}</TextCustom>
               </Grid.Col>
             </Grid>

screens/Home/tabsList.ts

@@ -1,12 +1,12 @@
 import { ITabs } from "@/components/_Interface/types";
 
-export const tabsHome: any = (profileId: string) => [
+export const tabsHome: any = ({acceptedForumTermsAt, profileId}: {acceptedForumTermsAt: Date, profileId: string}) => [
   {
     id: "forum",
     icon: "chatbubble-ellipses-outline",
     activeIcon: "chatbubble-ellipses",
     label: "Forum",
-    path: "/forum",
+    path: acceptedForumTermsAt ? "/forum" : "/forum/terms",
     isActive: true,
     disabled: false,
   },

screens/Home/topFeatureSection.tsx

@@ -15,7 +15,7 @@ export default function Home_FeatureSection() {
       name: "Collaboration",
       icon: <Ionicons name="share" size={48} color="gray" />,
       onPress: () => router.push("/(application)/(user)/collaboration/(tabs)"),
-      status: "inactive",
+      status: "active",
     },
     {
       name: "Voting",

screens/Invesment/BoxBerandaSection.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BaseBox,
-    Grid,
-    ProgressCustom,
-    StackCustom,
-    TextCustom,
+  BaseBox,
+  Grid,
+  ProgressCustom,
+  StackCustom,
+  TextCustom,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
+import { MainColor } from "@/constants/color-palet";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { Ionicons } from "@expo/vector-icons";
@@ -21,7 +22,7 @@ export default function Investment_BoxBerandaSection({
   id: string;
   data: any;
 }) {
-//   console.log("[DATA By one]", JSON.stringify(data, null, 2));
+  //   console.log("[DATA By one]", JSON.stringify(data, null, 2));
 
   const [value, setValue] = useState({
     sisa: 0,
@@ -32,6 +33,8 @@ export default function Investment_BoxBerandaSection({
     updateCountDown();
   }, [data]);
 
+  console.log("[DATA BERANDA]", JSON.stringify(data, null, 2));
+
   const updateCountDown = () => {
     const countDown = countDownAndCondition({
       duration: data?.pencarianInvestor,
@@ -66,8 +69,10 @@ export default function Investment_BoxBerandaSection({
               <TextCustom truncate={2}>{data.title}</TextCustom>
               <ProgressCustom
                 label={`${data.progress}%`}
-                value={data.progress}
+                value={Number(data.progress)}
                 size="lg"
+                animated
+                color="primary"
               />
               {value.reminder ? (
                 <View
@@ -79,13 +84,11 @@ export default function Investment_BoxBerandaSection({
                 >
                   <Ionicons name="alert-circle-outline" size={16} color="red" />
                   <TextCustom truncate color="red" size="small">
-                    Periode Investasi Berakhir
+                    Periode Berakhir
                   </TextCustom>
                 </View>
               ) : (
-                <TextCustom>
-                  Sisa waktu: {value.sisa} hari
-                </TextCustom>
+                <TextCustom>Sisa waktu: {value.sisa} hari</TextCustom>
               )}
             </StackCustom>
           </Grid.Col>

screens/Invesment/ButtonInvestasiSection.tsx

@@ -4,9 +4,11 @@ import { router } from "expo-router";
 export default function Investment_ButtonInvestasiSection({
   id,
   isMine,
+  reminder,
 }: {
   id: string;
   isMine: boolean;
+  reminder: boolean;
 }) {
   return (
     <>
@@ -14,11 +16,12 @@ export default function Investment_ButtonInvestasiSection({
         <ButtonCustom disabled>Investasi ini milik Anda</ButtonCustom>
       ) : (
         <ButtonCustom
+          disabled={reminder}
           onPress={() => {
             router.navigate(`/investment/${id}/(transaction-flow)`);
           }}
         >
-          Beli Saham
+          {reminder ? "Periode Investasi Berakhir" : "Beli Saham"}
         </ButtonCustom>
       )}
     </>

screens/Invesment/DetailDataPublishSection.tsx

@@ -52,7 +52,7 @@ export default function Invesment_DetailDataPublishSection({
             <ReportBox text={data?.catatan} />
           )}
         <Invesment_BoxProgressSection
-          progress={data?.progress}
+          progress={Number(data?.progress)}
           status={status as string}
         />
         <Invesment_BoxDetailDataSection

screens/Portofolio/ButtonCreatePortofolio.tsx

@@ -55,10 +55,6 @@ export default function Portofolio_ButtonCreate({
   };
 
   const handleCreatePortofolio = async () => {
-    console.log(
-      "Data sub bidang >>",
-      JSON.stringify(subBidangSelected, null, 2)
-    );
     if (!validaasiData()) {
       Toast.show({
         type: "info",

screens/Portofolio/SocialMediaSection.tsx

@@ -5,16 +5,6 @@ import { Ionicons } from "@expo/vector-icons";
 
 export default function Portofolio_SocialMediaSection({ data }: { data: any }) {
   const listData = [
-    {
-      label: data && data?.facebook ? data.facebook : "-",
-      icon: (
-        <Ionicons
-          name="logo-facebook"
-          size={ICON_SIZE_SMALL}
-          color={MainColor.white}
-        />
-      ),
-    },
     {
       label: data && data?.tiktok ? data.tiktok : "-",
       icon: (
@@ -35,6 +25,16 @@ export default function Portofolio_SocialMediaSection({ data }: { data: any }) {
         />
       ),
     },
+    {
+      label: data && data?.facebook ? data.facebook : "-",
+      icon: (
+        <Ionicons
+          name="logo-facebook"
+          size={ICON_SIZE_SMALL}
+          color={MainColor.white}
+        />
+      ),
+    },
     {
       label: data && data?.twitter ? data.twitter : "-",
       icon: (

screens/Voting/BoxDetailHasilVotingSection.tsx

@@ -22,9 +22,11 @@ export default function Voting_BoxDetailHasilVotingSection({
           <Grid>
             {listData?.map((item: any, i: number) => (
               <Grid.Col span={12 / listData?.length} style={{ alignItems: "center" }} key={i}>
-                <StackCustom>
+                <StackCustom style={{
+                  alignItems: "center",
+                }}>
                   <CircleContainer value={item?.jumlah} />
-                  <TextCustom align="center" size="small">{item?.value}</TextCustom>
+                  <TextCustom truncate={2} align="center" size="small">{item?.value}</TextCustom>
                 </StackCustom>
               </Grid.Col>
             ))}

service/api-admin/api-master-admin.ts

@@ -167,3 +167,56 @@ export async function apiAdminMasterTypeOfEventUpdate({
 }
 
 // ================== END EVENT ================== //
+
+// ================== START DONATION ================== //
+
+export async function apiAdminMasterDonationCategory() {
+  try {
+    const response = await apiConfig.get(`/mobile/admin/master/donation`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminMasterDonationCategoryById({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/admin/master/donation/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminMasterDonationCategoryUpdate({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.put(
+      `/mobile/admin/master/donation/${id}`,
+      {
+        data: data,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiAdminMasterDonationCategoryCreate({ data }: { data: any }) {
+  try {
+    const response = await apiConfig.post(`/mobile/admin/master/donation`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+// ================== END DONATION ================== //

service/api-client/api-user.ts

@@ -36,3 +36,13 @@ export async function apiForumBlockUser({
     throw error;
   }
 }
+
+export async function apiAcceptForumTerms({category, userId}:{category:"Forum" | "Event", userId: string}) {
+  try {
+    const response = await apiConfig.post(`/mobile/user/${userId}/terms-of-app?category=${category}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+    

service/api-client/api-voting.ts

@@ -79,12 +79,14 @@ export async function apiVotingUpdateData({
   }
 }
 
-export async function apiVotingGetAll({ search, category, authorId }: { search?: string, category: "beranda" | "contribution" | "all-history" | "my-history", authorId?: string }) {
+export async function apiVotingGetAll({ search, category, authorId, userLoginId }: { search?: string, category: "beranda" | "contribution" | "all-history" | "my-history", authorId?: string, userLoginId?: string }) {
   try {
+    console.log("userLoginId", userLoginId);
     const categoryQuery = category ? `?category=${category}` : "";
     const searchQuery = search ? `&search=${search}` : "";
     const authorIdQuery = authorId ? `&authorId=${authorId}` : "";
-    const response = await apiConfig.get(`/mobile/voting${categoryQuery}${searchQuery}${authorIdQuery}`);
+    const userLoginIdQuery = userLoginId ? `&userLoginId=${userLoginId}` : "";
+    const response = await apiConfig.get(`/mobile/voting${categoryQuery}${searchQuery}${authorIdQuery}${userLoginIdQuery}`);
     return response.data;
   } catch (error) {
     throw error;

service/api-config.ts

@@ -14,13 +14,13 @@ apiConfig.interceptors.request.use(
   async (config) => {
     console.log("API_BASE_URL >>", API_BASE_URL);
     const token = await AsyncStorage.getItem("authToken");
+    // console.log("[TOKEN] >>", token);
     if (token) {
       // config.timeout = 10000;
       config.headers["Content-Type"] = "application/json";
       config.headers.Authorization = `Bearer ${token}`;
     }
 
-    // console.log("config", JSON.stringify(config, null, 2));
     return config;
   },
   (error) => {
@@ -29,16 +29,15 @@ apiConfig.interceptors.request.use(
 );
 
 export async function apiVersion() {
-  // console.log("API_BASE_URL", API_BASE_URL);
   const response = await apiConfig.get("/version");
   return response.data;
 }
 
 export async function apiLogin({ nomor }: { nomor: string }) {
-  const response = await apiConfig.post("/auth/login", {
+  const response = await apiConfig.post("/auth/mobile-login", {
     nomor: nomor,
   });
-  return response.data;
+  return response.data;;
 }
 
 export async function apiCheckCodeOtp({ kodeId }: { kodeId: string }) {
@@ -47,7 +46,7 @@ export async function apiCheckCodeOtp({ kodeId }: { kodeId: string }) {
 }
 
 export async function apiValidationCode({ nomor }: { nomor: string }) {
-  const response = await apiConfig.post(`/auth/validasi`, {
+  const response = await apiConfig.post(`/auth/mobile-validasi`, {
     nomor: nomor,
   });
   return response.data;
@@ -58,7 +57,7 @@ export async function apiRegister({
 }: {
   data: { nomor: string; username: string; termsOfServiceAccepted: boolean };
 }) {
-  const response = await apiConfig.post(`/auth/register`, {
+  const response = await apiConfig.post(`/auth/mobile-register`, {
     data: data,
   });
   return response.data;

utils/badWordsIndonesia.ts

@@ -0,0 +1,108 @@
+// badWordsIndonesia.js (Versi Lengkap)
+
+const badWordsIndonesia = [
+  // 🐶 Kata Kasar & Vulgar
+  'anjing', 'babi', 'bangsat', 'bodoh', 'goblok', 'idiot', 'jancok', 'jembut', 'kampret',
+  'kontol', 'memek', 'ngentot', 'peler', 'puki', 'sialan', 'tai', 'tolol', 'wibu',
+  'anjingg', 'babbii', 'bangsaat', 'gobllokk', 'jancokk', 'kontoll', 'memekk', 'ngentott',
+  'pelerr', 'puuki', 'sialann', 'taii', 'tololl', 'wibuu',
+
+  // 🔥 Kata Sindiran & Penghinaan
+  'bego', 'dungu', 'edan', 'gila', 'goblog', 'kampang', 'kampret', 'keparat', 'lonte',
+  'main mata', 'monyet', 'najis', 'ngeyel', 'ngibul', 'ngomong seenaknya', 'ngurangin',
+  'ngutang', 'ngurusin urusan orang', 'pemalas', 'pengecut', 'penipu', 'sinting',
+  'begoo', 'dunguu', 'goblogg', 'kampangg', 'keparatt', 'lontee', 'monyyet', 'najiss',
+  'ngeyell', 'ngibull', 'ngomongg seenaknya', 'nguranginn', 'ngutangg', 'pemalass',
+  'pengecutt', 'penipuu', 'sintting',
+
+  // ⚖️ Kata SARA & Diskriminasi
+  'cina', 'kafir', 'kampungan', 'kacung', 'mampus', 'menghina', 'racist', 'sara',
+  'setan', 'syiah', 'waria', 'wong jowo', 'wong sunda', 'wong madura',
+  'chinna', 'kafiir', 'kampungann', 'kacungg', 'mampuss', 'menghinna', 'racisst',
+  'saraa', 'setann', 'syiahh', 'wariia', 'wong jowoo', 'wong sundaa', 'wong maduraa',
+
+  // 💸 Kata Spam / Promosi Ilegal
+  'judi', 'togel', 'slot', 'casino', 'poker', 'qq', 'bandar', 'agen', 'link', 'wa',
+  'whatsapp', 'telepon', 'nomor', 'hp', 'sms', 'grup', 'join', 'daftar', 'bonus',
+  'deposit', 'withdraw', 'uang', 'duit', 'rp', 'ratusan', 'juta', 'milyar',
+  'judii', 'togell', 'slotss', 'casinoo', 'pokerr', 'qqq', 'bandarr', 'agenn', 'linkk',
+  'waa', 'whatsappp', 'teleponn', 'nomorr', 'hpp', 'smss', 'grupp', 'jooin', 'daftarr',
+  'bonuss', 'depositt', 'withdraww', 'uangs', 'duitt', 'rpp', 'ratusann', 'jutaa', 'milyarr',
+
+  // 🧩 Variasi Penulisan (Bypass Filter)
+  'a*njing', 'b*b*i', 'b*ngsat', 'g*blok', 'k*nt*l', 'm*m*k', 'n*g*nt*t', 'p*l*r',
+  't*i', 't*l*l', 'j*n*c*k', 'j*m*b*t', 'k*m*p*r*t', 's*i*l*a*n', 'w*b*u',
+  'a.n.j.i.n.g', 'b.a.b.i', 'b.a.n.g.s.a.t', 'g.o.b.l.o.k', 'k.o.n.t.o.l', 'm.e.m.e.k',
+  'n.g.e.n.t.o.t', 'p.e.l.e.r', 't.a.i', 't.o.l.o.l', 'j.a.n.c.o.k', 'j.e.m.b.u.t',
+  'k.a.m.p.r.e.t', 's.i.a.l.a.n', 'w.i.b.u',
+
+  // 📱 Variasi dengan Angka & Simbol
+  '4nj1ng', 'b4b1', 'b4ngs4t', 'g0bl0k', 'k0nt0l', 'm3m3k', 'ng3nt0t', 'p3l3r',
+  't4i', 't0l0l', 'j4nc0k', 'j3mbut', 'k4mpr3t', 's14l4n', 'w1bu',
+  '4nj1ngg', 'b4b11', 'b4ngs4tt', 'g0bl0kk', 'k0nt0ll', 'm3m3kk', 'ng3nt0tt',
+  'p3l3rr', 't4ii', 't0l0ll', 'j4nc0kk', 'j3mbutt', 'k4mpr3tt', 's14l4nn', 'w1buu',
+
+  // 🗣️ Kata yang Sering Digunakan dalam Konteks Negatif
+  'dasar', 'kamu', 'kau', 'lu', 'lo', 'gue', 'gua', 'kita', 'kami', 'mereka',
+  'dasarr', 'kamuu', 'kauu', 'luu', 'loo', 'guee', 'guua', 'kitaa', 'kamii', 'merekaa',
+  'dasar bodoh', 'dasar goblok', 'dasar bangsat', 'dasar idiot', 'dasar sialan',
+  'dasar bego', 'dasar dungu', 'dasar edan', 'dasar gila', 'dasar sinting',
+  'dasar pemalas', 'dasar pengecut', 'dasar penipu', 'dasar najis', 'dasar kampret',
+
+  // 🚫 Kata yang Mengandung Unsur Seksual
+  'porno', 'seks', 'mesum', 'bugil', 'telanjang', 'payudara', 'pantat', 'vagina', 'penis',
+  'pornoo', 'sekss', 'mesumm', 'bugill', 'telanjangg', 'payudaraa', 'pantatt', 'vaginna',
+  'peniss', 'pornoografi', 'pornografi', 'porno graf i', 'seksual', 'seksualitas',
+  'pornoograffii', 'pornografffii', 'porno graf ii', 'seksuall', 'seksualitass',
+
+  // 🤬 Kata Kasar dari Bahasa Daerah (Sunda, Jawa, dll)
+  'kampret', 'kacung', 'mampus', 'sialan', 'bangsat', 'goblok', 'bodoh', 'tolol',
+  'kamprett', 'kacungg', 'mampuss', 'sialann', 'bangsaatt', 'gobllokk', 'bodooh', 'tololl',
+  'kampret sunda', 'kacung jawa', 'mampus batak', 'sialan minang', 'bangsat lampung',
+  'goblok palembang', 'bodoh medan', 'tolol makassar',
+
+  // 📉 Kata yang Sering Digunakan untuk Menjelekkan Orang
+//   'jelek', 'buruk', 'tidak pantas', 'tidak sopan', 'tidak beretika', 'tidak beradab',
+//   'jelekk', 'burukk', 'tidak pantass', 'tidak sopann', 'tidak beretikaa', 'tidak beradabb',
+//   'jelek banget', 'buruk banget', 'tidak pantas banget', 'tidak sopan banget',
+//   'tidak beretika banget', 'tidak beradab banget',
+
+  // 🛑 Kata yang Sering Digunakan untuk Menyebarkan Hoax
+//   'hoax', 'bohong', 'palsu', 'tipu', 'menipu', 'menyesatkan', 'menjerumuskan',
+//   'hoaxx', 'bohongg', 'palsuu', 'tipuu', 'menipuu', 'menyesatkanng', 'menjerumuskanng',
+//   'hoax besar', 'bohong besar', 'palsu besar', 'tipu besar', 'menipu besar',
+//   'menyesatkan besar', 'menjerumuskan besar'
+];
+
+// Normalisasi teks
+const normalizeText = (text: string) => {
+  return text.toLowerCase().replace(/\s+/g, ' ').trim();
+};
+
+// Cek apakah teks mengandung kata buruk
+const isBadContent = (text: string) => {
+  const normalized = normalizeText(text);
+  for (let word of badWordsIndonesia) {
+    if (normalized.includes(word)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+// Saring teks (ganti dengan asterisk)
+const censorText = (text: string) => {
+  let result = text;
+  for (let word of badWordsIndonesia) {
+    const regex = new RegExp(word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+    result = result.replace(regex, '*'.repeat(word.length));
+  }
+  return result;
+};
+
+export {
+  badWordsIndonesia,
+  isBadContent,
+  censorText,
+  normalizeText
+};

utils/viersionBadge.ts

@@ -0,0 +1,18 @@
+// VersionBadge.tsx
+import Constants from "expo-constants";
+import { Platform } from "react-native";
+
+export default function versionBadge() {
+  const expoConfig = Constants.expoConfig;
+
+  const version = expoConfig?.version; // "1.0.1"
+  const iosBuild = expoConfig?.ios?.buildNumber; // "10"
+  const androidBuild = expoConfig?.android?.versionCode; // 2
+
+  const build =
+    Platform.OS === "ios" ? iosBuild : androidBuild;
+
+    const result = `${version} ( ${build} )`;
+
+  return result
+}