From 814f261881c6b972cb2e17e3d7c2c87c4f25a124 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Tue, 22 Jul 2025 14:56:29 +0800
Subject: [PATCH] Deskripsi: Event: Add history detail Fix : - nama variabel
 pada [id]/

Component
Fix:
- Spacing : tipe data num | str
- ScrollView : tambah background

# No Issue "
---
 .../(user)/event/(tabs)/_layout.tsx           |   2 +-
 .../(user)/event/(tabs)/contribution.tsx      |   2 +-
 .../(user)/event/(tabs)/history.tsx           |  66 +++++++++++-
 .../(user)/event/(tabs)/index.tsx             |   2 +-
 .../(user)/event/(tabs)/status.tsx            |   2 +-
 .../event/[id]/[status]/detail-event.tsx      |   2 +-
 .../(user)/event/[id]/contribution.tsx        |   2 +-
 app/(application)/(user)/event/[id]/edit.tsx  | 100 +++++++++++++++++-
 .../(user)/event/[id]/history.tsx             |  51 +++++++++
 .../(user)/event/[id]/publish.tsx             |   2 +-
 app/(application)/(user)/event/create.tsx     |  50 +++++----
 components/Scroll/ScrollCustom.tsx            |   3 +
 components/_ShareComponent/Spacing.tsx        |   6 +-
 screens/Event/BoxPublishSection.tsx           |  77 ++++++++------
 14 files changed, 293 insertions(+), 74 deletions(-)
 create mode 100644 app/(application)/(user)/event/[id]/history.tsx

diff --git a/app/(application)/(user)/event/(tabs)/_layout.tsx b/app/(application)/(user)/event/(tabs)/_layout.tsx
index ddf8ec5..41fc6ed 100644
--- a/app/(application)/(user)/event/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/event/(tabs)/_layout.tsx
@@ -4,7 +4,7 @@ import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 import { Platform, View } from "react-native";
 
