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
2025-12-05 17:20:39 +08:00
parent 2446e9d51a
commit 624bd49f69
19 changed files with 245 additions and 150 deletions
--- a/android/app/build.gradle
+++ b/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'}\""
--- a/app.config.js
+++ b/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: [
      {
--- a/app/(application)/admin/donation/[id]/[status]/index.tsx
+++ b/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>}
--- a/app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx
+++ b/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>}
--- a/app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx
+++ b/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>}
--- a/app/(application)/admin/donation/category.tsx
+++ b/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 { 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 { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import { apiAdminMasterDonationCategory } from "@/service/api-admin/api-master-admin";
-import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
-import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+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[]>([]);
@@ -80,14 +72,18 @@ export default function AdminDonationCategory() {
        />

        <View>
-          <Grid>
-            <Grid.Col style={{paddingLeft: 10}} span={4}>
+          <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>
+          </Grid> */}

          <Divider />
          <Spacing />
@@ -100,11 +96,22 @@ export default function AdminDonationCategory() {
                }}
                key={index}
              >
-                <Grid containerStyle={{ paddingBottom: 10 }}>
-                  <Grid.Col
-                    span={4}
-                    style={{paddingLeft: 10}}
+                <GridSpan_4_8
+                  label={
+                    <CenterCustom>
+                      <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>
            ))}
--- a/app/(application)/admin/event/[id]/[status]/index.tsx
+++ b/app/(application)/admin/event/[id]/[status]/index.tsx
@@ -16,7 +16,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 } 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>
        )}
--- a/app/(application)/admin/event/[id]/list-of-participants.tsx
+++ b/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" }}>
+                  {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>
--- a/app/(application)/admin/event/[status]/status.tsx
+++ b/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={
+              >
+                <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}`);
+                    //   }}
+                    // />
                  }
-                value3={
-                  <TextCustom align="center" truncate={2}>
-                    {item?.title || "-"}
+                  value2={
+                    <TextCustom truncate={1}>
+                      {dateTimeView({ date: item?.tanggal })}
                    </TextCustom>
                  }
+                  value3={
+                    <TextCustom truncate={2}>{item?.title || "-"}</TextCustom>
+                  }
                />
+                <Divider/>
+              </ClickableCustom>
            ))
          )}
        </StackCustom>
--- a/app/(application)/admin/forum/[id]/index.tsx
+++ b/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>}
--- a/app/(application)/admin/forum/[id]/list-report-comment.tsx
+++ b/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>
--- a/app/(application)/admin/forum/[id]/list-report-posting.tsx
+++ b/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>
--- a/app/(application)/admin/investment/[id]/[status]/index.tsx
+++ b/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>
--- a/app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx
+++ b/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>}
--- a/app/(application)/admin/voting/[id]/[status]/index.tsx
+++ b/app/(application)/admin/voting/[id]/[status]/index.tsx
@@ -13,7 +13,7 @@ import {
 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>}
--- a/components/DateInput/DateTimeIOS.tsx
+++ b/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>
        </>
      )}
--- a/components/_ShareComponent/Admin/ButtonReject.tsx
+++ b/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}
--- a/components/_ShareComponent/GridDetail_4_8.tsx
+++ b/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>
-    );
-};
--- a/components/_ShareComponent/GridSpan_4_8.tsx
+++ b/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>
+  );
+};