From 81d86885f4232d5708a75e2d63eda91e486b43c7 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Tue, 22 Jul 2025 15:20:53 +0800
Subject: [PATCH] Deskripsi Event: Add 
 app/(application)/(user)/event/[id]/history

# No Issue"
---
 .../(user)/event/(tabs)/contribution.tsx      | 15 +++-----
 .../(user)/event/(tabs)/status.tsx            |  8 ++--
 components/Box/BaseBox.tsx                    | 12 ++++--
 components/Box/BoxWithHeaderInformation.tsx   | 20 ++++++++++
 components/index.ts                           | 37 +++++++++----------
 screens/Event/BoxPublishSection.tsx           |  6 +--
 6 files changed, 58 insertions(+), 40 deletions(-)
 create mode 100644 components/Box/BoxWithHeaderInformation.tsx

diff --git a/app/(application)/(user)/event/(tabs)/contribution.tsx b/app/(application)/(user)/event/(tabs)/contribution.tsx
index 780d5f7..c056b33 100644
--- a/app/(application)/(user)/event/(tabs)/contribution.tsx
+++ b/app/(application)/(user)/event/(tabs)/contribution.tsx
@@ -1,28 +1,25 @@
 import {
   AvatarCustom,
   AvatarUsernameAndOtherComponent,
-  BaseBox,
+  BoxWithHeaderSection,
   Grid,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import React from "react";
 
 export default function EventContribution() {
   return (
     <ViewWrapper hideFooter>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} href={`/event/${index}/contribution`}>
+        <BoxWithHeaderSection key={index} href={`/event/${index}/contribution`}>
           <StackCustom>
             <AvatarUsernameAndOtherComponent
               avatarHref={`/profile/${index}`}
               rightComponent={
                 <TextCustom truncate>
-                  {new Date().toDateString().split(" ")[2] +
-                    ", " +
-                    new Date().toDateString().split(" ")[1] +
-                    " " +
-                    new Date().toDateString().split(" ")[3]}
+                  {new Date().toLocaleDateString()}
                 </TextCustom>
               }
             />
@@ -39,7 +36,7 @@ export default function EventContribution() {
               ))}
             </Grid>
           </StackCustom>
-        </BaseBox>
+        </BoxWithHeaderSection>
       ))}
     </ViewWrapper>
   );
