Icon:

Add:
- IconArchive

Voting
Add:
- detail voting
- BoxDetailHasilVotingSection
- BoxDetailPublishSection
- BoxDetailSection
- ButtonStatusSection

Fix:
- BoxPublishSection
- ReportListSection: Hapus import useless

# No Issue

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

@@ -165,14 +165,27 @@ export default function UserLayout() {
             headerLeft: () => <BackButton path="/home" />,
           }}
         />
-       
-        {/* <Stack.Screen
+        <Stack.Screen
+          name="voting/[id]/index"
+          options={{
+            title: "Detail Voting",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
           name="voting/[id]/edit"
           options={{
             title: "Edit Voting",
             headerLeft: () => <BackButton />,
           }}
-        /> */}
+        />
+        <Stack.Screen
+          name="voting/[id]/list-of-contributor"
+          options={{
+            title: "Daftar Kontributor",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Voting Section ========= */}
 

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

@@ -16,7 +16,7 @@ export default function VotingBeranda() {
       headerComponent={<SearchInput placeholder="Cari voting" />}
     >
       {Array.from({ length: 5 }).map((_, index) => (
-        <Voting_BoxPublishSection key={index} />
+        <Voting_BoxPublishSection key={index} href={`/voting/${index}`} />
       ))}
     </ViewWrapper>
   );

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

@@ -4,7 +4,7 @@ import {
   ScrollableCustom,
   StackCustom,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { masterStatus } from "@/lib/dummy-data/_master/status";
 import dayjs from "dayjs";
@@ -39,8 +39,7 @@ export default function VotingStatus() {
           key={i}
           paddingTop={20}
           paddingBottom={20}
-          // href={`/job/${e.id}/${activeCategory}/detail`}
-          // onPress={() => console.log("pressed")}
+          href={`/voting/${i}/${activeCategory}/detail`}
         >
           <StackCustom>
             <TextCustom align="center" bold truncate size="large">

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

@@ -0,0 +1,116 @@
+import {
+    AlertDefaultSystem,
+    BackButton,
+    DotButton,
+    DrawerCustom,
+    MenuDrawerDynamicGrid,
+    Spacing,
+    ViewWrapper,
+} from "@/components";
+import { IconArchive, 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";
+
+export default function VotingDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
+  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+
+  const handlePressDraft = (item: IMenuDrawerItem) => {
+    console.log("PATH >> ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawerDraft(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 (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${status}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <Voting_BoxDetailSection />
+        <Voting_ButtonStatusSection status={status as string} />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawerDraft}
+        closeDrawer={() => setOpenDrawerDraft(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit",
+              path: `/voting/${id}/edit`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePressDraft as any}
+        />
+      </DrawerCustom>
+
+      <DrawerCustom
+        isVisible={openDrawerPublish}
+        closeDrawer={() => setOpenDrawerPublish(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <Ionicons
+                  name="people"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Daftar Kontributor",
+              path: `/voting/${id}/list-of-contributor`,
+            },
+            {
+              icon: <IconArchive />,
+              label: "Update Arsip",
+              path: "" as any,
+            },
+          ]}
+          onPressItem={handlePressPublish as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,78 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { TouchableOpacity } from "react-native";
+
+export default function VotingEdit() {
+  const buttonSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            onPress={() =>
+              router.back()
+            }
+          >
+            Update
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <ViewWrapper footerComponent={buttonSubmit()}>
+      <StackCustom gap={"xs"}>
+        <TextInputCustom
+          label="Judul Voting"
+          placeholder="MasukanJudul Voting"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi"
+          placeholder="Masukan Deskripsi"
+          required
+          showCount
+          maxLength={1000}
+        />
+        <DateTimePickerCustom label="Mulai Voting" required />
+        <DateTimePickerCustom label="Voting Berakhir" required />
+
+        <Grid>
+          <Grid.Col span={10}>
+            <TextInputCustom
+              label="Pilihan"
+              placeholder="Masukan Pilihan"
+              required
+            />
+          </Grid.Col>
+          <Grid.Col
+            span={2}
+            style={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <TouchableOpacity onPress={() => console.log("delete")}>
+              <Ionicons name="trash" size={24} color={MainColor.red} />
+            </TouchableOpacity>
+          </Grid.Col>
+        </Grid>
+
+        <ButtonCenteredOnly onPress={() => console.log("add")}>
+          Tambah Pilihan
+        </ButtonCenteredOnly>
+        <Spacing />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,25 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    InformationBox,
+    StackCustom,
+    ViewWrapper
+} from "@/components";
+import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
+import { Voting_BoxDetailPublishSection } from "@/screens/Voting/BoxDetailPublishSection";
+import React from "react";
+
+export default function VotingDetail() {
+  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." />
+
+        <Voting_BoxDetailPublishSection
+          headerAvatar={<AvatarUsernameAndOtherComponent />}
+        />
+
+        <Voting_BoxDetailHasilVotingSection />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/voting/[id]/list-of-contributor.tsx

@@ -0,0 +1,17 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BaseBox,
+    ViewWrapper
+} from "@/components";
+
+export default function Voting_ListOfContributor() {
+  return (
+    <ViewWrapper>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox key={index.toString()}>
+          <AvatarUsernameAndOtherComponent />
+        </BaseBox>
+      ))}
+    </ViewWrapper>
+  );
+}

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

@@ -15,7 +15,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { TouchableOpacity } from "react-native";
 
-export default function CreateVoting() {
+export default function VotingCreate() {
   const buttonSubmit = () => {
     return (
       <>

components/_Icon/IconArchive.tsx

@@ -0,0 +1,13 @@
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function IconArchive({ color }: { color?: string }) {
+  return (
+    <Ionicons
+      name="archive"
+      size={ICON_SIZE_SMALL}
+      color={color || MainColor.white}
+    />
+  );
+}

components/_Icon/index.ts

@@ -3,5 +3,13 @@ import IconEdit from "./IconEdit";
 import IconHistory from "./IconHistory";
 import IconHome from "./IconHome";
 import IconStatus from "./IconStatus";
+import IconArchive from "./IconArchive";
 
-export { IconContribution, IconEdit, IconHistory, IconHome, IconStatus };
+export {
+  IconContribution,
+  IconEdit,
+  IconHistory,
+  IconHome,
+  IconStatus,
+  IconArchive,
+};

screens/Forum/ReportListSection.tsx

@@ -1,8 +1,6 @@
-import { BaseBox, ButtonCustom, StackCustom, TextCustom } from "@/components";
+import { BaseBox, StackCustom, TextCustom } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
-import { MainColor } from "@/constants/color-palet";
 import { listDummyReportForum } from "@/lib/dummy-data/forum/report-list";
-import { router } from "expo-router";
 import { useState } from "react";
 import { View } from "react-native";
 

screens/Voting/BoxDetailHasilVotingSection.tsx

@@ -0,0 +1,30 @@
+import {
+  BaseBox,
+  StackCustom,
+  TextCustom,
+  Grid,
+  CircleContainer,
+} from "@/components";
+
+export default function Voting_BoxDetailHasilVotingSection() {
+  return (
+    <>
+      <BaseBox>
+        <StackCustom>
+          <TextCustom bold align="center">
+            Hasil Voting
+          </TextCustom>
+
+          <Grid>
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Grid.Col span={3} style={{ alignItems: "center" }} key={i}>
+                <CircleContainer value={9 % (i + 4)} />
+                <TextCustom size="small">Pilihan {i + 1}</TextCustom>
+              </Grid.Col>
+            ))}
+          </Grid>
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}

screens/Voting/BoxDetailPublishSection.tsx

@@ -0,0 +1,71 @@
+import {
+    BadgeCustom,
+    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";
+
+export function Voting_BoxDetailPublishSection({
+  headerAvatar,
+}: {
+  headerAvatar?: React.ReactNode;
+}) {
+  const [value, setValue] = useState<any | number>("");
+  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>
+
+          <View>
+            <TextCustom bold size="small">
+              Pilihan :
+            </TextCustom>
+            <RadioGroup value={value} onChange={setValue}>
+              {Array.from({ length: 4 }).map((_, i) => (
+                <View key={i}>
+                  <RadioCustom
+                    label={`Pilihan ${i + 1}`}
+                    value={`Pilihan ${i + 1}`}
+                  />
+                </View>
+              ))}
+            </RadioGroup>
+          </View>
+
+          <ButtonCustom onPress={() => console.log("vote")}>
+            Vote
+          </ButtonCustom>
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </>
+  );
+}

screens/Voting/BoxDetailSection.tsx

@@ -0,0 +1,59 @@
+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_BoxDetailSection({
+  headerAvatar,
+}: {
+  headerAvatar?: React.ReactNode;
+}) {
+  return (
+    <>
+      <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>
+
+          <View>
+            <TextCustom bold size="small">
+              Pilihan :
+            </TextCustom>
+            {Array.from({ length: 3 }).map((_, i) => (
+              <View key={i}>
+                <TextCustom>Nama Pilihan {i + 1}</TextCustom>
+                <Spacing />
+              </View>
+            ))}
+          </View>
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </>
+  );
+}

screens/Voting/BoxPublishSection.tsx

@@ -39,18 +39,12 @@ export default function Voting_BoxPublishSection({
           </BadgeCustom>
 
           <Grid>
-            <Grid.Col span={3} style={{ alignItems: "center" }}>
-              <CircleContainer value={"10"} />
-            </Grid.Col>
-            <Grid.Col span={3} style={{ alignItems: "center" }}>
-              <CircleContainer value={"9"} />
-            </Grid.Col>
-            <Grid.Col span={3} style={{ alignItems: "center" }}>
-              <CircleContainer value={"10"} />
-            </Grid.Col>
-            <Grid.Col span={3} style={{ alignItems: "center" }}>
-              <CircleContainer value={"9"} />
-            </Grid.Col>
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Grid.Col span={3} style={{ alignItems: "center" }} key={i}>
+                <CircleContainer value={9 % (i + 4)} />
+                <TextCustom size="small">Pilihan {i + 1}</TextCustom>
+              </Grid.Col>
+            ))}
           </Grid>
           {bottomComponent}
         </StackCustom>

screens/Voting/ButtonStatusSection.tsx

@@ -0,0 +1,124 @@
+import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
+import { router } from "expo-router";
+import { View } from "react-native";
+
+export default function Voting_ButtonStatusSection({
+  status,
+}: {
+  status: string;
+}) {
+  const handleBatalkanReview = () => {
+    AlertDefaultSystem({
+      title: "Batalkan Review",
+      message: "Apakah Anda yakin ingin batalkan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleAjukanReview = () => {
+    AlertDefaultSystem({
+      title: "Ajukan Review",
+      message: "Apakah Anda yakin ingin ajukan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleEditKembali = () => {
+    AlertDefaultSystem({
+      title: "Edit Kembali",
+      message: "Apakah Anda yakin ingin edit kembali ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleOpenDeleteAlert = () => {
+    AlertDefaultSystem({
+      title: "Hapus",
+      message: "Apakah Anda yakin ingin menghapus data ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const DeleteButton = () => {
+    return (
+      <>
+        <ButtonCustom
+          backgroundColor="red"
+          textColor="white"
+          onPress={handleOpenDeleteAlert}
+        >
+          Hapus
+        </ButtonCustom>
+      </>
+    );
+  };
+
+  switch (status) {
+    case "publish":
+      return <></>;
+
+    case "review":
+      return (
+        <ButtonCustom onPress={handleBatalkanReview}>
+          Batalkan Review
+        </ButtonCustom>
+      );
+
+    case "draft":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={5}>
+              <ButtonCustom onPress={handleAjukanReview}>
+                Ajukan Review
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
+          </Grid>
+        </>
+      );
+
+    case "reject":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={5}>
+              <ButtonCustom onPress={handleEditKembali}>
+                Edit Kembali
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <View />
+            </Grid.Col>
+            <Grid.Col span={5}>{DeleteButton()}</Grid.Col>
+          </Grid>
+        </>
+      );
+
+    default:
+      return <ButtonCustom disabled>Status Undifined</ButtonCustom>;
+  }
+}