QC Admin ( Inno )

Fix:
   modified:   android/app/build.gradle
        modified:   app.config.js
        modified:   app/(application)/admin/donation/[id]/[status]/index.tsx
        modified:   app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx
        modified:   app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx
        modified:   app/(application)/admin/donation/category.tsx
        modified:   app/(application)/admin/event/[id]/[status]/index.tsx
        modified:   app/(application)/admin/event/[id]/list-of-participants.tsx
        modified:   app/(application)/admin/event/[status]/status.tsx
        modified:   app/(application)/admin/forum/[id]/index.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/investment/[id]/[status]/index.tsx
        modified:   app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx
        modified:   app/(application)/admin/voting/[id]/[status]/index.tsx
        modified:   components/DateInput/DateTimeIOS.tsx
        modified:   components/_ShareComponent/Admin/ButtonReject.tsx
        deleted:    components/_ShareComponent/GridDetail_4_8.tsx

Add:/
components/_ShareComponent/GridSpan_4_8.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

@@ -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)/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.tsx

@@ -1,30 +1,22 @@
 import {
-  ActionIcon,
   BadgeCustom,
-  BaseBox,
   CenterCustom,
   ClickableCustom,
-  DividerCustom,
-  Grid,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  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 { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { RefreshControl, View } from "react-native";
-import { Divider, Switch } from "react-native-paper";
-import { router, useFocusEffect } from "expo-router";
-import { useCallback, useEffect, useState } from "react";
 import { apiAdminMasterDonationCategory } from "@/service/api-admin/api-master-admin";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { colorActivationForBadge } from "@/utils/colorActivationForBadge";
-import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+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[]>([]);
@@ -80,14 +72,18 @@ export default function AdminDonationCategory() {
         />
 
         <View>
-          <Grid>
+          <GridSpan_4_8
-            <Grid.Col style={{paddingLeft: 10}} span={4}>
+            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>
+          </Grid> */}
 
           <Divider />
           <Spacing />
@@ -100,11 +96,22 @@ export default function AdminDonationCategory() {
                 }}
                 key={index}
               >
-                <Grid containerStyle={{ paddingBottom: 10 }}>
+                <GridSpan_4_8
-                  <Grid.Col
+                  label={
-                    span={4}
+                    <CenterCustom>
-                    style={{paddingLeft: 10}}
+                      <BadgeCustom
-                     >
+                        color={colorActivationForBadge({
+                          status: item.active,
+                        })}
+                      >
+                        {item.active ? "Aktif" : "Tidak Aktif"}
+                      </BadgeCustom>
+                    </CenterCustom>
+                  }
+                  value={<TextCustom>{item.name}</TextCustom>}
+                />
+                {/* <Grid containerStyle={{ paddingBottom: 10 }}>
+                  <Grid.Col span={4} style={{ paddingLeft: 10 }}>
                     <CenterCustom>
                       <BadgeCustom
                         color={item.active ? MainColor.green : MainColor.red}
@@ -116,7 +123,7 @@ export default function AdminDonationCategory() {
                   <Grid.Col span={8}>
                     <TextCustom bold>{item.name}</TextCustom>
                   </Grid.Col>
-                </Grid>
+                </Grid> */}
                 <Divider />
               </ClickableCustom>
             ))}

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

@@ -1,22 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ActionIcon,
+  ActionIcon,
-    AlertDefaultSystem,
+  AlertDefaultSystem,
-    BadgeCustom,
+  BadgeCustom,
-    BaseBox,
+  BaseBox,
-    DrawerCustom,
+  DrawerCustom,
-    LoaderCustom,
+  LoaderCustom,
-    MenuDrawerDynamicGrid,
+  MenuDrawerDynamicGrid,
-    Spacing,
+  Spacing,
-    StackCustom,
+  StackCustom,
-    TextCustom,
+  TextCustom,
-    ViewWrapper,
+  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
+                  {startDate &&
-                    style={{ alignSelf: "flex-end" }}
+                  startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
-                    color={item?.isPresent ? "green" : "red"}
+                    <BadgeCustom
-                  >
+                      style={{ alignSelf: "flex-end" }}
-                    {item?.isPresent ? "Hadir" : "Tidak Hadir"}
+                      color={item?.isPresent ? "green" : "red"}
-                  </BadgeCustom>
+                    >
+                      {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"
+            title1="Username"
-            title2="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={
+                onPress={() => {
-                  <ActionIcon
+                  router.push(`/admin/event/${item.id}/${status}`);
-                    icon={
+                }}
-                      <Octicons
+              >
-                        name="eye"
+                <AdminTableValue
-                        size={ICON_SIZE_BUTTON}
+                  key={index}
-                        color="black"
+                  value1={
-                      />
+                    <TextCustom truncate={1}>
-                    }
+                      {item?.Author?.username || "-"}
-                    onPress={() => {
+                    </TextCustom>
-                      router.push(`/admin/event/${item.id}/${status}`);
+                    // <ActionIcon
-                    }}
+                    //   icon={
-                  />
+                    //     <Octicons
-                }
+                    //       name="eye"
-                value2={
+                    //       size={ICON_SIZE_BUTTON}
-                  <TextCustom truncate={1}>
+                    //       color="black"
-                    {item?.Author?.username || "-"}
+                    //     />
-                  </TextCustom>
+                    //   }
-                }
+                    //   onPress={() => {
-                value3={
+                    //     router.push(`/admin/event/${item.id}/${status}`);
-                  <TextCustom align="center" truncate={2}>
+                    //   }}
-                    {item?.title || "-"}
+                    // />
-                  </TextCustom>
+                  }
-                }
+                  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

@@ -16,7 +16,7 @@ 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 { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import {
@@ -95,11 +95,11 @@ export default function AdminForumReportComment() {
       >
         <BaseBox>
           <StackCustom gap={"sm"}>
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>Username</TextCustom>}
               value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
             />
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>Komentar</TextCustom>}
               value={<TextCustom>{data?.komentar || "-"}</TextCustom>}
             />
@@ -208,20 +208,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 +231,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

@@ -17,7 +17,7 @@ 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 { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import {
@@ -95,12 +95,12 @@ export default function AdminForumReportPosting() {
       >
         <BaseBox>
           <StackCustom gap={"sm"}>
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>Username</TextCustom>}
               value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
             />
 
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>Status</TextCustom>}
               value={
                 data && data?.ForumMaster_StatusPosting?.status ? (
@@ -121,7 +121,7 @@ export default function AdminForumReportPosting() {
               }
             />
 
-            <GridDetail_4_8
+            <GridSpan_4_8
               label={<TextCustom bold>Postingan</TextCustom>}
               value={<TextCustom>{data?.diskusi || "-"}</TextCustom>}
             />
@@ -229,20 +229,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 +252,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/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,
+  AlertDefaultSystem,
-    BadgeCustom,
+  BadgeCustom,
-    BaseBox,
+  BaseBox,
-    CircleContainer,
+  CircleContainer,
-    Grid,
+  Grid,
-    Spacing,
+  Spacing,
-    StackCustom,
+  StackCustom,
-    TextCustom,
+  TextCustom,
-    ViewWrapper,
+  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>}

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/_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/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,
+  value,
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}) => {
+  return (
+    <Grid>
+      <Grid.Col
+        span={4}
+        style={{
+          justifyContent: "flex-start",
+          paddingRight: 8,
+          paddingLeft: 8,
+        }}
+      >
+        {label}
+      </Grid.Col>
+      <Grid.Col span={8} style={{ justifyContent: "center", paddingRight: 8 }}>
+        {value}
+      </Grid.Col>
+    </Grid>
+  );
+};