Crowd

Add:
-  assets/images/constants/crowd-hipmi.png
-  app/(application)/(user)/crowdfunding/
-  app/(application)/(user)/investment/
-  app/(application)/(user)/donation/

Fix:
-  screens/Home/topFeatureSection.tsx
-  app/(application)/(user)/_layout.tsx

## No Issue

app/(application)/(user)/_layout.tsx

@@ -147,7 +147,6 @@ export default function UserLayout() {
           }}
         />
 
-
         {/* ========== End Collaboration Section ========= */}
 
         {/* ========== Voting Section ========= */}
@@ -182,6 +181,39 @@ export default function UserLayout() {
 
         {/* ========== End Voting Section ========= */}
 
+        {/* ========== Crowdfunding Section ========= */}
+        <Stack.Screen
+          name="crowdfunding/index"
+          options={{
+            title: "Crowdfunding",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Crowdfunding Section ========= */}
+
+        {/* ========== Investment Section ========= */}
+        <Stack.Screen
+          name="investment/create"
+          options={{
+            title: "Tambah Investasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Investment Section ========= */}
+        
+        {/* ========== Donation Section ========= */}
+        <Stack.Screen
+          name="donation/create"
+          options={{
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Donation Section ========= */}
+
         {/* ========== Job Section ========= */}
         <Stack.Screen
           name="job/create"

app/(application)/(user)/crowdfunding/index.tsx

@@ -0,0 +1,68 @@
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Feather } from "@expo/vector-icons";
+import { Image } from "expo-image";
+
+export default function Crowdfunding() {
+  const listPage = [
+    {
+      title: "Investasi",
+      desc: "Buat investasi dan jual beli saham lebih mudah dengan pengguna lain.",
+      path: "investment/create",
+    },
+    {
+      title: "Donasi",
+      desc: "Berbagi info untuk berdonasi lebih luas dan lebih efisien.",
+      path: "donation/create",
+    },
+  ];
+
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <Image
+          source={require("@/assets/images/constants/crowd-hipmi.png")}
+          contentFit="cover"
+          transition={1000}
+          style={{
+            width: "100%",
+            height: 200,
+            borderRadius: 10,
+          }}
+        />
+
+        {listPage.map((item, index) => (
+          <BaseBox key={index} paddingTop={10} paddingBottom={10} href={item.path as any} marginBottom={0}>
+            <Grid>
+              <Grid.Col span={10}>
+               <StackCustom gap={"xs"}>
+               <TextCustom bold size="large">
+                  {item.title}
+                </TextCustom>
+                <TextCustom>{item.desc}</TextCustom>
+               </StackCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={2}
+                style={{ alignItems: "flex-end", justifyContent: "center" }}
+              >
+                <Feather
+                  name="chevron-right"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/donation/create.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function DonationCreate() {
+  return (
+    <ViewWrapper>
+      <TextCustom bold size="large">
+        Coming Soon !
+      </TextCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/investment/create.tsx

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function InvestmentCreate() {
+  return (
+    <ViewWrapper>
+      <TextCustom bold size="large">
+        Buat Investasi
+      </TextCustom>
+    </ViewWrapper>
+  );
+}

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/Home/topFeatureSection.tsx

@@ -30,33 +30,14 @@ export default function Home_FeatureSection() {
           <Ionicons name="cube" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Voting</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
+        <TouchableOpacity
+          style={stylesHome.gridItem}
+          onPress={() => router.push("/(application)/(user)/crowdfunding")}
+        >
           <Ionicons name="heart" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
         </TouchableOpacity>
       </View>
-
-      {/* <View style={stylesHome.gridContainer}>
-        <TouchableOpacity
-          style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/event")}
-        >
-          <Ionicons name="analytics" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Event</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
-          <Ionicons name="share" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Collaboration</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
-          <Ionicons name="cube" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Voting</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
-          <Ionicons name="heart" size={48} color="white" />
-          <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
-        </TouchableOpacity>
-      </View> */}
     </>
   );
 }

screens/Voting/BoxDetailContribution.tsx

@@ -1,13 +1,12 @@
 import {
-    BadgeCustom,
-    BoxWithHeaderSection,
-    Spacing,
-    StackCustom,
-    TextCustom,
+  BadgeCustom,
+  BoxWithHeaderSection,
+  Spacing,
+  StackCustom,
+  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_BoxDetailContributionSection({
   headerAvatar,
@@ -19,27 +18,7 @@ export function Voting_BoxDetailContributionSection({
       <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>
+          <Voting_ComponentDetailDataSection />
 
           <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,
-    ButtonCustom,
-    Spacing,
-    StackCustom,
-    TextCustom,
+  BoxWithHeaderSection,
+  ButtonCustom,
+  Spacing,
+  StackCustom,
+  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">
-            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>
+          <Voting_ComponentDetailDataSection />
 
           <View>
             <TextCustom bold size="small">
@@ -61,9 +39,7 @@ export function Voting_BoxDetailPublishSection({
             </RadioGroup>
           </View>
 
-          <ButtonCustom onPress={() => console.log("vote")}>
-            Vote
-          </ButtonCustom>
+          <ButtonCustom onPress={() => console.log("vote")}>Vote</ButtonCustom>
         </StackCustom>
       </BoxWithHeaderSection>
     </>

screens/Voting/BoxDetailSection.tsx

@@ -1,13 +1,11 @@
 import {
-    BadgeCustom,
-    BoxWithHeaderSection,
-    Spacing,
-    StackCustom,
-    TextCustom,
+  BoxWithHeaderSection,
+  Spacing,
+  StackCustom,
+  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">
-            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>
+          <Voting_ComponentDetailDataSection/>
+          <Spacing/>
 
           <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>
+    </>
+  );
+}