Event

Fix: Intergrasi tampilan ke API Package.json Fix: Pem baharuan SDK53 -> SDK54 ### No Issue
Event
2025-09-12 15:57:30 +08:00 · 2025-09-12 14:14:37 +08:00 · 2025-09-11 17:34:08 +08:00
23 changed files with 1459 additions and 18642 deletions
--- a/app.config.js
+++ b/app.config.js
@@ -36,6 +36,7 @@ export default {

  plugins: [
    'expo-router',
+    'expo-web-browser',
    [
      'expo-splash-screen',
      {
--- a/app/(application)/(user)/event/(tabs)/index.tsx
+++ b/app/(application)/(user)/event/(tabs)/index.tsx
@@ -1,9 +1,36 @@
+import { LoaderCustom, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import FloatingButton from "@/components/Button/FloatingButton";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
-import { router } from "expo-router";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";

 export default function EventBeranda() {
+  const [listData, setListData] = useState([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiEventGetAll();
+      // console.log("Response", JSON.stringify(response.data, null, 2));
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
  return (
    <ViewWrapper
      hideFooter
@@ -11,13 +38,24 @@ export default function EventBeranda() {
        <FloatingButton onPress={() => router.push("/event/create")} />
      }
    >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Event_BoxPublishSection
-          key={index}
-          id={index.toString()}
-          href={`/event/${index}/publish`}
-        />
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada event</TextCustom>
+      ) : (
+        listData.map((item: any, index) => (
+          <Event_BoxPublishSection
+            key={index}
+            href={`/event/${item.id}/publish`}
+            data={item}
+            rightComponentAvatar={
+              <TextCustom>
+                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+              </TextCustom>
+            }
+          />
+        ))
+      )}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/event/(tabs)/status.tsx
+++ b/app/(application)/(user)/event/(tabs)/status.tsx
@@ -1,27 +1,57 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BoxWithHeaderSection,
-    Grid,
-    ScrollableCustom,
-    StackCustom,
-    TextCustom
+  BoxWithHeaderSection,
+  Grid,
+  LoaderCustom,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { useState } from "react";
+import { apiEventGetByStatus } from "@/service/api-client/api-event";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";

 export default function EventStatus() {
-  const id = "test-id-event";
-
+  const { user } = useAuth();
+  const id = user?.id || "";
  const [activeCategory, setActiveCategory] = useState<string | null>(
    "publish"
  );
+  const [listData, setListData] = useState([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory, id])
+  );
+
+  async function onLoadData() {
+    try {
+      setLoadingGetData(true);
+      const response = await apiEventGetByStatus({
+        id: id!,
+        status: activeCategory!,
+      });
+      // console.log("Response", JSON.stringify(response.data, null, 2));
+      setListData(response.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  }

  const handlePress = (item: any) => {
    setActiveCategory(item.value);
    // tambahkan logika lain seperti filter dsb.
  };

-  const scrollComponent = (
+  const tabsComponent = (
    <ScrollableCustom
      data={dummyMasterStatus.map((e, i) => ({
        id: i,
@@ -34,30 +64,36 @@ export default function EventStatus() {
  );

  return (
-    <ViewWrapper headerComponent={scrollComponent}>
-      <BoxWithHeaderSection href={`/event/${id}/${activeCategory}/detail-event`}>
-        <StackCustom gap={"xs"}>
-          <Grid>
-            <Grid.Col span={8}>
-              <TextCustom truncate bold>
-                Lorem ipsum,{" "}
-                <TextCustom color="green">{activeCategory}</TextCustom> dolor
-                sit amet consectetur adipisicing elit.
-              </TextCustom>
-            </Grid.Col>
-            <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-              <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
-            </Grid.Col>
-          </Grid>
+    <ViewWrapper headerComponent={tabsComponent}>
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((item: any, i) => (
+          <BoxWithHeaderSection
+            key={i}
+            href={`/event/${item.id }/${activeCategory}/detail-event`}
+          >
+            <StackCustom gap={"xs"}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom>
+                    {new Date(item?.tanggal).toLocaleDateString()}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>

-          <TextCustom truncate={2}>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
-            eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora,
-            atque. Aperiam minima asperiores dicta perferendis quis adipisci,
-            dolore optio porro!
-          </TextCustom>
-        </StackCustom>
-      </BoxWithHeaderSection>
+              <TextCustom truncate={2}>{item?.deskripsi}</TextCustom>
+            </StackCustom>
+          </BoxWithHeaderSection>
+        ))
+      )}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/event/[id]/[status]/detail-event.tsx
+++ b/app/(application)/(user)/event/[id]/[status]/detail-event.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BaseBox,
  DotButton,
@@ -11,17 +12,64 @@ import {
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
-import Event_AlertButtonStatusSection from "@/screens/Event/AlertButtonStatusSection";
 import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
 import { menuDrawerDraftEvent } from "@/screens/Event/menuDrawerDraft";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiEventGetOne } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";

 export default function EventDetailStatus() {
  const { id, status } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = useState(false);
-  const [openAlert, setOpenAlert] = useState(false);
-  const [openDeleteAlert, setOpenDeleteAlert] = useState(false);
+  // const [openAlert, setOpenAlert] = useState(false);
+
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  async function onLoadData() {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  }
+
+  const listData = [
+    {
+      title: "Lokasi",
+      value: data?.lokasi || "-",
+    },
+    {
+      title: "Tipe Acara",
+      value: data?.EventMaster_TipeAcara?.name || "-",
+    },
+    {
+      title: "Tanggal Mulai",
+      value: dateTimeView({ date: data?.tanggal }) || "-",
+    },
+    {
+      title: "Tanggal Berakhir",
+      value: dateTimeView({ date: data?.tanggalSelesai }) || "-",
+    },
+    {
+      title: "Deskripsi",
+      value: data?.deskripsi || "-",
+    },
+  ];

  const handlePress = (item: IMenuDrawerItem) => {
    console.log("PATH >> ", item.path);
@@ -45,7 +93,7 @@ export default function EventDetailStatus() {
        <BaseBox>
          <StackCustom>
            <TextCustom bold align="center" size="xlarge">
-              Judul event {status}
+              {data?.title || "-"}
            </TextCustom>
            {listData.map((item, index) => (
              <Grid key={index}>
@@ -60,9 +108,8 @@ export default function EventDetailStatus() {
          </StackCustom>
        </BaseBox>
        <Event_ButtonStatusSection
+          id={id as string}
          status={status as string}
-          onOpenAlert={setOpenAlert}
-          onOpenDeleteAlert={setOpenDeleteAlert}
        />
        <Spacing />
      </ViewWrapper>
@@ -70,7 +117,7 @@ export default function EventDetailStatus() {
      <DrawerCustom
        isVisible={openDrawer}
        closeDrawer={() => setOpenDrawer(false)}
-        height={250}
+        height={"auto"}
      >
        <MenuDrawerDynamicGrid
          data={menuDrawerDraftEvent({ id: id as string }) as any}
@@ -78,40 +125,6 @@ export default function EventDetailStatus() {
          onPressItem={handlePress as any}
        />
      </DrawerCustom>
-
-      <Event_AlertButtonStatusSection
-        id={id as string}
-        status={status as string}
-        openAlert={openAlert}
-        setOpenAlert={setOpenAlert}
-        openDeleteAlert={openDeleteAlert}
-        setOpenDeleteAlert={setOpenDeleteAlert}
-      />
    </>
  );
 }
-
-const listData = [
-  {
-    title: "Lokasi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-  {
-    title: "Tipe Acara",
-    value: "Workshop",
-  },
-  {
-    title: "Tanggal Mulai",
-    value: "Senin, 18 Juli 2025, 10:00 WIB",
-  },
-  {
-    title: "Tanggal Berakhir",
-    value: "Selasa, 19 Juli 2025, 12:00 WIB",
-  },
-  {
-    title: "Deskripsi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-];
--- a/app/(application)/(user)/event/[id]/edit.tsx
+++ b/app/(application)/(user)/event/[id]/edit.tsx
@@ -1,106 +1,271 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  ButtonCustom,
+  LoaderCustom,
  SelectCustom,
+  Spacing,
  StackCustom,
  TextAreaCustom,
+  TextCustom,
  TextInputCustom,
  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
-import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import {
+  apiEventGetOne,
+  apiEventUpdateData,
+} from "@/service/api-client/api-event";
+import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
-import { router } from "expo-router";
-import React, { useState } from "react";
-import { Platform } from "react-native";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import React, { useCallback, useEffect, useState } from "react";
+import Toast from "react-native-toast-message";

 export default function EventEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  //   {
+  //   title: "",
+  //   lokasi: "",
+  //   deskripsi: "",
+  //   eventMaster_TipeAcaraId: "",
+  //   tanggal: "",
+  //   tanggalSelesai: "",
+  //   authorId: "",
+  // }
+  const [listTypeEvent, setListTypeEvent] = useState([]);
  const [selectedDate, setSelectedDate] = useState<
    Date | DateTimePickerEvent | null
-  >(null);
+  >();

  const [selectedEndDate, setSelectedEndDate] = useState<
    Date | DateTimePickerEvent | null
-  >(null);
+  >();

-  const handlerSubmit = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  async function onLoadData() {
    try {
-      if (selectedDate) {
-        console.log("Tanggal yang dipilih:", selectedDate);
-        console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
-        // Kirim ke API atau proses lanjutan
-      } else {
-        console.log("Tanggal belum dipilih");
+      setIsLoadData(true);
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+        setSelectedDate(new Date(response.data.tanggal));
+        setSelectedEndDate(new Date(response.data.tanggalSelesai));
      }
-
-      if (selectedEndDate) {
-        console.log("Tanggal yang dipilih:", selectedEndDate);
-        console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
-        // Kirim ke API atau proses lanjutan
-      } else {
-        console.log("Tanggal berakhir belum dipilih");
-      }
-
-      console.log("Data berhasil terupdate");
-      router.back()
    } catch (error) {
-      console.log(error);
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  }
+
+  useEffect(() => {
+    onLoadMasterEventType();
+  }, []);
+
+  const onLoadMasterEventType = async () => {
+    try {
+      const response = await apiMasterEventType();
+      setListTypeEvent(response.data);
+    } catch (error) {
+      console.log("Error onLoadMasterEventType", error);
    }
  };

-  const buttonSubmit = (
-    <ButtonCustom title="Update" onPress={handlerSubmit} />
-  );
+  const validateDate = async () => {
+    if (
+      data?.title === "" ||
+      data?.lokasi === "" ||
+      data?.deskripsi === "" ||
+      data?.eventMaster_TipeAcaraId === ""
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Lengkapi semua data",
+      });
+
+      return false;
+    }
+
+    const startDate = new Date(selectedDate as any);
+    const endDate = new Date(selectedEndDate as any);
+
+    if (startDate >= endDate) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Ubah tanggal berakhirnya event",
+      });
+
+      return false;
+    }
+
+    return true;
+  };
+
+  const handlerSubmit = async () => {
+    const isValid = await validateDate();
+    if (!isValid) return;
+
+    try {
+      setIsLoading(true);
+      const newData = {
+        ...data,
+        tanggal: new Date(selectedDate as any).toISOString(),
+        tanggalSelesai: new Date(selectedEndDate as any).toISOString(),
+      };
+
+      const response = await apiEventUpdateData({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        return router.back();
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const validateDateRange = (
+    selectedDate: string | Date,
+    selectedEndDate: string | Date
+  ): { isValid: boolean; error?: string } => {
+    const startDate = new Date(selectedDate);
+    const endDate = new Date(selectedEndDate);
+
+    // Cek apakah tanggal valid
+    if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+      return {
+        isValid: false,
+        error: "Invalid date provided",
+      };
+    }
+
+    if (startDate >= endDate) {
+      return {
+        isValid: false,
+        error: "Ubah tanggal berakhirnya event",
+      };
+    }
+
+    return {
+      isValid: true,
+      error: undefined,
+    };
+  };

  return (
    <>
      <ViewWrapper>
-        <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
-          />
+        {isLoadData ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom gap={"xs"}>
+            <TextInputCustom
+              placeholder="Masukkan nama event"
+              label="Nama Event"
+              required
+              value={data?.title}
+              onChangeText={(value) => setData({ ...data, title: value })}
+            />
+            <SelectCustom
+              label="Tipe Event"
+              placeholder="Pilih tipe event"
+              data={listTypeEvent.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data?.eventMaster_TipeAcaraId || ""}
+              onChange={(value) => {
+                console.log(value);
+                setData({ ...data, eventMaster_TipeAcaraId: value });
+              }}
+            />
+            <TextInputCustom
+              label="Lokasi"
+              placeholder="Masukkan lokasi event"
+              required
+              value={data?.lokasi}
+              onChangeText={(value) => setData({ ...data, lokasi: value })}
+            />
+            <DateTimePickerCustom
+              minimumDate={new Date(Date.now())}
+              label="Tanggal & Waktu Mulai"
+              required
+              value={selectedDate as any}
+              onChange={(date: any) => {
+                setSelectedDate(date as any);
+              }}
+            />
+            <StackCustom gap={0}>
+              <DateTimePickerCustom
+                minimumDate={selectedDate as any}
+                label="Tanggal & Waktu Berakhir"
+                required
+                value={selectedEndDate as any}
+                onChange={(date: any) => {
+                  setSelectedEndDate(date as any);
+                }}
+              />

-          <DateTimePickerCustom
-            label="Tanggal & Waktu Mulai"
-            required
-            onChange={(date: Date) => {
-              setSelectedDate(date as any);
-            }}
-            value={selectedDate as any}
-            minimumDate={new Date(Date.now())}
-          />
+              {/* Muncul */}
+              {validateDateRange(selectedDate as any, selectedEndDate as any)
+                .isValid ? (
+                <TextCustom style={{ color: "green" }}>
+                  {
+                    validateDateRange(
+                      selectedDate as any,
+                      selectedEndDate as any
+                    ).error
+                  }
+                </TextCustom>
+              ) : (
+                <TextCustom style={{ color: "red" }}>
+                  {
+                    validateDateRange(
+                      selectedDate as any,
+                      selectedEndDate as any
+                    ).error
+                  }
+                </TextCustom>
+              )}
+              <Spacing />
+            </StackCustom>

-          <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}
+              value={data?.deskripsi}
+              onChangeText={(value) => setData({ ...data, deskripsi: value })}
+            />

-          <TextAreaCustom
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi event"
-            required
-            showCount
-            maxLength={100}
-          />
-
-          {buttonSubmit}
-        </StackCustom>
+            <ButtonCustom
+              isLoading={isLoading}
+              title="Update"
+              onPress={handlerSubmit}
+            />
+          </StackCustom>
+        )}
      </ViewWrapper>
    </>
  );
--- a/app/(application)/(user)/event/[id]/list-of-participants.tsx
+++ b/app/(application)/(user)/event/[id]/list-of-participants.tsx
@@ -1,17 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  AvatarUsernameAndOtherComponent,
+  BadgeCustom,
  BaseBox,
-  ViewWrapper,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper
 } from "@/components";
+import { apiEventListOfParticipants } from "@/service/api-client/api-event";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";

 export default function EventListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiEventListOfParticipants({ id: id as string });
+      if (response.success) {
+        console.log("Response", JSON.stringify(response.data, null, 2));
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
  return (
    <ViewWrapper>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingBlock={0}>
-          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${index}`} />
-        </BaseBox>
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : listData.length === 0 ? (
+        <TextCustom align="center">Belum ada peserta</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <BaseBox key={index}>
+            <AvatarUsernameAndOtherComponent
+              avatar={item?.User?.Profile?.imageId}
+              name={item?.User?.username}
+              avatarHref={`/profile/${item?.User?.Profile?.id}`}
+              rightComponent={<BadgeCustom color={item?.isPresent ? "green" : "red"}>{item?.isPresent ? "Hadir" : "Tidak Hadir"}</BadgeCustom>}
+            />
+          </BaseBox>
+        ))
+      )}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/event/[id]/publish.tsx
+++ b/app/(application)/(user)/event/[id]/publish.tsx
@@ -1,22 +1,44 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCustom,
-    DotButton,
-    DrawerCustom,
-    MenuDrawerDynamicGrid,
-    Spacing,
-    ViewWrapper
+  ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import { useAuth } from "@/hooks/use-auth";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
 import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { apiEventGetOne, apiEventJoin } from "@/service/api-client/api-event";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { Alert } from "react-native";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";

 export default function EventDetailPublish() {
  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
  const [openDrawer, setOpenDrawer] = useState(false);
+  const [isLoadingJoin, setIsLoadingJoin] = useState(false);
+
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  async function onLoadData() {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  }

  const handlePress = (item: IMenuDrawerItem) => {
    console.log("PATH ", item.path);
@@ -24,11 +46,43 @@ export default function EventDetailPublish() {
    setOpenDrawer(false);
  };

+  const handlerJoin = async () => {
+    const userId = user?.id;
+    if (!userId) {
+      return Toast.show({
+        type: "error",
+        text2: "Anda belum login",
+      });
+    }
+
+    try {
+      setIsLoadingJoin(true);
+      const response = await apiEventJoin({
+        id: id as string,
+        userId: userId as string,
+      });
+      if (response.success) {
+        router.navigate(
+          `/(application)/(user)/event/${id}/list-of-participants`
+        );
+        Toast.show({
+          type: "success",
+          text1: "Anda berhasil join",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingJoin(false);
+    }
+  };
+
  const footerButton = (
    <ButtonCustom
+      isLoading={isLoadingJoin}
      backgroundColor="green"
      textColor="white"
-      onPress={() => Alert.alert("Anda berhasil join event ini")}
+      onPress={() => handlerJoin()}
    >
      Join
    </ButtonCustom>
@@ -44,19 +98,22 @@ export default function EventDetailPublish() {
        }}
      />
      <ViewWrapper>
-        <Event_BoxDetailPublishSection footerButton={footerButton} />
+        <Event_BoxDetailPublishSection
+          data={data}
+          footerButton={footerButton}
+        />
        <Spacing />
      </ViewWrapper>

      <DrawerCustom
        isVisible={openDrawer}
        closeDrawer={() => setOpenDrawer(false)}
-        height={250}
+        height={"auto"}
      >
        <MenuDrawerDynamicGrid
          data={menuDrawerPublishEvent({ id: id as string })}
          columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
        />
      </DrawerCustom>
    </>
--- a/app/(application)/(user)/event/create.tsx
+++ b/app/(application)/(user)/event/create.tsx
@@ -1,6 +1,7 @@
 import {
  ButtonCustom,
  SelectCustom,
+  Spacing,
  StackCustom,
  TextAreaCustom,
  TextCustom,
@@ -9,11 +10,12 @@ import {
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { useAuth } from "@/hooks/use-auth";
-import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import { apiEventCreate } from "@/service/api-client/api-event";
+import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router } from "expo-router";
-import React, { useState } from "react";
-import { Platform } from "react-native";
+import React, { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";

 interface EventCreateProps {
  title?: string;
@@ -27,8 +29,23 @@ interface EventCreateProps {

 export default function EventCreate() {
  const [data, setData] = useState<EventCreateProps>();
+  const [listTypeEvent, setListTypeEvent] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
  const { user } = useAuth();

+  useEffect(() => {
+    onLoadMasterEventType();
+  }, []);
+
+  const onLoadMasterEventType = async () => {
+    try {
+      const response = await apiMasterEventType();
+      setListTypeEvent(response.data);
+    } catch (error) {
+      console.log("Error onLoadMasterEventType", error);
+    }
+  };
+
  const [selectedDate, setSelectedDate] = useState<
    Date | DateTimePickerEvent | null
  >(null);
@@ -37,35 +54,76 @@ export default function EventCreate() {
    Date | DateTimePickerEvent | null
  >(null);

-  const handlerSubmit = () => {
+  const handlerSubmit = async () => {
+    if (
+      !data?.title ||
+      !data?.lokasi ||
+      !data?.deskripsi ||
+      !data?.eventMaster_TipeAcaraId
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Lengkapi semua data",
+      });
+      return;
+    }
+
+    if (!selectedDate || !selectedEndDate) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Pilih tanggal mulai dan berakhir",
+      });
+      return;
+    }
+
+    // if (selectedDate) {
+    //   console.log("Tanggal yang dipilih:", selectedDate);
+    //   console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
+
+    //   // Kirim ke API atau proses lanjutan
+    // } else {
+    //   console.log("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.log("Tanggal berakhir belum dipilih");
+    // }
+
    try {
-      // if (selectedDate) {
-      //   console.log("Tanggal yang dipilih:", selectedDate);
-      //   console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
-      //   // Kirim ke API atau proses lanjutan
-      // } else {
-      //   console.log("Tanggal belum dipilih");
-      // }
+      setIsLoading(true);

-      // if (selectedEndDate) {
-      //   console.log("Tanggal yang dipilih:", selectedEndDate);
-      //   console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
-      //   // Kirim ke API atau proses lanjutan
-      // } else {
-      //   console.log("Tanggal berakhir belum dipilih");
-      // }
+      const newData = {
+        ...data,
+        tanggal: new Date(selectedDate as any).toISOString(),
+        tanggalSelesai: new Date(selectedEndDate as any).toISOString(),
+        authorId: user?.id,
+      };

-      console.log("Data berhasil disimpan", JSON.stringify(data, null, 2));
-      // router.navigate("/event/status");
+      console.log("Data berhasil disimpan", JSON.stringify(newData, null, 2));
+
+      const response = await apiEventCreate(newData);
+      console.log("Response", JSON.stringify(response, null, 2));
+
+      router.navigate("/event/status");
    } catch (error) {
      console.log(error);
+    } finally {
+      setIsLoading(false);
    }
  };

  const buttonSubmit = (
-    <ButtonCustom title="Simpan" onPress={handlerSubmit} />
-    // <BoxButtonOnFooter>
-    // </BoxButtonOnFooter>
+    <ButtonCustom
+      isLoading={isLoading}
+      title="Simpan"
+      onPress={handlerSubmit}
+    />
  );

  return (
@@ -78,14 +136,20 @@ export default function EventCreate() {
            required
            onChangeText={(value: any) => setData({ ...data, title: value })}
          />
+
          <SelectCustom
            label="Tipe Event"
            placeholder="Pilih tipe event"
-            data={masterTypeEvent}
+            data={listTypeEvent.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.eventMaster_TipeAcaraId || ""}
            onChange={(value: any) =>
              setData({ ...data, eventMaster_TipeAcaraId: value })
            }
          />
+
          <TextInputCustom
            label="Lokasi"
            placeholder="Masukkan lokasi event"
@@ -103,14 +167,24 @@ export default function EventCreate() {
            minimumDate={new Date(Date.now())}
          />

-          <DateTimePickerCustom
-            label="Tanggal & Waktu Berakhir"
-            required
-            onChange={(date: Date) => {
-              setSelectedEndDate(date as any);
-            }}
-            value={selectedEndDate as any}
-          />
+          <StackCustom gap={0}>
+            <DateTimePickerCustom
+              disabled={!selectedDate}
+              label="Tanggal & Waktu Berakhir"
+              required
+              onChange={(date: Date) => {
+                setSelectedEndDate(date as any);
+              }}
+              value={selectedEndDate as any}
+              minimumDate={new Date(selectedDate as any)}
+            />
+            {!selectedDate && (
+              <TextCustom color="gray" size={"small"}>
+                Note: Pilih tanggal mulai terlebih dahulu
+              </TextCustom>
+            )}
+            <Spacing />
+          </StackCustom>

          <TextAreaCustom
            label="Deskripsi"
@@ -118,6 +192,9 @@ export default function EventCreate() {
            required
            showCount
            maxLength={100}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
          />

          {buttonSubmit}
--- a/bun.lock
+++ b/bun.lock
--- a/components/DateInput/DataTimeAndroid.tsx
+++ b/components/DateInput/DataTimeAndroid.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+
 // DateTimeInput.tsx
 import { MainColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
@@ -119,7 +119,7 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
            <Ionicons
              name="calendar-outline"
              size={20}
-              color={MainColor.placeholder}
+              color={disabled ? MainColor.white_gray : MainColor.placeholder}
            />
          </View>

@@ -131,8 +131,8 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
            }}
          >
            <Grid.Col span={6} style={{}}>
-              <Pressable onPress={toggleDatePicker}>
-                <TextCustom color="gray">
+              <Pressable onPress={() => !disabled && toggleDatePicker()}>
+                <TextCustom color={disabled ? "default" : "gray"}>
                  {selectedDate ? (
                    <TextCustom color="black">
                      {selectedDate.toLocaleDateString()}
@@ -148,8 +148,8 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
            </Grid.Col>

            <Grid.Col span={5} style={{}}>
-              <Pressable onPress={toggleTimePicker}>
-                <TextCustom color="gray">
+              <Pressable onPress={() => !disabled && toggleTimePicker()}>
+                <TextCustom color={disabled ? "default" : "gray"}>
                  {selectedTime ? (
                    <TextCustom color="black">
                      {selectedTime.toLocaleTimeString("id-ID", {
--- a/components/DateInput/DateTimeIOS.tsx
+++ b/components/DateInput/DateTimeIOS.tsx
@@ -3,24 +3,19 @@ import { MainColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import DateTimePicker, {
-    DateTimePickerEvent,
+  DateTimePickerEvent,
 } from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
 import React, { useState } from "react";
-import {
-    StyleProp,
-    Text,
-    View,
-    ViewStyle
-} from "react-native";
+import { StyleProp, Text, View, ViewStyle } from "react-native";
 import ClickableCustom from "../Clickable/ClickableCustom";
 import TextCustom from "../Text/TextCustom";

 interface DateTimeInputProps {
  // Main
-  value?: DateTimePickerEvent;
+  value?: DateTimePickerEvent | Date | null;
  mode?: "date" | "time";
-  onChange: (selectedDate: DateTimePickerEvent) => void;
+  onChange: (selectedDate: DateTimePickerEvent | Date | null) => void;
  maximumDate?: Date;
  minimumDate?: Date;
  // Main
@@ -74,7 +69,7 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
      <ClickableCustom
        activeOpacity={0.8}
        style={[GStyles.inputContainerArea, containerStyle]}
-        onPress={handlePress}
+        onPress={() => !disabled && handlePress()}
      >
        {label && (
          <Text style={GStyles.inputLabel}>
@@ -95,11 +90,11 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
            <Ionicons
              name="calendar-outline"
              size={20}
-              color={MainColor.placeholder}
+              color={disabled ? MainColor.white : MainColor.placeholder}
            />
          </View>

-          <TextCustom color="gray">
+          <TextCustom color={disabled ? "default" : "gray"}>
            {selectedDate ? (
              <TextCustom color="black">
                {dayjs(selectedDate).format("DD-MM-YYYY HH:mm")}
--- a/components/DateInput/DateTimePickerCustom.tsx
+++ b/components/DateInput/DateTimePickerCustom.tsx
@@ -1,19 +1,17 @@
-
-import {
-  DateTimePickerEvent,
-} from "@react-native-community/datetimepicker";
+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;
+  value?: Date | DateTimePickerEvent | null;
  onChange?: (date: Date) => void;
  label?: string;
  required?: boolean;
  maximumDate?: Date;
  minimumDate?: Date;
+  disabled?: boolean;
 };

 const DateTimePickerCustom: React.FC<Props> = ({
@@ -23,18 +21,21 @@ const DateTimePickerCustom: React.FC<Props> = ({
  required,
  maximumDate,
  minimumDate,
+  disabled = false,
 }) => {
  return (
    <>
      {Platform.OS === "ios" ? (
        <DateTimeInput_IOS
          label={label}
-          onChange={(date: DateTimePickerEvent) => {
+          onChange={(date: DateTimePickerEvent | Date | null) => {
            onChange?.(date as any);
          }}
          required={required}
          maximumDate={maximumDate}
          minimumDate={minimumDate}
+          disabled={disabled}
+          value={value as DateTimePickerEvent | Date | null}
        />
      ) : (
        <DateTimeInput_Android
@@ -45,6 +46,7 @@ const DateTimePickerCustom: React.FC<Props> = ({
          required={required}
          maximumDate={maximumDate}
          minimumDate={minimumDate}
+          disabled={disabled}
        />
      )}
    </>
--- a/components/Drawer/MenuDrawerDynamicGird.tsx
+++ b/components/Drawer/MenuDrawerDynamicGird.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { TEXT_SIZE_SMALL } from "@/constants/constans-value";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
@@ -5,19 +6,23 @@ import { IMenuDrawerItem } from "../_Interface/types";
 import { Href } from "expo-router";

 type IMenuDrawerItemProps = {
-    icon: React.ReactNode;
-    label: string;
-    value?: string;
-    path?: Href | string;
-    color?: string;
-}
+  icon: React.ReactNode;
+  label: string;
+  value?: string;
+  path?: Href | string;
+  color?: string;
+};

 interface MenuDrawerDynamicGridProps {
-    data: IMenuDrawerItemProps[];
-    columns?: number;
-    onPressItem?: (item: IMenuDrawerItemProps) => void;
+  data: IMenuDrawerItemProps[];
+  columns?: number;
+  onPressItem?: (item: IMenuDrawerItemProps) => void;
 }
-const MenuDrawerDynamicGrid = ({ data, columns = 4, onPressItem }: MenuDrawerDynamicGridProps) => {
+const MenuDrawerDynamicGrid = ({
+  data,
+  columns = 4,
+  onPressItem,
+}: MenuDrawerDynamicGridProps) => {
  const numColumns = columns;

  return (
--- a/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
+++ b/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
@@ -1,7 +1,6 @@
-import { ImageSourcePropType } from "react-native";
 import Divider from "../Divider/Divider";
 import Grid from "../Grid/GridCustom";
-import AvatarCustom from "../Image/AvatarCustom";
+import AvatarComp from "../Image/AvatarComp";
 import TextCustom from "../Text/TextCustom";

 const AvatarUsernameAndOtherComponent = ({
@@ -12,7 +11,7 @@ const AvatarUsernameAndOtherComponent = ({
  withBottomLine = false,
 }: {
  avatarHref?: string;
-  avatar?: ImageSourcePropType;
+  avatar?: string;
  name?: string;
  rightComponent?: React.ReactNode;
  withBottomLine?: boolean;
@@ -21,7 +20,7 @@ const AvatarUsernameAndOtherComponent = ({
    <>
      <Grid containerStyle={{ zIndex: 10 }}>
        <Grid.Col span={2}>
-          <AvatarCustom source={avatar} href={avatarHref as any} />
+          <AvatarComp fileId={avatar} href={avatarHref as any} size="base" />
        </Grid.Col>
        <Grid.Col
          span={rightComponent ? 6 : 10}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,65 +11,69 @@
    "lint": "expo lint"
  },
  "dependencies": {
-    "@expo/vector-icons": "^14.1.0",
-    "@react-native-async-storage/async-storage": "2.1.2",
-    "@react-native-community/datetimepicker": "8.4.1",
-    "@react-navigation/bottom-tabs": "^7.4.2",
-    "@react-navigation/drawer": "^7.5.2",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-navigation/bottom-tabs": "^7.3.10",
+    "@react-navigation/drawer": "^7.3.9",
    "@react-navigation/elements": "^2.3.8",
    "@react-navigation/native": "^7.1.6",
-    "@react-navigation/native-stack": "^7.3.21",
+    "@react-navigation/native-stack": "^7.3.10",
    "@types/lodash": "^4.17.20",
    "@types/react-native-vector-icons": "^6.4.18",
    "axios": "^1.11.0",
    "dayjs": "^1.11.13",
-    "expo": "53.0.17",
-    "expo-blur": "~14.1.5",
-    "expo-camera": "~16.1.10",
-    "expo-clipboard": "~7.1.5",
-    "expo-constants": "~17.1.7",
-    "expo-dev-client": "~5.2.4",
-    "expo-document-picker": "~13.1.6",
-    "expo-file-system": "~18.1.11",
-    "expo-font": "~13.3.2",
-    "expo-haptics": "~14.1.4",
-    "expo-image": "~2.3.2",
-    "expo-image-picker": "~16.1.4",
-    "expo-linking": "~7.1.7",
-    "expo-router": "~5.1.3",
-    "expo-splash-screen": "~0.30.10",
-    "expo-status-bar": "~2.2.3",
-    "expo-symbols": "~0.4.5",
-    "expo-system-ui": "~5.0.10",
-    "expo-web-browser": "~14.2.0",
+    "expo": "^54.0.0",
+    "expo-blur": "~15.0.7",
+    "expo-camera": "~17.0.7",
+    "expo-clipboard": "~8.0.7",
+    "expo-constants": "~18.0.8",
+    "expo-dev-client": "~6.0.12",
+    "expo-document-picker": "~14.0.7",
+    "expo-file-system": "~19.0.12",
+    "expo-font": "~14.0.8",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.8",
+    "expo-image-picker": "~17.0.8",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.1",
+    "expo-splash-screen": "~31.0.9",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.7",
+    "expo-web-browser": "~15.0.7",
    "lodash": "^4.17.21",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
    "react-native-dotenv": "^3.4.11",
-    "react-native-gesture-handler": "~2.24.0",
+    "react-native-gesture-handler": "~2.28.0",
    "react-native-international-phone-number": "^0.9.3",
    "react-native-maps": "1.20.1",
    "react-native-otp-entry": "^1.8.5",
-    "react-native-pager-view": "6.7.1",
+    "react-native-pager-view": "6.9.1",
    "react-native-paper": "^5.14.5",
    "react-native-qrcode-svg": "^6.3.15",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.11.1",
-    "react-native-svg": "15.11.2",
+    "react-native-reanimated": "~4.1.0",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
    "react-native-toast-message": "^2.3.3",
    "react-native-vector-icons": "^10.2.0",
-    "react-native-web": "~0.20.0",
-    "react-native-webview": "13.13.5"
+    "react-native-web": "^0.21.0",
+    "react-native-webview": "13.15.0",
+    "react-native-worklets": "^0.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.10",
    "eslint": "^9.25.0",
-    "eslint-config-expo": "~9.2.0",
+    "eslint-config-expo": "~10.0.0",
    "expo-module-scripts": "^4.1.10",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.2"
  },
-  "private": true
+  "private": true,
+  "engines": {
+    "bun": ">=1.0.0"
+  }
 }
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -98,7 +98,7 @@ export default function LoginView() {
  }

  if (token && !isAdmin) {
-    return <Redirect href={"/(application)/(user)/home"} />;
+    return <Redirect href={"/(application)/(user)/event/(tabs)"} />;
  }

  if (token && isAdmin) {
--- a/screens/Event/BoxDetailPublishSection.tsx
+++ b/screens/Event/BoxDetailPublishSection.tsx
@@ -1,21 +1,49 @@
-import {
-    BaseBox,
-    Grid,
-    StackCustom,
-    TextCustom
-} from "@/components";
+import { AvatarUsernameAndOtherComponent, BoxWithHeaderSection, Grid, StackCustom, TextCustom } from "@/components";
+import { dateTimeView } from "@/utils/dateTimeView";

 export default function Event_BoxDetailPublishSection({
+  data,
  footerButton,
 }: {
+  data?: any;
  footerButton?: React.ReactNode;
 }) {
+  const listData = [
+    {
+      title: "Lokasi",
+      value: data?.lokasi || "-",
+    },
+    {
+      title: "Tipe Acara",
+      value: data?.EventMaster_TipeAcara?.name || "-",
+    },
+    {
+      title: "Tanggal Mulai",
+      value: dateTimeView({ date: data?.tanggal }) || "-",
+    },
+    {
+      title: "Tanggal Berakhir",
+      value: dateTimeView({ date: data?.tanggalSelesai }) || "-",
+    },
+    {
+      title: "Deskripsi",
+      value: data?.deskripsi || "-",
+    },
+  ];
+
+
  return (
    <>
-      <BaseBox>
+      <BoxWithHeaderSection>
        <StackCustom>
+          <AvatarUsernameAndOtherComponent
+            avatarHref={`/profile/${data?.Author?.Profile?.id}`}
+            name={data?.Author?.username || "-"}
+            avatar={data?.Author?.Profile?.imageId || ""}
+          />
+
          <TextCustom bold align="center" size="xlarge">
-            Judul event publish
+            {data?.title || "-"}
          </TextCustom>
          {listData.map((item, index) => (
            <Grid key={index}>
@@ -28,34 +56,9 @@ export default function Event_BoxDetailPublishSection({
            </Grid>
          ))}
        </StackCustom>
-      </BaseBox>
+      </BoxWithHeaderSection>

      {footerButton}
    </>
  );
 }
-
-const listData = [
-  {
-    title: "Lokasi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-  {
-    title: "Tipe Acara",
-    value: "Workshop",
-  },
-  {
-    title: "Tanggal Mulai",
-    value: "Senin, 18 Juli 2025, 10:00 WIB",
-  },
-  {
-    title: "Tanggal Berakhir",
-    value: "Selasa, 19 Juli 2025, 12:00 WIB",
-  },
-  {
-    title: "Deskripsi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-];
--- a/screens/Event/BoxPublishSection.tsx
+++ b/screens/Event/BoxPublishSection.tsx
@@ -7,21 +7,15 @@ import {
 import { Href } from "expo-router";

 export default function Event_BoxPublishSection({
-  id,
-  title,
-  username,
-  description,
  href,
+  data,

  // Avatar
  sourceAvatar,
  rightComponentAvatar,
 }: {
-  id: string;
-  title?: string;
-  username?: string;
-  description?: string;
  href: Href;
+  data?: any;

  // Avatar
  sourceAvatar?: string;
@@ -32,18 +26,15 @@ export default function Event_BoxPublishSection({
      <BoxWithHeaderSection href={href}>
        <StackCustom gap={"xs"}>
          <AvatarUsernameAndOtherComponent
-            avatarHref={`/profile/${id}`}
-            name={username || "Lorem ipsum dolor sit"}
+            avatarHref={`/profile/${data?.Author?.Profile?.id}`}
+            name={data?.Author?.username || "-"}
            rightComponent={rightComponentAvatar}
-            avatar={sourceAvatar as any}
+            avatar={data?.Author?.Profile?.imageId || ""}
          />
          <TextCustom truncate bold>
-            {title || "Lorem ipsum dolor sit"}
-          </TextCustom>
-          <TextCustom truncate={2}>
-            {description ||
-              "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, obcaecati quia suscipit numquam, voluptates commodi porro impedit natus quos doloremque!"}
+            {data?.title || "-"}
          </TextCustom>
+          <TextCustom truncate={2}>{data?.deskripsi || "-"}</TextCustom>
        </StackCustom>
      </BoxWithHeaderSection>
    </>
--- a/screens/Event/ButtonStatusSection.tsx
+++ b/screens/Event/ButtonStatusSection.tsx
@@ -1,28 +1,158 @@
-import { ButtonCustom, Grid } from "@/components";
-import { View } from "react-native";
+import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
+import {
+  apiEventDelete,
+  apiEventUpdateStatus,
+} from "@/service/api-client/api-event";
+import { router } from "expo-router";
+import Toast from "react-native-toast-message";

 export default function Event_ButtonStatusSection({
+  id,
  status,
-  onOpenAlert,
-  onOpenDeleteAlert,
 }: {
+  id: string;
  status: string;
-  onOpenAlert: (value: boolean) => void;
-  onOpenDeleteAlert: (value: boolean) => void;
 }) {
+  const handleBatalkanReview = () => {
+    AlertDefaultSystem({
+      title: "Batalkan Review",
+      message: "Apakah Anda yakin ingin batalkan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: async () => {
+        try {
+          const response = await apiEventUpdateStatus({
+            id: id,
+            status: "draft",
+          });

-  const handleOpenAlert = () => {
-    onOpenAlert(true);
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        }
+      },
+    });
+  };
+
+  const handleAjukanReview = () => {
+    AlertDefaultSystem({
+      title: "Ajukan Review",
+      message: "Apakah Anda yakin ingin ajukan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: async () => {
+        try {
+          const response = await apiEventUpdateStatus({
+            id: id,
+            status: "review",
+          });
+
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        }
+      },
+    });
+  };
+
+  const handleEditKembali = () => {
+    AlertDefaultSystem({
+      title: "Edit Kembali",
+      message: "Apakah Anda yakin ingin edit kembali ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: async () => {
+        try {
+          const response = await apiEventUpdateStatus({
+            id: id,
+            status: "draft",
+          });
+
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        }
+      },
+    });
  };

  const handleOpenDeleteAlert = () => {
-    onOpenDeleteAlert(true);
+    AlertDefaultSystem({
+      title: "Hapus",
+      message: "Apakah Anda yakin ingin menghapus data ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: async () => {
+        try {
+          const response = await apiEventDelete({ id: id });
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        }
+      },
+    });
  };

  const DeleteButton = () => {
    return (
      <>
-        <ButtonCustom backgroundColor="red" textColor="white" onPress={handleOpenDeleteAlert}>
+        <ButtonCustom
+          backgroundColor="red"
+          textColor="white"
+          onPress={handleOpenDeleteAlert}
+        >
          Hapus
        </ButtonCustom>
      </>
@@ -35,7 +165,7 @@ export default function Event_ButtonStatusSection({

    case "review":
      return (
-        <ButtonCustom onPress={handleOpenAlert}>
+        <ButtonCustom onPress={handleBatalkanReview}>
          Batalkan Review
        </ButtonCustom>
      );
@@ -44,13 +174,14 @@ export default function Event_ButtonStatusSection({
      return (
        <>
          <Grid>
-            <Grid.Col span={5}>
-              <ButtonCustom onPress={handleOpenAlert}>Ajukan Review</ButtonCustom>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleAjukanReview}>
+                Ajukan Review
+              </ButtonCustom>
            </Grid.Col>
-            <Grid.Col span={2}>
-              <View />
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
            </Grid.Col>
-            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
          </Grid>
        </>
      );
@@ -59,13 +190,14 @@ export default function Event_ButtonStatusSection({
      return (
        <>
          <Grid>
-            <Grid.Col span={5}>
-              <ButtonCustom onPress={handleOpenAlert}>Edit Kembali</ButtonCustom>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleEditKembali}>
+                Edit Kembali
+              </ButtonCustom>
            </Grid.Col>
-            <Grid.Col span={2}>
-              <View />
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
            </Grid.Col>
-            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
          </Grid>
        </>
      );
--- a/service/api-client/api-event.ts
+++ b/service/api-client/api-event.ts
@@ -0,0 +1,115 @@
+import { apiConfig } from "../api-config";
+
+export async function apiEventCreate(data: any) {
+  try {
+    const response = await apiConfig.post(`/mobile/event`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventGetByStatus({
+  id,
+  status,
+}: {
+  id: string;
+  status: string;
+}) {
+  try {
+    const response = await apiConfig.get(`/mobile/event/${id}/${status}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventGetOne({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/event/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventUpdateStatus({
+  id,
+  status,
+}: {
+  id: string;
+  status: "draft" | "review" | "publish" | "reject";
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/event/${id}/${status}`);
+    console.log("[SUCCESS]", response.data);
+    return response.data;
+  } catch (error) {
+    // console.log("[ERROR FECTH]", error);
+    throw error;
+  }
+}
+
+export async function apiEventUpdateData({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/event/${id}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventDelete({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/event/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventGetAll() {
+  try {
+    const response = await apiConfig.get(`/mobile/event`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventJoin({
+  id,
+  userId,
+}: {
+  id: string;
+  userId?: string;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/event/${id}/participants`, {
+      userId: userId,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventListOfParticipants({id}: {id: string}){
+  try {
+    const response = await apiConfig.get(`/mobile/event/${id}/participants`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+  
--- a/service/api-client/api-master.ts
+++ b/service/api-client/api-master.ts
@@ -21,6 +21,11 @@ export async function apiMasterSubBidangBisnis({ id }: { id?: string }) {
  }
 }

-// export async function apiMasterEventType(params:type) {
-  
-// }
+export async function apiMasterEventType() {
+  try {
+    const response = await apiConfig.get(`/mobile/master/event-type`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
--- a/utils/dateTimeView.ts
+++ b/utils/dateTimeView.ts
@@ -0,0 +1,14 @@
+import dayjs from "dayjs";
+
+export const dateTimeView = ({
+  date,
+  withoutTime = false,
+}: {
+  date: any;
+  withoutTime?: boolean;
+}) => {
+  const newDate = dayjs(date).format(
+    `DD-MM-YYYY ${withoutTime ? "" : ", HH:mm"}`
+  );
+  return newDate;
+};