From c9a1ac1db5600dc04e17bd9d3b8c6c564b253ed2 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Mon, 28 Jul 2025 17:29:52 +0800
Subject: [PATCH] Voting Add: - BoxDetailContribution -
 app/(application)/(user)/voting/[id]/contribution.tsx

Fix:
- app/(application)/(user)/voting/(tabs)/contribution.tsx
- app/(application)/(user)/voting/[id]/[status]/detail.tsx
- app/(application)/(user)/voting/[id]/list-of-contributor.tsx
- app/(application)/(user)/voting/[id]/index.tsx

# No Issue
---
 app/(application)/(user)/_layout.tsx          |  7 --
 .../(user)/voting/(tabs)/contribution.tsx     | 14 +--
 .../(user)/voting/[id]/[status]/detail.tsx    | 30 +++----
 .../(user)/voting/[id]/contribution.tsx       | 65 ++++++++++++++
 .../(user)/voting/[id]/index.tsx              | 90 ++++++++++++++++---
 .../voting/[id]/list-of-contributor.tsx       | 19 ++--
 components/_Icon/IconContribution.tsx         |  2 +-
 .../AvataraAndOtherHeaderComponent.tsx        | 44 +++++----
 screens/Voting/BoxDetailContribution.tsx      | 56 ++++++++++++
 9 files changed, 246 insertions(+), 81 deletions(-)
 create mode 100644 app/(application)/(user)/voting/[id]/contribution.tsx
 create mode 100644 screens/Voting/BoxDetailContribution.tsx

diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 42b1416..ff4bbaf 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -165,13 +165,6 @@ export default function UserLayout() {
             headerLeft: () => <BackButton path="/home" />,
           }}
         />