diff --git a/app/(application)/(user)/event/(tabs)/status.tsx b/app/(application)/(user)/event/(tabs)/status.tsx
index be81907..86cccc5 100644
--- a/app/(application)/(user)/event/(tabs)/status.tsx
+++ b/app/(application)/(user)/event/(tabs)/status.tsx
@@ -1,9 +1,9 @@
 import {
-  BaseBox,
+  BoxWithHeaderSection,
   Grid,
   ScrollableCustom,
   StackCustom,
-  TextCustom,
+  TextCustom
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { masterStatus } from "@/lib/dummy-data/_master/status";
@@ -35,7 +35,7 @@ export default function EventStatus() {
 
   return (
     <ViewWrapper headerComponent={scrollComponent}>
-      <BaseBox href={`/event/${id}/${activeCategory}/detail-event`}>
+      <BoxWithHeaderSection href={`/event/${id}/${activeCategory}/detail-event`}>
         <StackCustom gap={"xs"}>
           <Grid>
             <Grid.Col span={8}>
@@ -57,7 +57,7 @@ export default function EventStatus() {
             dolore optio porro!
           </TextCustom>
         </StackCustom>
-      </BaseBox>
+      </BoxWithHeaderSection>
     </ViewWrapper>
   );
 }
diff --git a/components/Box/BaseBox.tsx b/components/Box/BaseBox.tsx
index 7512fbc..a9cf39c 100644
--- a/components/Box/BaseBox.tsx
+++ b/components/Box/BaseBox.tsx
@@ -1,16 +1,14 @@
 import { AccentColor } from "@/constants/color-palet";
 import {
-  PADDING_EXTRA_SMALL,
   PADDING_MEDIUM,
-  PADDING_SMALL,
+  PADDING_SMALL
 } from "@/constants/constans-value";
 import { Href, router } from "expo-router";
 import {
   StyleProp,
-  TouchableHighlight,
   TouchableOpacity,
   View,
-  ViewStyle,
+  ViewStyle
 } from "react-native";
 
 interface BaseBoxProps {
@@ -20,6 +18,8 @@ interface BaseBoxProps {
   onPress?: () => void;
   marginBottom?: number;
   padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
   paddingInline?: number;
   paddingBlock?: number;
 }
@@ -32,6 +32,8 @@ export default function BaseBox({
   marginBottom = PADDING_MEDIUM,
   paddingBlock = PADDING_MEDIUM,
   paddingInline = PADDING_SMALL,
+  paddingTop = PADDING_MEDIUM,
+  paddingBottom = PADDING_MEDIUM,
 }: BaseBoxProps) {
 
   return (
@@ -49,6 +51,8 @@ export default function BaseBox({
               marginBottom,
               paddingBlock,
               paddingInline,
+              paddingTop,
+              paddingBottom,
             },
             style,
           ]}
diff --git a/components/Box/BoxWithHeaderInformation.tsx b/components/Box/BoxWithHeaderInformation.tsx
new file mode 100644
index 0000000..a938aa1
--- /dev/null
+++ b/components/Box/BoxWithHeaderInformation.tsx
@@ -0,0 +1,20 @@
+import { Href } from "expo-router";
+import BaseBox from "./BaseBox";
+
+export default function BoxWithHeaderSection({
+  children,
+  href,
+  onPress,
+}: {
+  children: React.ReactNode;
+  href?: Href;
+  onPress?: () => void;
+}) {
+  return (
+    <>
+      <BaseBox href={href} onPress={onPress} paddingTop={5}>
+        {children}
+      </BaseBox>
+    </>
+  );
+}
diff --git a/components/index.ts b/components/index.ts
index 9793a12..b064049 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -19,6 +19,7 @@ import Grid from "./Grid/GridCustom";
 // Box
 import BaseBox from "./Box/BaseBox";
 import BoxButtonOnFooter from "./Box/BoxButtonOnFooter";
+import BoxWithHeaderSection from "./Box/BoxWithHeaderInformation";
 import InformationBox from "./Box/InformationBox";
 // Stack
 import StackCustom from "./Stack/StackCustom";
@@ -38,30 +39,35 @@ import ClickableCustom from "./Clickable/ClickableCustom";
 // Scroll
 import ScrollableCustom from "./Scroll/ScrollCustom";
 // ShareComponent
+import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 import Spacing from "./_ShareComponent/Spacing";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
-import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 export {
   AlertCustom,
   // Image
   AvatarCustom,
-  LandscapeFrameUploaded,
+  // ShareComponent
+  AvatarUsernameAndOtherComponent, LeftButtonCustom as BackButton,
   // Box
   BaseBox,
-  BoxButtonOnFooter,
-  InformationBox,
+  BoxButtonOnFooter, BoxWithHeaderSection,
   // Button
   ButtonCenteredOnly,
   ButtonCustom,
-  LeftButtonCustom as BackButton,
-  DotButton,
+  // Center
+  CenterCustom,
+  // Clickable
+  ClickableCustom,
+  // Divider
+  DividerCustom, DotButton,
   // Drawer
   DrawerCustom,
-  MenuDrawerDynamicGrid,
   // Grid
-  Grid,
+  Grid, InformationBox, LandscapeFrameUploaded,
   // Map
-  MapCustom,
+  MapCustom, MenuDrawerDynamicGrid,
+  // Scroll
+  ScrollableCustom,
   // Select
   SelectCustom,
   // ShareComponent
@@ -75,15 +81,6 @@ export {
   // TextInput
   TextInputCustom,
   // ViewWrapper
-  ViewWrapper,
-  // Divider
-  DividerCustom,
-  // Center
-  CenterCustom,
-  // Clickable
-  ClickableCustom,
-  // Scroll
-  ScrollableCustom,
-  // ShareComponent
-  AvatarUsernameAndOtherComponent,
+  ViewWrapper
 };
+
diff --git a/screens/Event/BoxPublishSection.tsx b/screens/Event/BoxPublishSection.tsx
index ebd9da2..288dd5d 100644
--- a/screens/Event/BoxPublishSection.tsx
+++ b/screens/Event/BoxPublishSection.tsx
@@ -1,6 +1,6 @@
 import {
   AvatarUsernameAndOtherComponent,
-  BaseBox,
+  BoxWithHeaderSection,
   StackCustom,
   TextCustom,
 } from "@/components";
@@ -26,7 +26,7 @@ export default function Event_BoxPublishSection({
 }) {
   return (
     <>
-      <BaseBox href={`/event/${id}/history`}>
+      <BoxWithHeaderSection href={`/event/${id}/history`}>
         <StackCustom gap={"xs"}>
           <AvatarUsernameAndOtherComponent
             avatarHref={`/profile/${id}`}
@@ -42,7 +42,7 @@ export default function Event_BoxPublishSection({
               "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>
+      </BoxWithHeaderSection>
     </>
   );
 }