API Event

Add:
- api-client/api-event : fetch get one, update data, update status, create event

Fix:
- UI : create , detail dan status: untuk menyambungkan ke API

### No Issue

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>
   );
 }

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!",
-  },
-];

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

@@ -1,106 +1,265 @@
+/* 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 = () => {
+    if (
+      data?.title === "" ||
+      data?.lokasi === "" ||
+      data?.deskripsi === "" ||
+      data?.eventMaster_TipeAcaraId === ""
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Lengkapi semua data",
+      });
+      return;
+    }
+
+    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;
+    }
+  };
+
+  const handlerSubmit = async () => {
+    validateDate();
+    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>
     </>
   );

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}