-        <Stack.Screen
-          name="voting/[id]/index"
-          options={{
-            title: "Detail Voting",
-            headerLeft: () => <BackButton />,
-          }}
-        />
         <Stack.Screen
           name="voting/[id]/edit"
           options={{
diff --git a/app/(application)/(user)/voting/(tabs)/contribution.tsx b/app/(application)/(user)/voting/(tabs)/contribution.tsx
index 18fa687..d25d423 100644
--- a/app/(application)/(user)/voting/(tabs)/contribution.tsx
+++ b/app/(application)/(user)/voting/(tabs)/contribution.tsx
@@ -1,25 +1,15 @@
 import {
-  BadgeCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
-import { GStyles } from "@/styles/global-styles";
 
 export default function VotingContribution() {
-  const bottomComponent = (
-    <StackCustom>
-      <TextCustom align="center">Pilihan Anda:</TextCustom>
-      <BadgeCustom style={[GStyles.alignSelfCenter]}>Pilihan 1</BadgeCustom>
-    </StackCustom>
-  );
   return (
     <ViewWrapper hideFooter>
       {Array.from({ length: 5 }).map((_, index) => (
         <Voting_BoxPublishSection
           key={index}
-          bottomComponent={bottomComponent}
+          href={`/voting/${index}/contribution`}
         />
       ))}
     </ViewWrapper>
diff --git a/app/(application)/(user)/voting/[id]/[status]/detail.tsx b/app/(application)/(user)/voting/[id]/[status]/detail.tsx
index c7d16ae..bd20106 100644
--- a/app/(application)/(user)/voting/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/voting/[id]/[status]/detail.tsx
@@ -1,19 +1,16 @@
 import {
-    AlertDefaultSystem,
-    BackButton,
-    DotButton,
-    DrawerCustom,
-    MenuDrawerDynamicGrid,
-    Spacing,
-    ViewWrapper,
+  AlertDefaultSystem,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
 } from "@/components";
-import { IconArchive, IconEdit } from "@/components/_Icon";
+import { IconArchive, IconContribution, IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Voting_BoxDetailSection } from "@/screens/Voting/BoxDetailSection";
 import Voting_ButtonStatusSection from "@/screens/Voting/ButtonStatusSection";
-import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 
@@ -44,7 +41,6 @@ export default function VotingDetailStatus() {
     router.navigate(item.path as any);
     setOpenDrawerPublish(false);
   };
-    
 
   return (
     <>
@@ -66,6 +62,7 @@ export default function VotingDetailStatus() {
         <Spacing />
       </ViewWrapper>
 
+      {/* ========= Draft Drawer ========= */}
       <DrawerCustom
         isVisible={openDrawerDraft}
         closeDrawer={() => setOpenDrawerDraft(false)}
@@ -84,6 +81,7 @@ export default function VotingDetailStatus() {
         />
       </DrawerCustom>
 
+      {/* ========= Publish Drawer ========= */}
       <DrawerCustom
         isVisible={openDrawerPublish}
         closeDrawer={() => setOpenDrawerPublish(false)}
@@ -92,13 +90,7 @@ export default function VotingDetailStatus() {
         <MenuDrawerDynamicGrid
           data={[
             {
-              icon: (
-                <Ionicons
-                  name="people"
-                  size={ICON_SIZE_SMALL}
-                  color={MainColor.white}
-                />
-              ),
+              icon: <IconContribution />,
               label: "Daftar Kontributor",
               path: `/voting/${id}/list-of-contributor`,
             },
diff --git a/app/(application)/(user)/voting/[id]/contribution.tsx b/app/(application)/(user)/voting/[id]/contribution.tsx
new file mode 100644
index 0000000..34a05b1
--- /dev/null
+++ b/app/(application)/(user)/voting/[id]/contribution.tsx
@@ -0,0 +1,65 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BackButton,
+    DotButton,
+    DrawerCustom,
+    MenuDrawerDynamicGrid,
+    Spacing,
+    ViewWrapper,
+} from "@/components";
+import { IconContribution } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { Voting_BoxDetailContributionSection } from "@/screens/Voting/BoxDetailContribution";
+import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function VotingDetailContribution() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Detail Kontribusi",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          ),
+        }}
+      />
+
+      <ViewWrapper>
+        <Voting_BoxDetailContributionSection
+          headerAvatar={<AvatarUsernameAndOtherComponent />}
+        />
+        <Voting_BoxDetailHasilVotingSection />
+        <Spacing />
+      </ViewWrapper>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconContribution />,
+              label: "Daftar Kontributor",
+              path: `/voting/${id}/list-of-contributor`,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/voting/[id]/index.tsx b/app/(application)/(user)/voting/[id]/index.tsx
index 922efcb..5bd3f44 100644
--- a/app/(application)/(user)/voting/[id]/index.tsx
+++ b/app/(application)/(user)/voting/[id]/index.tsx
@@ -1,25 +1,87 @@
 import {
-    AvatarUsernameAndOtherComponent,
-    InformationBox,
-    StackCustom,
-    ViewWrapper
+  AlertDefaultSystem,
+  AvatarUsernameAndOtherComponent,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  InformationBox,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  ViewWrapper,
 } from "@/components";
+import { IconArchive, IconContribution } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
 import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
 import { Voting_BoxDetailPublishSection } from "@/screens/Voting/BoxDetailPublishSection";
-import React from "react";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import React, { useState } from "react";
 
 export default function VotingDetail() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+  const handlePressPublish = (item: IMenuDrawerItem) => {
+    if (item.path === "") {
+      AlertDefaultSystem({
+        title: "Update Arsip",
+        message: "Apakah Anda yakin ingin mengarsipkan voting ini?",
+        textLeft: "Batal",
+        textRight: "Ya",
+        onPressRight: () => {
+          console.log("Hapus");
+          router.back();
+        },
+      });
+    }
+    router.navigate(item.path as any);
+    setOpenDrawerPublish(false);
+  };
+
   return (
-    <ViewWrapper>
-      <StackCustom>
-        <InformationBox text="Untuk sementara voting ini belum di buka. Voting akan dimulai sesuai dengan tanggal awal pemilihan, dan akan ditutup sesuai dengan tanggal akhir pemilihan." />
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail Voting`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          ),
+        }}
+      />
 
-        <Voting_BoxDetailPublishSection
-          headerAvatar={<AvatarUsernameAndOtherComponent />}
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox text="Untuk sementara voting ini belum di buka. Voting akan dimulai sesuai dengan tanggal awal pemilihan, dan akan ditutup sesuai dengan tanggal akhir pemilihan." />
+
+          <Voting_BoxDetailPublishSection
+            headerAvatar={<AvatarUsernameAndOtherComponent />}
+          />
+
+          <Voting_BoxDetailHasilVotingSection />
+        </StackCustom>
+      </ViewWrapper>
+
+      {/* ========= Publish Drawer ========= */}
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconContribution />,
+              label: "Daftar Kontributor",
+              path: `/voting/${id}/list-of-contributor`,
+            },
+            {
+              icon: <IconArchive />,
+              label: "Update Arsip",
+              path: "" as any,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
         />
-
-        <Voting_BoxDetailHasilVotingSection />
-      </StackCustom>
-    </ViewWrapper>
+      </DrawerCustom>
+    </>
   );
 }
diff --git a/app/(application)/(user)/voting/[id]/list-of-contributor.tsx b/app/(application)/(user)/voting/[id]/list-of-contributor.tsx
index 9f0517e..eab08a5 100644
--- a/app/(application)/(user)/voting/[id]/list-of-contributor.tsx
+++ b/app/(application)/(user)/voting/[id]/list-of-contributor.tsx
@@ -1,15 +1,24 @@
 import {
-    AvatarUsernameAndOtherComponent,
-    BaseBox,
-    ViewWrapper
+  AvatarUsernameAndOtherComponent,
+  BadgeCustom,
+  BaseBox,
+  ViewWrapper,
 } from "@/components";
 
 export default function Voting_ListOfContributor() {
   return (
     <ViewWrapper>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index.toString()}>
-          <AvatarUsernameAndOtherComponent />
+        <BaseBox paddingTop={5} paddingBottom={5} key={index.toString()}>
+          <AvatarUsernameAndOtherComponent
+            rightComponent={
+              <BadgeCustom
+                style={{alignSelf: "flex-end" }}
+              >
+                Pilihan {index + 1}
+              </BadgeCustom>
+            }
+          />
         </BaseBox>
       ))}
     </ViewWrapper>
diff --git a/components/_Icon/IconContribution.tsx b/components/_Icon/IconContribution.tsx
index a352392..46fb109 100644
--- a/components/_Icon/IconContribution.tsx
+++ b/components/_Icon/IconContribution.tsx
@@ -6,7 +6,7 @@ export default function IconContribution({ color }: { color?: string }) {
     <>
       <Ionicons
         size={ICON_SIZE_SMALL}
-        name="extension-puzzle"
+        name="people"
         color={color || "white"}
       />
     </>
diff --git a/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx b/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
index 42380ba..d25ef4b 100644
--- a/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
+++ b/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
@@ -1,8 +1,8 @@
-import { ImageSourcePropType, View } from "react-native";
+import { ImageSourcePropType } from "react-native";
+import Divider from "../Divider/Divider";
 import Grid from "../Grid/GridCustom";
 import AvatarCustom from "../Image/AvatarCustom";
 import TextCustom from "../Text/TextCustom";
-import Divider from "../Divider/Divider"
 
 const AvatarUsernameAndOtherComponent = ({
   avatarHref,
@@ -19,30 +19,28 @@ const AvatarUsernameAndOtherComponent = ({
 }) => {
   return (
     <>
-        <Grid containerStyle={{ zIndex: 10 }}>
-          <Grid.Col span={2}>
-            <AvatarCustom source={avatar} href={avatarHref as any} />
-          </Grid.Col>
+      <Grid containerStyle={{ zIndex: 10 }}>
+        <Grid.Col span={2}>
+          <AvatarCustom source={avatar} href={avatarHref as any} />
+        </Grid.Col>
+        <Grid.Col
+          span={rightComponent ? 6 : 10}
+          style={{ justifyContent: "center" }}
+        >
+          <TextCustom truncate bold>
+            {name || "Username"}
+          </TextCustom>
+        </Grid.Col>
+        {rightComponent && (
           <Grid.Col
-            span={rightComponent ? 6 : 10}
-            style={{ justifyContent: "center" }}
+            span={4}
+            style={{ alignItems: "flex-end", justifyContent: "center" }}
           >
-            <TextCustom truncate bold>
-              {name || "Username"}
-            </TextCustom>
+            {rightComponent}
           </Grid.Col>
-          {rightComponent && (
-            <Grid.Col
-              span={4}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
-            >
-              {rightComponent}
-            </Grid.Col>
-          )}
-        </Grid>
-        {withBottomLine && <Divider marginTop={0} />}
-      <View>
-      </View>
+        )}
+      </Grid>
+      {withBottomLine && <Divider marginTop={0} />}
     </>
   );
 };
diff --git a/screens/Voting/BoxDetailContribution.tsx b/screens/Voting/BoxDetailContribution.tsx
new file mode 100644
index 0000000..d92165d
--- /dev/null
+++ b/screens/Voting/BoxDetailContribution.tsx
@@ -0,0 +1,56 @@
+import {
+    BadgeCustom,
+    BoxWithHeaderSection,
+    Spacing,
+    StackCustom,
+    TextCustom,
+} from "@/components";
+import { GStyles } from "@/styles/global-styles";
+import dayjs from "dayjs";
+import { View } from "react-native";
+
+export function Voting_BoxDetailContributionSection({
+  headerAvatar,
+}: {
+  headerAvatar?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BoxWithHeaderSection>
+        {headerAvatar ? headerAvatar : <Spacing />}
+        <StackCustom gap={"lg"}>
+          <TextCustom align="center" bold size="large">
+            Title of Voting Here
+          </TextCustom>
+          <TextCustom>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Perspiciatis corporis blanditiis est provident corrupti facilis iste
+            cum voluptate. Natus eum aut quos consequatur doloribus fugiat sit
+            ullam minima non enim?
+          </TextCustom>
+          <View>
+            <TextCustom bold size="small" align="center">
+              Batas Voting
+            </TextCustom>
+            <BadgeCustom
+              style={[GStyles.alignSelfCenter, { width: "70%" }]}
+              variant="light"
+            >
+              {dayjs().format("DD/MM/YYYY")} -{" "}
+              {dayjs().add(1, "day").format("DD/MM/YYYY")}
+            </BadgeCustom>
+          </View>
+
+          <StackCustom gap={"xs"}>
+            <TextCustom bold size="small" align="center">
+              Pilihan Anda
+            </TextCustom>
+            <BadgeCustom style={[GStyles.alignSelfCenter]}>
+              Pilihan 1
+            </BadgeCustom>
+          </StackCustom>
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </>
+  );
+}