-export default function EventLayout() {
+export default function EventTabsLayout() {
   return (
     <Tabs
       screenOptions={{
diff --git a/app/(application)/(user)/event/(tabs)/contribution.tsx b/app/(application)/(user)/event/(tabs)/contribution.tsx
index 562bc00..780d5f7 100644
--- a/app/(application)/(user)/event/(tabs)/contribution.tsx
+++ b/app/(application)/(user)/event/(tabs)/contribution.tsx
@@ -8,7 +8,7 @@ import {
   ViewWrapper,
 } from "@/components";
 
-export default function Kontribusi() {
+export default function EventContribution() {
   return (
     <ViewWrapper hideFooter>
       {Array.from({ length: 10 }).map((_, index) => (
diff --git a/app/(application)/(user)/event/(tabs)/history.tsx b/app/(application)/(user)/event/(tabs)/history.tsx
index f3cde8a..31ae386 100644
--- a/app/(application)/(user)/event/(tabs)/history.tsx
+++ b/app/(application)/(user)/event/(tabs)/history.tsx
@@ -1,11 +1,67 @@
+import { ButtonCustom, Spacing, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { GStyles } from "@/styles/global-styles";
-import { Text } from "react-native";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function EventHistory() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const headerComponent = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 5,
+        backgroundColor: MainColor.soft_darkblue,
+        borderRadius: 50,
+        width: "100%",
+      }}
+    >
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "all" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={activeCategory === "all" ? MainColor.black : MainColor.white}
+        style={{ width: "49%" }}
+        onPress={() => handlePress("all")}
+      >
+        Semua Riwayat
+      </ButtonCustom>
+      <Spacing width={"2%"} />
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "main" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("main")}
+      >
+        Riwayat Saya
+      </ButtonCustom>
+    </View>
+  );
 
-export default function Riwayat() {
   return (
-    <ViewWrapper>
-      <Text style={GStyles.textLabel}>Riwayat</Text>
+    <ViewWrapper headerComponent={headerComponent} hideFooter>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Event_BoxPublishSection
+          key={index.toString()}
+          id={index.toString()}
+          username={`Hisrory ${activeCategory === "main" ? "Saya" : "Semua"}`}
+          rightComponentAvatar={
+            <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
+          }
+        />
+      ))}
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/event/(tabs)/index.tsx b/app/(application)/(user)/event/(tabs)/index.tsx
index f69a2c5..0cc395a 100644
--- a/app/(application)/(user)/event/(tabs)/index.tsx
+++ b/app/(application)/(user)/event/(tabs)/index.tsx
@@ -3,7 +3,7 @@ import FloatingButton from "@/components/Button/FloatingButton";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
 import { router } from "expo-router";
 
-export default function Event() {
+export default function EventBeranda() {
   return (
     <ViewWrapper
       hideFooter
diff --git a/app/(application)/(user)/event/(tabs)/status.tsx b/app/(application)/(user)/event/(tabs)/status.tsx
index 7d48aeb..be81907 100644
--- a/app/(application)/(user)/event/(tabs)/status.tsx
+++ b/app/(application)/(user)/event/(tabs)/status.tsx
@@ -9,7 +9,7 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { masterStatus } from "@/lib/dummy-data/_master/status";
 import { useState } from "react";
 
-export default function Status() {
+export default function EventStatus() {
   const id = "test-id-event";
 
   const [activeCategory, setActiveCategory] = useState<string | null>(
diff --git a/app/(application)/(user)/event/[id]/[status]/detail-event.tsx b/app/(application)/(user)/event/[id]/[status]/detail-event.tsx
index 45f8b46..5518426 100644
--- a/app/(application)/(user)/event/[id]/[status]/detail-event.tsx
+++ b/app/(application)/(user)/event/[id]/[status]/detail-event.tsx
@@ -17,7 +17,7 @@ import { menuDrawerDraftEvent } from "@/screens/Event/menuDrawerDraft";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 
-export default function EventDetail() {
+export default function EventDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openAlert, setOpenAlert] = useState(false);
diff --git a/app/(application)/(user)/event/[id]/contribution.tsx b/app/(application)/(user)/event/[id]/contribution.tsx
index 4d10008..69cfaa2 100644
--- a/app/(application)/(user)/event/[id]/contribution.tsx
+++ b/app/(application)/(user)/event/[id]/contribution.tsx
@@ -12,7 +12,7 @@ import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 
-export default function EventContribution() {
+export default function EventDetailContribution() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
 
diff --git a/app/(application)/(user)/event/[id]/edit.tsx b/app/(application)/(user)/event/[id]/edit.tsx
index 316e8ef..1b3f771 100644
--- a/app/(application)/(user)/event/[id]/edit.tsx
+++ b/app/(application)/(user)/event/[id]/edit.tsx
@@ -1,11 +1,105 @@
-import { StackCustom, TextCustom, ViewWrapper } from "@/components";
+import {
+  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 { router } from "expo-router";
+import React, { useState } from "react";
+import { Platform } from "react-native";
 
 export default function EventEdit() {
+  const [selectedDate, setSelectedDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const [selectedEndDate, setSelectedEndDate] = useState<
+    Date | DateTimePickerEvent | null
+  >(null);
+
+  const handlerSubmit = () => {
+    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");
+      }
+
+      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);
+    }
+  };
+
+  const buttonSubmit = (
+    <ButtonCustom title="Update" onPress={handlerSubmit} />
+  );
+
   return (
     <>
       <ViewWrapper>
-        <StackCustom>
-          <TextCustom>Edit Event</TextCustom>
+        <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}
+          />
+
+          {buttonSubmit}
         </StackCustom>
       </ViewWrapper>
     </>
diff --git a/app/(application)/(user)/event/[id]/history.tsx b/app/(application)/(user)/event/[id]/history.tsx
new file mode 100644
index 0000000..6a065fc
--- /dev/null
+++ b/app/(application)/(user)/event/[id]/history.tsx
@@ -0,0 +1,51 @@
+import {
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  ViewWrapper,
+  Spacing,
+} from "@/components";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import LeftButtonCustom from "@/components/Button/BackButton";
+import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
+import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function EventDetailHistory() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail riwayat`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <Event_BoxDetailPublishSection />
+        <Spacing />
+      </ViewWrapper>
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={250}
+      >
+        <MenuDrawerDynamicGrid
+          data={menuDrawerPublishEvent({ id: id as string })}
+          columns={4}
+          onPressItem={handlePress}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/event/[id]/publish.tsx b/app/(application)/(user)/event/[id]/publish.tsx
index 11dbfa1..6f143c5 100644
--- a/app/(application)/(user)/event/[id]/publish.tsx
+++ b/app/(application)/(user)/event/[id]/publish.tsx
@@ -14,7 +14,7 @@ import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { Alert } from "react-native";
 
-export default function EventPublish() {
+export default function EventDetailPublish() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
 
diff --git a/app/(application)/(user)/event/create.tsx b/app/(application)/(user)/event/create.tsx
index 030c7d4..79ab74c 100644
--- a/app/(application)/(user)/event/create.tsx
+++ b/app/(application)/(user)/event/create.tsx
@@ -1,15 +1,15 @@
 import {
-    BoxButtonOnFooter,
-    ButtonCustom,
-    SelectCustom,
-    StackCustom,
-    TextAreaCustom,
-    TextInputCustom,
-    ViewWrapper,
+  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 { router } from "expo-router";
 import React, { useState } from "react";
 import { Platform } from "react-native";
 
@@ -23,25 +23,32 @@ export default function EventCreate() {
   >(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");
-    }
+    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");
+      }
 
-    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");
+      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 disimpan");
+      router.navigate("/event/status");
+    } catch (error) {
+      console.log(error);
     }
   };
 
   const buttonSubmit = (
-      <ButtonCustom title="Simpan" onPress={handlerSubmit} />
+    <ButtonCustom title="Simpan" onPress={handlerSubmit} />
     // <BoxButtonOnFooter>
     // </BoxButtonOnFooter>
   );
@@ -96,7 +103,6 @@ export default function EventCreate() {
 
           {buttonSubmit}
         </StackCustom>
-
       </ViewWrapper>
     </>
   );
diff --git a/components/Scroll/ScrollCustom.tsx b/components/Scroll/ScrollCustom.tsx
index ed864a2..f287e42 100644
--- a/components/Scroll/ScrollCustom.tsx
+++ b/components/Scroll/ScrollCustom.tsx
@@ -49,6 +49,9 @@ export default ScrollableCustom;
 
 const styles = StyleSheet.create({
   scrollView: {
+    backgroundColor: MainColor.soft_darkblue,
+    borderRadius: 50,
+    padding: 5,
     // maxHeight: 50,
   },
   buttonContainer: {
diff --git a/components/_ShareComponent/Spacing.tsx b/components/_ShareComponent/Spacing.tsx
index 3ca46a7..0b26571 100644
--- a/components/_ShareComponent/Spacing.tsx
+++ b/components/_ShareComponent/Spacing.tsx
@@ -3,12 +3,12 @@ import React from "react";
 import { View } from "react-native";
 
 interface SpacingProps {
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
 }
 
 const Spacing: React.FC<SpacingProps> = ({ width = 20, height = 20 }) => {
-  return <View style={{ height, width }} />;
+  return <View style={{ height: height as any, width: width as any }} />;
 };
 
 export default Spacing;
diff --git a/screens/Event/BoxPublishSection.tsx b/screens/Event/BoxPublishSection.tsx
index 1ad4f8f..ebd9da2 100644
--- a/screens/Event/BoxPublishSection.tsx
+++ b/screens/Event/BoxPublishSection.tsx
@@ -1,39 +1,48 @@
-import { BaseBox, StackCustom, AvatarUsernameAndOtherComponent, TextCustom } from "@/components";
+import {
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  StackCustom,
+  TextCustom,
+} from "@/components";
 
 export default function Event_BoxPublishSection({
-    id,
-    name,
-    avatarHref,
-    description,
-    footerButton
+  id,
+  title,
+  username,
+  description,
+
+  // Avatar
+  sourceAvatar,
+  rightComponentAvatar,
 }: {
-    id: string;
-    name?: string;
-    avatarHref?: string;
-    description?: string;
-    footerButton?: React.ReactNode;
+  id: string;
+  title?: string;
+  username?: string;
+  description?: string;
+
+  // Avatar
+  sourceAvatar?: string;
+  rightComponentAvatar?: React.ReactNode;
 }) {
-    return (
-      <>
-        <BaseBox href={`/event/${id}/publish`}>
-          <StackCustom gap={"xs"}>
-            <AvatarUsernameAndOtherComponent
-              avatarHref={`/profile/${id}`}
-              name="Lorem ipsum dolor sit"
-            />
-            <TextCustom truncate bold>
-              Lorem ipsum dolor sit
-            </TextCustom>
-            <TextCustom truncate={2}>
-              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!
-            </TextCustom>
-          </StackCustom>
-        </BaseBox>
-        {footerButton}
-      </>
-    );
+  return (
+    <>
+      <BaseBox href={`/event/${id}/history`}>
+        <StackCustom gap={"xs"}>
+          <AvatarUsernameAndOtherComponent
+            avatarHref={`/profile/${id}`}
+            name={username || "Lorem ipsum dolor sit"}
+            rightComponent={rightComponentAvatar}
+            avatar={sourceAvatar as any}
+          />
+          <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!"}
+          </TextCustom>
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
 }
-    
\ No newline at end of file