Deskripsi:

- New component: Datetime custom, datetime android, datetime ios - Fix: event create input datetime # No Issue
feature
2025-07-18 11:48:24 +08:00 · 2025-07-17 17:21:31 +08:00 · 2025-07-15 15:30:11 +08:00 · 2025-07-15 15:21:41 +08:00 · 2025-07-15 14:15:33 +08:00 · 2025-07-15 14:13:08 +08:00
35 changed files with 1196 additions and 85 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -76,6 +76,13 @@ export default function UserLayout() {
            ),
          }}
        />
+        <Stack.Screen
+          name="event/create"
+          options={{
+            title: "Tambah Event",
+            headerLeft: () => <BackButton />,
+          }}
+        />

        <Stack.Screen
          name="event/detail/[id]"
@@ -114,6 +121,34 @@ export default function UserLayout() {
            headerLeft: () => <BackButton />,
          }}
        />
+        <Stack.Screen
+          name="forum/[id]/report-commentar"
+          options={{
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/other-report-commentar"
+          options={{
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/report-posting"
+          options={{
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/other-report-posting"
+          options={{
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
+          }}
+        />

        {/* ========== Maps Section ========= */}
        <Stack.Screen
--- a/app/(application)/(user)/event/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/event/(tabs)/_layout.tsx
@@ -1,6 +1,8 @@
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { OS_IOS_HEIGHT, OS_ANDROID_HEIGHT } from "@/constants/constans-value";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
+import { Platform, View } from "react-native";

 export default function EventLayout() {
  return (
@@ -9,18 +11,20 @@ export default function EventLayout() {
        headerShown: false,
        tabBarActiveTintColor: MainColor.yellow,
        tabBarInactiveTintColor: MainColor.white_gray,
-        tabBarStyle: {
-          backgroundColor: MainColor.darkblue,
-        },
-        //   tabBarButton: HapticTab,
-        //   tabBarBackground: BlurTabBarBackground,
-        //   tabBarStyle: Platform.select({
-        //     ios: {
-        //       // Use a transparent background on iOS to show the blur effect
-        //       position: "absolute",
-        //     },
-        //     default: {},
-        //   }),
+        tabBarBackground: CustomTabBarBackground,
+        tabBarStyle: Platform.select({
+          ios: {
+            borderTopWidth: 0,
+            paddingTop: 5,
+            height: OS_IOS_HEIGHT,
+          },
+          android: {
+            borderTopWidth: 0,
+            paddingTop: 5,
+            height: OS_ANDROID_HEIGHT,
+          },
+          default: {},
+        }),
      }}
    >
      <Tabs.Screen
@@ -62,3 +66,16 @@ export default function EventLayout() {
    </Tabs>
  );
 }
+
+function CustomTabBarBackground() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: MainColor.darkblue,
+        borderTopWidth: 1,
+        borderTopColor: AccentColor.blue,
+      }}
+    />
+  );
+}
--- a/app/(application)/(user)/event/(tabs)/index.tsx
+++ b/app/(application)/(user)/event/(tabs)/index.tsx
@@ -1,4 +1,5 @@
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import FloatingButton from "@/components/Button/FloatingButton";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
 import { router } from "expo-router";
@@ -6,7 +7,11 @@ import { Text, TouchableHighlight, View } from "react-native";

 export default function Event() {
  return (
-    <ViewWrapper>
+    <ViewWrapper
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/event/create")} />
+      }
+    >
      <TouchableHighlight onPress={() => router.push("/event/detail/1")}>
        <View
          style={{
--- a/app/(application)/(user)/event/create.tsx
+++ b/app/(application)/(user)/event/create.tsx
@@ -0,0 +1,100 @@
+import {
+    BoxButtonOnFooter,
+    ButtonCustom,
+    SelectCustom,
+    StackCustom,
+    TextAreaCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
+import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import React, { useState } from "react";
+import { Platform } from "react-native";
+
+export default function EventCreate() {
+  const [selectedDate, setSelectedDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const [selectedEndDate, setSelectedEndDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const handlerSubmit = () => {
+    if (selectedDate) {
+      console.log("Tanggal yang dipilih:", selectedDate);
+      console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
+      // Kirim ke API atau proses lanjutan
+    } else {
+      console.warn("Tanggal belum dipilih");
+    }
+
+    if (selectedEndDate) {
+      console.log("Tanggal yang dipilih:", selectedEndDate);
+      console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
+      // Kirim ke API atau proses lanjutan
+    } else {
+      console.warn("Tanggal belum dipilih");
+    }
+  };
+
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom title="Simpan" onPress={handlerSubmit} />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper footerComponent={buttonSubmit}>
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            placeholder="Masukkan nama event"
+            label="Nama Event"
+            required
+          />
+          <SelectCustom
+            label="Tipe Event"
+            placeholder="Pilih tipe event"
+            data={masterTypeEvent}
+            onChange={(value) => console.log(value)}
+          />
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukkan lokasi event"
+            required
+          />
+
+          <DateTimePickerCustom
+            label="Tanggal & Waktu Mulai"
+            required
+            onChange={(date: Date) => {
+              setSelectedDate(date as any);
+            }}
+            value={selectedDate as any}
+            minimumDate={new Date(Date.now())}
+          />
+
+          <DateTimePickerCustom
+            label="Tanggal & Waktu Berakhir"
+            required
+            onChange={(date: Date) => {
+              setSelectedEndDate(date as any);
+            }}
+            value={selectedEndDate as any}
+          />
+
+          <TextAreaCustom
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi event"
+            required
+            showCount
+            maxLength={100}
+          />
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
--- a/app/(application)/(user)/forum/[id]/forumku.tsx
+++ b/app/(application)/(user)/forum/[id]/forumku.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDataDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
+import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
 import { useLocalSearchParams } from "expo-router";
 import { useState } from "react";
@@ -47,12 +47,14 @@ export default function Forumku() {
              </ButtonCustom>
            </Grid.Col>
          </Grid>
-          {listDataDummyCommentarForum.map((e, i) => (
+          {listDummyDiscussionForum.map((e, i) => (
            <Forum_BoxDetailSection
              key={i}
              data={e}
              setOpenDrawer={setOpenDrawer}
              setStatus={setStatus}
+              isTruncate={true}
+              href={`/forum/${id}`}
            />
          ))}
        </StackCustom>
--- a/app/(application)/(user)/forum/[id]/index.tsx
+++ b/app/(application)/(user)/forum/[id]/index.tsx
@@ -3,7 +3,6 @@ import {
  ButtonCustom,
  DrawerCustom,
  Spacing,
-  StackCustom,
  TextAreaCustom,
  ViewWrapper,
 } from "@/components";
@@ -12,9 +11,9 @@ import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
 import { listDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
+import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
-import { Divider } from "react-native-paper";

 export default function ForumDetail() {
  const { id } = useLocalSearchParams();
@@ -27,7 +26,7 @@ export default function ForumDetail() {

  // Comentar
  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
-  const [statusCommentar, setStatusCommentar] = useState("");
+  const [alertDeleteCommentar, setAlertDeleteCommentar] = useState(false);

  const dataDummy = {
    name: "Bagas",
@@ -78,7 +77,6 @@ export default function ForumDetail() {
            key={i}
            data={e}
            setOpenDrawer={setOpenDrawerCommentar}
-            setStatus={setStatusCommentar}
          />
        ))}
      </ViewWrapper>
@@ -145,16 +143,34 @@ export default function ForumDetail() {
        isVisible={openDrawerCommentar}
        closeDrawer={() => setOpenDrawerCommentar(false)}
      >
-        <Forum_MenuDrawerBerandaSection
+        <Forum_MenuDrawerCommentar
          id={id as string}
-          status={statusCommentar}
          setIsDrawerOpen={() => {
            setOpenDrawerCommentar(false);
          }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
+          setShowDeleteAlert={setAlertDeleteCommentar}
        />
      </DrawerCustom>
+
+      {/* Alert Delete Commentar */}
+      <AlertCustom
+        isVisible={alertDeleteCommentar}
+        title="Hapus Komentar"
+        message="Apakah Anda yakin ingin menghapus komentar ini?"
+        onLeftPress={() => {
+          setOpenDrawerCommentar(false);
+          setAlertDeleteCommentar(false);
+          console.log("Batal");
+        }}
+        onRightPress={() => {
+          setOpenDrawerCommentar(false);
+          setAlertDeleteCommentar(false);
+          console.log("Hapus commentar");
+        }}
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
    </>
  );
 }
--- a/app/(application)/(user)/forum/[id]/other-report-commentar.tsx
+++ b/app/(application)/(user)/forum/[id]/other-report-commentar.tsx
@@ -0,0 +1,32 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+export default function ForumOtherReportCommentar() {
+  const handleSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor={MainColor.white}
+        onPress={() => {
+          console.log("Report lainnya");
+          router.back();
+        }}
+      >
+        Report
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={handleSubmit}>
+        <TextAreaCustom placeholder="Laporkan Komentar" />
+      </ViewWrapper>
+    </>
+  );
+}
--- a/app/(application)/(user)/forum/[id]/other-report-posting.tsx
+++ b/app/(application)/(user)/forum/[id]/other-report-posting.tsx
@@ -0,0 +1,32 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+export default function ForumOtherReportPosting() {
+  const handleSubmit = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        backgroundColor={MainColor.red}
+        textColor={MainColor.white}
+        onPress={() => {
+          console.log("Report lainnya");
+          router.back();
+        }}
+      >
+        Report
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+  return (
+    <>
+      <ViewWrapper footerComponent={handleSubmit}>
+        <TextAreaCustom placeholder="Laporkan Diskusi" />
+      </ViewWrapper>
+    </>
+  );
+}
--- a/app/(application)/(user)/forum/[id]/report-commentar.tsx
+++ b/app/(application)/(user)/forum/[id]/report-commentar.tsx
@@ -0,0 +1,42 @@
+import {
+    ButtonCustom,
+    Spacing,
+    StackCustom,
+    ViewWrapper
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
+import { router } from "expo-router";
+
+export default function ForumReportCommentar() {
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <Forum_ReportListSection />
+          <ButtonCustom
+            backgroundColor={MainColor.red}
+            textColor={MainColor.white}
+            onPress={() => {
+              console.log("Report");
+              router.back();
+            }}
+          >
+            Report
+          </ButtonCustom>
+          <ButtonCustom
+            backgroundColor={AccentColor.blue}
+            textColor={MainColor.white}
+            onPress={() => {
+              console.log("Lainnya");
+              router.replace("/forum/[id]/other-report-commentar");
+            }}
+          >
+            Lainnya
+          </ButtonCustom>
+          <Spacing/>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
--- a/app/(application)/(user)/forum/[id]/report-posting.tsx
+++ b/app/(application)/(user)/forum/[id]/report-posting.tsx
@@ -0,0 +1,37 @@
+import { ViewWrapper, StackCustom, ButtonCustom, Spacing } from "@/components";
+import { MainColor, AccentColor } from "@/constants/color-palet";
+import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
+import { router } from "expo-router";
+
+export default function ForumReportPosting() {
+    return (
+      <>
+        <ViewWrapper>
+          <StackCustom>
+            <Forum_ReportListSection />
+            <ButtonCustom
+              backgroundColor={MainColor.red}
+              textColor={MainColor.white}
+              onPress={() => {
+                console.log("Report");
+                router.back();
+              }}
+            >
+              Report
+            </ButtonCustom>
+            <ButtonCustom
+              backgroundColor={AccentColor.blue}
+              textColor={MainColor.white}
+              onPress={() => {
+                console.log("Lainnya");
+                router.replace("/forum/[id]/other-report-posting");
+              }}
+            >
+              Lainnya
+            </ButtonCustom>
+            <Spacing />
+          </StackCustom>
+        </ViewWrapper>
+      </>
+    );
+}
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { DrawerCustom } from "@/components";
+import { AlertCustom, DrawerCustom } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
@@ -7,13 +7,14 @@ import Portofolio_MenuDrawerSection from "@/screens/Portofolio/MenuDrawer";
 import PorfofolioSection from "@/screens/Portofolio/PorfofolioSection";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { Stack, useLocalSearchParams, router } from "expo-router";
 import { useState } from "react";
 import { TouchableOpacity } from "react-native";

 export default function Portofolio() {
  const { id } = useLocalSearchParams();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);

  const openDrawer = () => {
    setIsDrawerOpen(true);
@@ -42,7 +43,7 @@ export default function Portofolio() {
            headerTitleStyle: GStyles.headerTitleStyle,
          }}
        />
-        <PorfofolioSection />
+        <PorfofolioSection setShowDeleteAlert={setDeleteAlert} />
      </ViewWrapper>

      {/* Drawer Komponen Eksternal */}
@@ -56,6 +57,22 @@ export default function Portofolio() {
          setIsDrawerOpen={setIsDrawerOpen}
        />
      </DrawerCustom>
+
+      {/* Alert Delete */}
+      <AlertCustom
+        isVisible={deleteAlert}
+        onLeftPress={() => setDeleteAlert(false)}
+        onRightPress={() => {
+          setDeleteAlert(false);
+          console.log("Hapus portofolio");
+          router.back();
+        }}
+        title="Hapus Portofolio"
+        message="Apakah Anda yakin ingin menghapus portofolio ini?"
+        textLeft="Batal"
+        textRight="Hapus"
+        colorRight={MainColor.red}
+      />
    </>
  );
 }
--- a/app/(application)/(user)/profile/[id]/create.tsx
+++ b/app/(application)/(user)/profile/[id]/create.tsx
@@ -103,14 +103,7 @@ export default function CreateProfile() {
          required
          onChange={(value) => setData({ ...(data as any), gender: value })}
        />
-        <TextInputCustom
-          required
-          label="Alamat"
-          placeholder="Masukkan alamat"
-          value={data.address}
-          onChangeText={(text) => setData({ ...data, address: text })}
-        />
-        {/* <Spacing /> */}
+        <Spacing />
      </StackCustom>
    </ViewWrapper>
  );
--- a/app/(application)/(user)/profile/[id]/edit.tsx
+++ b/app/(application)/(user)/profile/[id]/edit.tsx
@@ -22,15 +22,8 @@ export default function ProfileEdit() {
  });

  const options = [
-    { label: "React", value: "react" },
-    { label: "Vue", value: "vue" },
-    { label: "Angular", value: "angular" },
-    { label: "Svelte", value: "svelte" },
-    { label: "Next.js", value: "nextjs" },
-    { label: "Nuxt.js", value: "nuxtjs" },
-    { label: "Remix", value: "remix" },
-    { label: "Sapper", value: "sapper" },
-    { label: "SvelteKit", value: "sveltekit" },
+    { label: "Laki-laki", value: "laki-laki" },
+    { label: "Perempuan", value: "perempuan" },
  ];

  const handleSave = () => {
@@ -59,16 +52,6 @@ export default function ProfileEdit() {
      }
    >
      <StackCustom gap={"xs"}>
-        <SelectCustom
-          label="Framework"
-          placeholder="Pilih framework favoritmu"
-          data={options}
-          value={data.selectedValue}
-          onChange={(value) => {
-            setData({ ...(data as any), selectedValue: value });
-          }}
-        />
-
        <TextInputCustom
          label="Nama"
          placeholder="Nama"
@@ -96,6 +79,16 @@ export default function ProfileEdit() {
          }}
          required
        />
+        <SelectCustom
+          required
+          label="Jenis Kelamin"
+          placeholder="Pilih jenis kelamin"
+          data={options}
+          value={data.selectedValue}
+          onChange={(value) => {
+            setData({ ...(data as any), selectedValue: value });
+          }}
+        />
      </StackCustom>
    </ViewWrapper>
  );
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
      "name": "hipmi-mobile",
      "dependencies": {
        "@expo/vector-icons": "^14.1.0",
+        "@react-native-community/datetimepicker": "8.4.1",
        "@react-navigation/bottom-tabs": "^7.4.2",
        "@react-navigation/drawer": "^7.5.2",
        "@react-navigation/elements": "^2.3.8",
@@ -372,6 +373,8 @@

    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w=="],

+    "@react-native-community/datetimepicker": ["@react-native-community/datetimepicker@8.4.1", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": ">=52.0.0", "react": "*", "react-native": "*", "react-native-windows": "*" }, "optionalPeers": ["expo", "react-native-windows"] }, "sha512-DrK+CUS5fZnz8dhzBezirkzQTcNDdaXer3oDLh0z4nc2tbdIdnzwvXCvi8IEOIvleoc9L95xS5tKUl0/Xv71Mg=="],
+
    "@react-native/assets-registry": ["@react-native/assets-registry@0.79.5", "", {}, "sha512-N4Kt1cKxO5zgM/BLiyzuuDNquZPiIgfktEQ6TqJ/4nKA8zr4e8KJgU6Tb2eleihDO4E24HmkvGc73naybKRz/w=="],

    "@react-native/babel-plugin-codegen": ["@react-native/babel-plugin-codegen@0.79.5", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@react-native/codegen": "0.79.5" } }, "sha512-Rt/imdfqXihD/sn0xnV4flxxb1aLLjPtMF1QleQjEhJsTUPpH4TFlfOpoCvsrXoDl4OIcB1k4FVM24Ez92zf5w=="],
--- a/components/DateInput/DataTimeAndroid.tsx
+++ b/components/DateInput/DataTimeAndroid.tsx
@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// DateTimeInput.tsx
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import React, { useCallback, useState } from "react";
+import { Pressable, StyleProp, Text, View, ViewStyle } from "react-native";
+import Grid from "../Grid/GridCustom";
+import TextCustom from "../Text/TextCustom";
+
+interface DateTimeInputProps {
+  // Main
+  value?: DateTimePickerEvent;
+  mode?: "date" | "time";
+  onChange: (selectedDate: DateTimePickerEvent) => void;
+  maximumDate?: Date;
+  minimumDate?: Date;
+  // Main
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  iconLeft?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  borderRadius?: number;
+  externalError?: string;
+  internalError?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
+  // Main
+  value,
+  mode,
+  onChange,
+  maximumDate,
+  minimumDate,
+  // Main
+  label,
+  required,
+  disabled,
+  iconLeft,
+  style,
+  borderRadius = 8,
+  externalError,
+  internalError,
+  containerStyle,
+}) => {
+  const [showDate, setShowDate] = useState(false);
+  const [showTime, setShowTime] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date>(value as any);
+  const [selectedTime, setSelectedTime] = useState<Date>(value as any);
+
+  // Fungsi untuk menggabungkan tanggal dan waktu
+  const combineDateAndTime = useCallback((date: Date, time: Date): Date => {
+    const combined = new Date(date);
+    combined.setHours(
+      time.getHours(),
+      time.getMinutes(),
+      time.getSeconds(),
+      time.getMilliseconds()
+    );
+    return combined;
+  }, []);
+
+  // Handler untuk tanggal
+  const handleConfirmDate = (event: DateTimePickerEvent, date?: Date) => {
+    if (event.type === "set" && date) {
+      setSelectedDate(date);
+      if (selectedTime) {
+        const combined = combineDateAndTime(date, selectedTime);
+        onChange?.(combined as any);
+      }
+    }
+    setShowDate(false);
+  };
+
+  // Handler untuk waktu
+  const handleConfirmTime = (event: DateTimePickerEvent, time?: Date) => {
+    if (event.type === "set" && time) {
+      setSelectedTime(time);
+      if (selectedDate) {
+        const combined = combineDateAndTime(selectedDate, time);
+        onChange?.(combined as any);
+      }
+    }
+    setShowTime(false);
+  };
+
+  const toggleDatePicker = () => {
+    setShowDate(!showDate);
+  };
+
+  const toggleTimePicker = () => {
+    setShowTime(!showTime);
+  };
+
+  return (
+    <>
+      <View style={[GStyles.inputContainerArea, containerStyle]}>
+        {label && (
+          <Text style={GStyles.inputLabel}>
+            {label}
+            {required && <Text style={GStyles.inputRequired}> *</Text>}
+          </Text>
+        )}
+        <View
+          style={[
+            style,
+            { borderRadius },
+            externalError || internalError ? GStyles.inputErrorBorder : null,
+            GStyles.inputContainerInput,
+            disabled && GStyles.disabledBox,
+          ]}
+        >
+          <View style={GStyles.inputIcon}>
+            <Ionicons
+              name="calendar-outline"
+              size={20}
+              color={MainColor.placeholder}
+            />
+          </View>
+
+          <Grid
+            containerStyle={{
+              borderRadius: 8,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Grid.Col span={6} style={{}}>
+              <Pressable onPress={toggleDatePicker}>
+                <TextCustom color="gray">
+                  {selectedDate ? (
+                    <TextCustom color="black">
+                      {selectedDate.toLocaleDateString()}
+                    </TextCustom>
+                  ) : (
+                    "Pilih tanggal"
+                  )}
+                </TextCustom>
+              </Pressable>
+            </Grid.Col>
+            <Grid.Col span={1} style={{ alignItems: "center" }}>
+              <TextCustom color="gray">|</TextCustom>
+            </Grid.Col>
+
+            <Grid.Col span={5} style={{}}>
+              <Pressable onPress={toggleTimePicker}>
+                <TextCustom color="gray">
+                  {selectedTime ? (
+                    <TextCustom color="black">
+                      {selectedTime.toLocaleTimeString("id-ID", {
+                        minute: "2-digit",
+                        hour: "2-digit",
+                      })}
+                    </TextCustom>
+                  ) : (
+                    "Pilih waktu"
+                  )}
+                </TextCustom>
+              </Pressable>
+            </Grid.Col>
+          </Grid>
+        </View>
+        {externalError ||
+          (internalError && (
+            <Text style={GStyles.inputErrorMessage}>
+              {externalError || internalError}
+            </Text>
+          ))}
+      </View>
+
+      {showDate && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={selectedDate || new Date()}
+          mode="date"
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirmDate}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
+        />
+      )}
+
+      {showTime && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={selectedTime || new Date()}
+          mode="time"
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirmTime}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
+        />
+      )}
+    </>
+  );
+};
+
+export default DateTimeInput_Android;
--- a/components/DateInput/DateTimeIOS.tsx
+++ b/components/DateInput/DateTimeIOS.tsx
@@ -0,0 +1,161 @@
+// DateTimeInput.tsx
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import DateTimePicker, {
+    DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import dayjs from "dayjs";
+import React, { useState } from "react";
+import {
+    StyleProp,
+    Text,
+    View,
+    ViewStyle
+} from "react-native";
+import ClickableCustom from "../Clickable/ClickableCustom";
+import TextCustom from "../Text/TextCustom";
+
+interface DateTimeInputProps {
+  // Main
+  value?: DateTimePickerEvent;
+  mode?: "date" | "time";
+  onChange: (selectedDate: DateTimePickerEvent) => void;
+  maximumDate?: Date;
+  minimumDate?: Date;
+  // Main
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  iconLeft?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  borderRadius?: number;
+  externalError?: string;
+  internalError?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
+  // Main
+  value,
+  mode,
+  onChange,
+  maximumDate,
+  minimumDate,
+  // Main
+  label,
+  required,
+  disabled,
+  iconLeft,
+  style,
+  borderRadius = 8,
+  externalError,
+  internalError,
+  containerStyle,
+}) => {
+  const [show, setShow] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    value as any
+  );
+
+  const handleConfirm = (event: any, date?: Date) => {
+    if (event.type === "set" && date !== undefined) {
+      setSelectedDate(date);
+      onChange(date as any);
+    }
+  };
+
+  const handlePress = () => {
+    setShow(!show);
+  };
+
+  return (
+    <>
+      <ClickableCustom
+        activeOpacity={0.8}
+        style={[GStyles.inputContainerArea, containerStyle]}
+        onPress={handlePress}
+      >
+        {label && (
+          <Text style={GStyles.inputLabel}>
+            {label}
+            {required && <Text style={GStyles.inputRequired}> *</Text>}
+          </Text>
+        )}
+        <View
+          style={[
+            style,
+            { borderRadius },
+            externalError || internalError ? GStyles.inputErrorBorder : null,
+            GStyles.inputContainerInput,
+            disabled && GStyles.disabledBox,
+          ]}
+        >
+          <View style={GStyles.inputIcon}>
+            <Ionicons
+              name="calendar-outline"
+              size={20}
+              color={MainColor.placeholder}
+            />
+          </View>
+
+          <TextCustom color="gray">
+            {selectedDate ? (
+              <TextCustom color="black">
+                {dayjs(selectedDate).format("DD-MM-YYYY HH:mm")}
+              </TextCustom>
+            ) : (
+              "Pilih tanggal"
+            )}
+          </TextCustom>
+        </View>
+        {externalError ||
+          (internalError && (
+            <Text style={GStyles.inputErrorMessage}>
+              {externalError || internalError}
+            </Text>
+          ))}
+      </ClickableCustom>
+
+      {show && (
+        <>
+          <View
+            style={{
+              position: "absolute",
+              zIndex: 15,
+              backgroundColor: "white",
+              borderRadius: 8,
+              padding: 10,
+              // top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              borderColor: "#ccc",
+              borderWidth: 1,
+            }}
+          >
+            <View style={{ alignItems: "flex-end" }}>
+              <Ionicons
+                name="close"
+                size={20}
+                color="black"
+                onPress={() => setShow(false)}
+              />
+            </View>
+
+            <DateTimePicker
+              value={selectedDate || new Date()}
+              mode={"datetime"}
+              display="inline"
+              onChange={handleConfirm}
+              minimumDate={minimumDate}
+              maximumDate={maximumDate}
+            />
+          </View>
+        </>
+      )}
+    </>
+  );
+};
+
+export default DateTimeInput_IOS;
--- a/components/DateInput/DateTimePickerCustom.tsx
+++ b/components/DateInput/DateTimePickerCustom.tsx
@@ -0,0 +1,54 @@
+
+import {
+  DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import React from "react";
+import { Platform } from "react-native";
+import DateTimeInput_Android from "./DataTimeAndroid";
+import DateTimeInput_IOS from "./DateTimeIOS";
+
+type Props = {
+  value?: Date;
+  onChange?: (date: Date) => void;
+  label?: string;
+  required?: boolean;
+  maximumDate?: Date;
+  minimumDate?: Date;
+};
+
+const DateTimePickerCustom: React.FC<Props> = ({
+  value,
+  onChange,
+  label,
+  required,
+  maximumDate,
+  minimumDate,
+}) => {
+  return (
+    <>
+      {Platform.OS === "ios" ? (
+        <DateTimeInput_IOS
+          label={label}
+          onChange={(date: DateTimePickerEvent) => {
+            onChange?.(date as any);
+          }}
+          required={required}
+          maximumDate={maximumDate}
+          minimumDate={minimumDate}
+        />
+      ) : (
+        <DateTimeInput_Android
+          label={label}
+          onChange={(date: DateTimePickerEvent) => {
+            onChange?.(date as any);
+          }}
+          required={required}
+          maximumDate={maximumDate}
+          minimumDate={minimumDate}
+        />
+      )}
+    </>
+  );
+};
+
+export default DateTimePickerCustom;
--- a/components/DateInput/DateTimeTry.tsx
+++ b/components/DateInput/DateTimeTry.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Pressable, Text, StyleSheet } from "react-native";
+import DateTimePicker, { Event } from "@react-native-community/datetimepicker";
+
+type Props = {
+  value?: Date;
+  mode?: "date" | "time" | "datetime";
+  onChange: (date: Date) => void;
+};
+
+const DateTimePickerTry: React.FC<Props> = ({
+  value = new Date(),
+  mode = "date",
+  onChange,
+}) => {
+  const [show, setShow] = useState(false);
+
+  const toggleDatePicker = () => {
+    setShow(!show);
+  };
+
+  const handleConfirm = (event: Event, selectedDate?: Date) => {
+    if (event.type === "set" && selectedDate !== undefined) {
+      onChange(selectedDate);
+    }
+    setShow(false);
+  };
+
+  return (
+    <>
+      <Pressable onPress={toggleDatePicker} style={styles.button}>
+        <Text style={styles.buttonText}>
+          {value ? value.toLocaleDateString() : "Pilih tanggal"}
+        </Text>
+      </Pressable>
+
+      {show && (
+        <DateTimePicker
+        //   style={styles.button}
+          textColor="white"
+          testID="dateTimePicker"
+          value={value}
+          mode={mode}
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirm as any}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    backgroundColor: "white",
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 10,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});
+
+export default DateTimePickerTry;
--- a/components/Radio/RadioCustom.tsx
+++ b/components/Radio/RadioCustom.tsx
@@ -0,0 +1,132 @@
+// components/Radio.tsx
+import { GStyles } from '@/styles/global-styles';
+import React, { createContext, useCallback, useContext } from 'react';
+import {
+    StyleSheet,
+    Text,
+    TextStyle,
+    TouchableOpacity,
+    View,
+    ViewStyle
+} from 'react-native';
+
+// ========================
+// Types
+// ========================
+
+type RadioContextType = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+const RadioContext = createContext<RadioContextType | undefined>(undefined);
+
+interface RadioGroupProps {
+  value: string;
+  onChange: (value: string) => void;
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+interface RadioProps {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+}
+
+// ========================
+// Components
+// ========================
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({ value, onChange, children, style }) => {
+  const contextValue = {
+    value,
+    onChange,
+  };
+
+  return <RadioContext.Provider value={contextValue}>{children}</RadioContext.Provider>;
+};
+
+export const RadioCustom: React.FC<RadioProps> = ({ label, value, disabled = false, style, labelStyle }) => {
+  const context = useContext(RadioContext);
+  if (!context) {
+    throw new Error('Radio must be used inside a RadioGroup');
+  }
+
+  const { value: selectedValue, onChange } = context;
+
+  const handlePress = useCallback(() => {
+    if (!disabled && selectedValue !== value) {
+      onChange(value as any);
+    }
+  }, [disabled, selectedValue, value, onChange]);
+
+  const isSelected = selectedValue === value;
+
+  return (
+    <TouchableOpacity
+      style={[styles.radioContainer, style]}
+      onPress={handlePress}
+      disabled={disabled}
+    >
+      {/* Circle */}
+      <View
+        style={[styles.outerCircle, isSelected && styles.outerCircleChecked]}
+      >
+        <View
+          style={[styles.innerCircle, isSelected && styles.innerCircleChecked]}
+        />
+      </View>
+
+      {/* Label */}
+      <Text
+        style={[
+          GStyles.textLabelBold,
+          labelStyle,
+          disabled && GStyles.inputTextDisabled,
+        ]}
+      >
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+// ========================
+// Styles
+// ========================
+
+const styles = StyleSheet.create({
+  radioContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 8,
+  },
+  outerCircle: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#3B82F6',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  outerCircleChecked: {
+    backgroundColor: '#3B82F6',
+  },
+  innerCircle: {
+    height: 12,
+    width: 12,
+    borderRadius: 6,
+    backgroundColor: 'transparent',
+  },
+  innerCircleChecked: {
+    backgroundColor: 'white',
+    borderColor: 'white',
+    borderRadius: 6,
+  },
+  
+});
--- a/components/Text/TextCustom.tsx
+++ b/components/Text/TextCustom.tsx
@@ -22,7 +22,7 @@ interface TextCustomProps {
  bold?: boolean;
  semiBold?: boolean;
  size?: "default" | "large" | "small";
-  color?: "default" | "yellow" | "red" | "gray" | "green";
+  color?: "default" | "yellow" | "red" | "gray" | "green" | "black"
  align?: TextAlign; // Prop untuk alignment
  truncate?: boolean | number;
  onPress?: () => void;
@@ -58,6 +58,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
    else if (color === "red") selectedStyles.push(styles.red);
    else if (color === "gray") selectedStyles.push(styles.gray);
    else if (color === "green") selectedStyles.push(styles.green);
+    else if (color === "black") selectedStyles.push(styles.black);

    // Alignment
    if (align) {
@@ -130,4 +131,7 @@ export const styles = StyleSheet.create({
  green: {
    color: MainColor.green,
  },
+  black: {
+    color: MainColor.black,
+  },
 });
--- a/components/TextArea/TextAreaCustom.tsx
+++ b/components/TextArea/TextAreaCustom.tsx
@@ -1,11 +1,11 @@
 import { GStyles } from "@/styles/global-styles";
 import React, { useEffect, useState } from "react";
 import {
-    TextInput as RNTextInput,
-    StyleProp,
-    Text,
-    View,
-    ViewStyle,
+  TextInput as RNTextInput,
+  StyleProp,
+  Text,
+  View,
+  ViewStyle,
 } from "react-native";

 type IconType = React.ReactNode | string;
@@ -79,7 +79,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
  };

  return (
-    <View style={GStyles.inputContainerArea}>
+    <View style={[GStyles.inputContainerArea]}>
      {label && (
        <Text style={GStyles.inputLabel}>
          {label}
@@ -105,7 +105,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
          multiline
          numberOfLines={numberOfLines}
          style={[
-            GStyles.inputText,
+            // GStyles.inputText,
            GStyles.textAreaInput,
            { color: fontColor },
          ]}
--- a/components/_ShareComponent/ViewWrapper.tsx
+++ b/components/_ShareComponent/ViewWrapper.tsx
@@ -1,4 +1,5 @@
 import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
 import { GStyles } from "@/styles/global-styles";
 import {
  ImageBackground,
@@ -71,6 +72,7 @@ const ViewWrapper = ({
            edges={["bottom"]}
            style={{
              backgroundColor: MainColor.darkblue,
+              height: OS_HEIGHT
            }}
          >
            {footerComponent}
--- a/constants/constans-value.ts
+++ b/constants/constans-value.ts
@@ -1,4 +1,9 @@
+import { Platform } from "react-native";
+
 export {
+  OS_ANDROID_HEIGHT,
+  OS_IOS_HEIGHT,
+  OS_HEIGHT,
  TEXT_SIZE_SMALL,
  TEXT_SIZE_MEDIUM,
  TEXT_SIZE_LARGE,
@@ -13,6 +18,11 @@ export {
  PADDING_LARGE,
 };

+// OS Height
+const OS_ANDROID_HEIGHT = 115
+const OS_IOS_HEIGHT = 65
+const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
+
 // Text Size
 const TEXT_SIZE_SMALL = 12;
 const TEXT_SIZE_MEDIUM = 14;
--- a/lib/dummy-data/event/master-type-event.tsx
+++ b/lib/dummy-data/event/master-type-event.tsx
@@ -0,0 +1,8 @@
+export const masterTypeEvent = [
+  { label: "Seminar", value: "seminar" },
+  { label: "Workshop", value: "workshop" },
+  { label: "Lomba", value: "lomba" },
+  { label: "Pameran", value: "pameran" },
+  { label: "Kegiatan Sosial", value: "kegiatan_sosial" },
+  { label: "Musyawarah", value: "musyawarah" },
+];
--- a/lib/dummy-data/forum/report-list.tsx
+++ b/lib/dummy-data/forum/report-list.tsx
@@ -0,0 +1,26 @@
+export const listDummyReportForum = [
+  {
+    title: "Kebencian",
+    desc: "Cercaan, Stereotip rasis atau seksis, Dehumanisasi, Menyulut ketakutan atau diskriminasi, Referensi kebencian, Simbol & logo kebencian",
+  },
+  {
+    title: "Penghinaan & Pelecehan secara Online",
+    desc: "Penghinaan, Konten Seksual yang Tidak Diinginkan, Penyangkalan Peristiwa Kekerasan, Pelecehan Bertarget dan Memprovokasi Pelecehan",
+  },
+  {
+    title: "Tutur Kekerasan",
+    desc: "Ancaman Kekerasan, Berharap Terjadinya Celaka, Mengagungkan Kekerasan, Penghasutan Kekerasan, Penghasutan Kekerasan dengan Kode",
+  },
+  {
+    title: "Keselamatan Anak",
+    desc: "Eksploitasi seks anak di bawah umur, grooming, kekerasan fisik terhadap anak, pengguna di bawah umur",
+  },
+  {
+    title: "Privasi",
+    desc: "Membagikan informasi pribadi, mengancam akan membagikan/menyebarkan informasi pribadi, membagikan gambar intim tanpa persetujuan, membagikan gambar saya yang tidak saya kehendaki di platform ini",
+  },
+  {
+    title: "Spam",
+    desc: "Akun palsu, penipuan keuangan, memposting tautan berbahaya, menyalahgunakan hashtag, keterlibatan palsu, balasan berulang, Posting Ulang, atau Direct Message",
+  },
+];
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
  },
  "dependencies": {
    "@expo/vector-icons": "^14.1.0",
+    "@react-native-community/datetimepicker": "8.4.1",
    "@react-navigation/bottom-tabs": "^7.4.2",
    "@react-navigation/drawer": "^7.5.2",
    "@react-navigation/elements": "^2.3.8",
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -32,10 +32,11 @@ export default function LoginView() {

    // router.navigate("/verification");
    // router.navigate(`/(application)/(user)/profile/${id}`);
-    router.navigate("/(application)/(user)/home");
+    // router.navigate("/(application)/(user)/home");
    // router.navigate(`/(application)/profile/${id}/edit`);
    // router.navigate(`/(application)/(user)/portofolio/${id}`)
    // router.navigate(`/(application)/(image)/preview-image/${id}`);
+    router.replace("/(application)/(user)/event/(tabs)");
  }

  return (
--- a/screens/Authentication/RegisterView.tsx
+++ b/screens/Authentication/RegisterView.tsx
@@ -1,7 +1,7 @@
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
-import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
+import TextInputCustom from "@/components/TextInput/TextInputCustom";
 import { MainColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
--- a/screens/Forum/CommentarBoxSection.tsx
+++ b/screens/Forum/CommentarBoxSection.tsx
@@ -1,10 +1,10 @@
 import {
-  BaseBox,
-  Grid,
  AvatarCustom,
-  TextCustom,
+  BaseBox,
  ClickableCustom,
+  Grid,
  Spacing,
+  TextCustom,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -14,11 +14,9 @@ import { View } from "react-native";
 export default function Forum_CommentarBoxSection({
  data,
  setOpenDrawer,
-  setStatus,
 }: {
  data: any;
  setOpenDrawer: (value: boolean) => void;
-  setStatus: (value: string) => void;
 }) {
  return (
    <>
@@ -46,7 +44,6 @@ export default function Forum_CommentarBoxSection({
              <ClickableCustom
                onPress={() => {
                  setOpenDrawer(true);
-                  setStatus(data.status);
                }}
                style={{
                  alignItems: "flex-end",
--- a/screens/Forum/ListPage.tsx
+++ b/screens/Forum/ListPage.tsx
@@ -2,7 +2,7 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Feather, Ionicons } from "@expo/vector-icons";

-export { drawerItemsForumBeranda };
+export { drawerItemsForumBeranda, drawerItemsForumComentar };

 const drawerItemsForumBeranda = ({
  id,
@@ -11,6 +11,15 @@ const drawerItemsForumBeranda = ({
  id: string;
  status: string;
 }) => [
+  {
+    icon: (
+      <Ionicons name="flag" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Laporkan diskusi",
+    // color: MainColor.white,
+    path: `/forum/${id}/report-posting`,
+  },
+    
  {
    icon: (
      <Feather name="edit" size={ICON_SIZE_SMALL} color={MainColor.white} />
@@ -21,14 +30,14 @@ const drawerItemsForumBeranda = ({
  {
    icon:
      status === "Open" ? (
-        <Ionicons name="open" size={ICON_SIZE_SMALL} color={MainColor.white} />
-      ) : (
        <Ionicons name="close" size={ICON_SIZE_SMALL} color={MainColor.white} />
+      ) : (
+        <Ionicons name="open" size={ICON_SIZE_SMALL} color={MainColor.white} />
      ),

-    label: status === "Open" ? "Buka forum" : "Tutup forum",
+    label: status === "Open" ? "Tutup forum" : "Buka forum",
    path: "",
-    color: status === "Open" ? MainColor.green : MainColor.orange,
+    color: status === "Open" ? MainColor.orange : MainColor.green,
  },
  {
    icon: (
@@ -39,3 +48,22 @@ const drawerItemsForumBeranda = ({
    color: MainColor.red,
  },
 ];
+
+const drawerItemsForumComentar = ({ id }: { id: string }) => [
+  {
+    icon: (
+      <Ionicons name="flag" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Laporkan",
+    // color: MainColor.white,
+    path: `/forum/${id}/report-commentar`,
+  },
+  {
+    icon: (
+      <Ionicons name="trash" size={ICON_SIZE_SMALL} color={MainColor.white} />
+    ),
+    label: "Hapus",
+    color: MainColor.red,
+    path: "",
+  },
+];
--- a/screens/Forum/MenuDrawerSection.tsx/MenuCommentar.tsx
+++ b/screens/Forum/MenuDrawerSection.tsx/MenuCommentar.tsx
@@ -0,0 +1,33 @@
+import { MenuDrawerDynamicGrid } from "@/components";
+import { drawerItemsForumComentar } from "../ListPage";
+import { router } from "expo-router";
+
+export default function Forum_MenuDrawerCommentar({
+  id,
+  setShowDeleteAlert,
+  setIsDrawerOpen,
+}: {
+  id: string;
+  setShowDeleteAlert: (value: boolean) => void;
+  setIsDrawerOpen: (value: boolean) => void;
+}) {
+  const handlePress = (item: any) => {
+    if (item.label === "Hapus") {
+      setShowDeleteAlert(true);
+    } else {
+      router.push(item.path as any);
+    }
+
+    setIsDrawerOpen(false);
+  };
+
+  return (
+    <>
+      <MenuDrawerDynamicGrid
+        data={drawerItemsForumComentar({ id })}
+        columns={4}
+        onPressItem={handlePress}
+      />
+    </>
+  );
+}
--- a/screens/Forum/ReportListSection.tsx
+++ b/screens/Forum/ReportListSection.tsx
@@ -0,0 +1,41 @@
+import { BaseBox, ButtonCustom, StackCustom, TextCustom } from "@/components";
+import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
+import { MainColor } from "@/constants/color-palet";
+import { listDummyReportForum } from "@/lib/dummy-data/forum/report-list";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function Forum_ReportListSection() {
+  const [value, setValue] = useState<any | number>("");
+  return (
+    <>
+      <BaseBox>
+        <StackCustom>
+          <RadioGroup value={value} onChange={setValue}>
+            {listDummyReportForum.map((e, i) => (
+              <View key={i}>
+                <RadioCustom
+                  label={e.title}
+                  //  value={i}
+                  value={e.title}
+                />
+                <TextCustom>{e.desc}</TextCustom>
+              </View>
+            ))}
+          </RadioGroup>
+
+          {/* <ButtonCustom
+            backgroundColor={MainColor.red}
+            textColor={MainColor.white}
+            onPress={() => {
+              console.log("Report", value);
+            }}
+          >
+            Report
+          </ButtonCustom> */}
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}
--- a/screens/Portofolio/ButtonDelete.tsx
+++ b/screens/Portofolio/ButtonDelete.tsx
@@ -2,9 +2,13 @@ import { ButtonCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { Ionicons } from "@expo/vector-icons";

-export default function Portofolio_ButtonDelete() {
+export default function Portofolio_ButtonDelete({
+  setShowDeleteAlert,
+}: {
+  setShowDeleteAlert: (value: boolean) => void;
+}) {
  const handleDelete = () => {
-    console.log("Delete");
+    setShowDeleteAlert(true);
  };
  return (
    <ButtonCustom textColor={MainColor.white} iconLeft={<Ionicons name="trash-outline" size={20} color="white" />} onPress={handleDelete} backgroundColor={MainColor.red}>
--- a/screens/Portofolio/PorfofolioSection.tsx
+++ b/screens/Portofolio/PorfofolioSection.tsx
@@ -4,13 +4,17 @@ import Portofolio_Data from "./DataPortofolio";
 import Portofolio_SocialMediaSection from "./SocialMediaSection";
 import Portofolio_ButtonDelete from "./ButtonDelete";

-export default function PorfofolioSection() {
+export default function PorfofolioSection({
+  setShowDeleteAlert,
+}: {
+  setShowDeleteAlert: (value: boolean) => void;
+}) {
  return (
    <StackCustom>
      <Portofolio_Data />
      <Portofolio_BusinessLocation />
      <Portofolio_SocialMediaSection />
-      <Portofolio_ButtonDelete/>
+      <Portofolio_ButtonDelete setShowDeleteAlert={setShowDeleteAlert}/>
      <Spacing/>
    </StackCustom>
  );
--- a/styles/global-styles.ts
+++ b/styles/global-styles.ts
@@ -44,17 +44,16 @@ export const GStyles = StyleSheet.create({
  },
  floatingContainer: {
    position: "absolute",
-    bottom: 80,
+    bottom: 100,
    right: 20,
    zIndex: 8,
  },

-  // Style saat disabled
+  // =============== Disabled Styles =============== //
  disabledBox: {
    backgroundColor: MainColor.disabled,
    borderColor: AccentColor.disabledBorder,
  },
-
  inputDisabled: {
    backgroundColor: "#f0f0f0",
    borderColor: "#ddd",
@@ -65,7 +64,7 @@ export const GStyles = StyleSheet.create({
  inputPlaceholderDisabled: {
    color: "#444",
  },
-  // =============== Main Styles =============== //
+  // =============== Disabled Styles =============== //

  // =============== AUTHENTICATION =============== //
  authContainer: {
@@ -94,6 +93,11 @@ export const GStyles = StyleSheet.create({
    color: MainColor.white_gray,
    fontWeight: "normal",
  },
+  textLabelBold: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    color: MainColor.white_gray,
+    fontWeight: "bold",
+  },
  // =============== TEXT & LABEL =============== //

  // =============== STACK HEADER =============== //
@@ -284,8 +288,10 @@ export const GStyles = StyleSheet.create({
  //  TextArea untuk tambahan
  textAreaInput: {
    textAlignVertical: "top",
-    padding: 5,
-    height: undefined, // biar multiline bebas tinggi
+    paddingTop: 10,
+    // height: undefined, // biar multiline bebas tinggi
+    height: 100,
+    width: "100%",
  },

  // Select
Author	SHA1	Message	Date
Bagasbanuna02	b8b1efc71e	Deskripsi: - New component: Datetime custom, datetime android, datetime ios - Fix: event create input datetime # No Issue	2025-07-18 11:48:24 +08:00
Bagasbanuna02	eaf0ebfb0a	feature Deskripsi: try component: Date input	2025-07-17 17:21:31 +08:00
Bagasbanuna02	e68d366d49	Deskripsi: Fix: ViewWrapper tinggi footer Style: Constan value untuk tinggi footer per OS # No Issue	2025-07-15 15:30:11 +08:00
Bagasbanuna02	9999f78ed4	deskripsi: Feat: event create Fix: tabs event # No Issue	2025-07-15 15:21:41 +08:00
Bagasbanuna02	2be5afe5ca	Fix: register text input	2025-07-15 14:15:33 +08:00
Bagasbanuna02	24913a9f97	deskripsi: Fix: portofolio: alert hapus porto Fix: profile create hapus text input alamat & edit ganti select jenis kelamin Fix: menu forum Fix: button porto # No Issue	2025-07-15 14:13:08 +08:00
Bagasbanuna02	3376336c55	Deskripsi: - new comp : Radio - fix comp : Text area > placeholder diatas - fix page : report forum sudah pakai radio # No Issue	2025-07-15 12:01:28 +08:00
Bagasbanuna02	a0dad5618a	feature Desskripsi: - new page: other-report-commentar, other-report-posting, report-commentar, report-posting # No Issue	2025-07-15 11:24:57 +08:00