Voting:

Add:
- ComponentDetailDataSection : Tampilan judul, deskripsi, batas waktu
- BoxDetailHistorySection
- (user)/voting/[id]/history

Fix:
Perbaikan component detail data pada:
- screens/Voting/BoxDetailSection.tsx
-  screens/Voting/BoxDetailPublishSection.tsx
- screens/Voting/BoxDetailContribution.tsx

# No Issue

app/(application)/(user)/voting/(tabs)/history.tsx

@@ -26,7 +26,11 @@ export default function VotingHistory() {
       }
     >
       {Array.from({ length: 10 }).map((_, index) => (
-        <Voting_BoxPublishSection key={index} id={activeCategory as any} />
+        <Voting_BoxPublishSection
+          key={index}
+          id={activeCategory as any}
+          href={`/voting/${index}/history`}
+        />
       ))}
     </ViewWrapper>
   );

app/(application)/(user)/voting/[id]/history.tsx

@@ -0,0 +1,64 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BackButton,
+    DotButton,
+    DrawerCustom,
+    MenuDrawerDynamicGrid,
+    Spacing,
+    ViewWrapper,
+} from "@/components";
+import { IconContribution } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
+import { Voting_BoxDetailHistorySection } from "@/screens/Voting/BoxDetailHistorySection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function VotingDetailHistory() {
+  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: "Riwayat Voting",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          ),
+        }}
+      />
+      <ViewWrapper>
+        <Voting_BoxDetailHistorySection
+          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>
+    </>
+  );
+}

screens/Voting/BoxDetailContribution.tsx

@@ -1,13 +1,12 @@
 import {
-    BadgeCustom,
+  BadgeCustom,
-    BoxWithHeaderSection,
+  BoxWithHeaderSection,
-    Spacing,
+  Spacing,
-    StackCustom,
+  StackCustom,
-    TextCustom,
+  TextCustom,
 } from "@/components";
 import { GStyles } from "@/styles/global-styles";
-import dayjs from "dayjs";
+import { Voting_ComponentDetailDataSection } from "./ComponentDetailDataSection";
-import { View } from "react-native";
 
 export function Voting_BoxDetailContributionSection({
   headerAvatar,
@@ -19,27 +18,7 @@ export function Voting_BoxDetailContributionSection({
       <BoxWithHeaderSection>
         {headerAvatar ? headerAvatar : <Spacing />}
         <StackCustom gap={"lg"}>
-          <TextCustom align="center" bold size="large">
+          <Voting_ComponentDetailDataSection />
-            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">

screens/Voting/BoxDetailHistorySection.tsx

@@ -0,0 +1,23 @@
+import {
+  BoxWithHeaderSection,
+  Spacing,
+  StackCustom
+} from "@/components";
+import { Voting_ComponentDetailDataSection } from "./ComponentDetailDataSection";
+
+export function Voting_BoxDetailHistorySection({
+  headerAvatar,
+}: {
+  headerAvatar?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BoxWithHeaderSection>
+        {headerAvatar ? headerAvatar : <Spacing />}
+        <StackCustom>
+          <Voting_ComponentDetailDataSection />
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </>
+  );
+}

screens/Voting/BoxDetailPublishSection.tsx

@@ -1,16 +1,14 @@
 import {
-    BadgeCustom,
+  BoxWithHeaderSection,
-    BoxWithHeaderSection,
+  ButtonCustom,
-    ButtonCustom,
+  Spacing,
-    Spacing,
+  StackCustom,
-    StackCustom,
+  TextCustom
-    TextCustom,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
-import { GStyles } from "@/styles/global-styles";
-import dayjs from "dayjs";
 import { useState } from "react";
 import { View } from "react-native";
+import { Voting_ComponentDetailDataSection } from "./ComponentDetailDataSection";
 
 export function Voting_BoxDetailPublishSection({
   headerAvatar,
@@ -23,27 +21,7 @@ export function Voting_BoxDetailPublishSection({
       <BoxWithHeaderSection>
         {headerAvatar ? headerAvatar : <Spacing />}
         <StackCustom gap={"lg"}>
-          <TextCustom align="center" bold size="large">
+          <Voting_ComponentDetailDataSection />
-            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>
 
           <View>
             <TextCustom bold size="small">
@@ -61,9 +39,7 @@ export function Voting_BoxDetailPublishSection({
             </RadioGroup>
           </View>
 
-          <ButtonCustom onPress={() => console.log("vote")}>
+          <ButtonCustom onPress={() => console.log("vote")}>Vote</ButtonCustom>
-            Vote
-          </ButtonCustom>
         </StackCustom>
       </BoxWithHeaderSection>
     </>

screens/Voting/BoxDetailSection.tsx

@@ -1,13 +1,11 @@
 import {
-    BadgeCustom,
+  BoxWithHeaderSection,
-    BoxWithHeaderSection,
+  Spacing,
-    Spacing,
+  StackCustom,
-    StackCustom,
+  TextCustom
-    TextCustom,
 } from "@/components";
-import { GStyles } from "@/styles/global-styles";
-import dayjs from "dayjs";
 import { View } from "react-native";
+import { Voting_ComponentDetailDataSection } from "./ComponentDetailDataSection";
 
 export function Voting_BoxDetailSection({
   headerAvatar,
@@ -19,27 +17,8 @@ export function Voting_BoxDetailSection({
       <BoxWithHeaderSection>
         {headerAvatar ? headerAvatar : <Spacing />}
         <StackCustom>
-          <TextCustom align="center" bold size="large">
+          <Voting_ComponentDetailDataSection/>
-            Title of Voting Here
+          <Spacing/>
-          </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>
 
           <View>
             <TextCustom bold size="small">

screens/Voting/ComponentDetailDataSection.tsx

@@ -0,0 +1,32 @@
+import { BadgeCustom, TextCustom } from "@/components";
+import { GStyles } from "@/styles/global-styles";
+import dayjs from "dayjs";
+import { View } from "react-native";
+
+export function Voting_ComponentDetailDataSection() {
+  return (
+    <>
+      <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>
+    </>
+  );
+}