Admin Voting

Add:
- admin/voting: tambah [id] dan [status]

Component Admin
Add:
- components/_ShareComponent/Admin/ButtonReject
- components/_ShareComponent/Admin/ButtonReview

### No Issue

app/(application)/admin/_layout.tsx

@@ -86,10 +86,16 @@ export default function AdminLayout() {
         <Stack.Screen name="forum/[id]/index" />
         <Stack.Screen name="forum/report-comment"/>
         <Stack.Screen name="forum/report-posting"/>
-        
         <Stack.Screen name="forum/[id]/list-report-posting" />
         <Stack.Screen name="forum/[id]/list-report-comment"/>
         {/* ================== Forum End ================== */}
+
+        {/* ================== Voting Start ================== */}
+        <Stack.Screen name="voting/index" />
+        <Stack.Screen name="voting/[status]/status" />
+        <Stack.Screen name="voting/[id]/[status]/index" />
+        <Stack.Screen name="voting/[id]/reject-input"/>
+        {/* ================== Voting End ================== */}
       </Stack>
 
       <DrawerAdmin

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

@@ -0,0 +1,173 @@
+import {
+  AlertDefaultSystem,
+  BadgeCustom,
+  BaseBox,
+  CircleContainer,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
+import { MainColor } from "@/constants/color-palet";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { List } from "react-native-paper";
+
+export default function AdminVotingDetail() {
+  const { id, status } = useLocalSearchParams();
+
+  const colorBadge = () => {
+    if (status === "publish") {
+      return MainColor.green;
+    } else if (status === "review") {
+      return MainColor.orange;
+    } else if (status === "reject") {
+      return MainColor.red;
+    } else {
+      return MainColor.placeholder;
+    }
+  };
+
+  const listData = [
+    {
+      label: "Username",
+      value: "Bagas Banuna",
+    },
+    {
+      label: "Judul",
+      value: `Judul Proyek: ${id}Lorem ipsum dolor sit amet consectetur adipisicing elit.`,
+    },
+    {
+      label: "Status",
+      value: (
+        <BadgeCustom color={colorBadge()}>
+          {_.startCase(status as string)}
+        </BadgeCustom>
+      ),
+    },
+    {
+      label: "Mulai Voting",
+      value: dayjs().format("DD/MM/YYYY"),
+    },
+    {
+      label: "Voting Berakhir",
+      value: dayjs().format("DD/MM/YYYY"),
+    },
+
+    {
+      label: "Deskripsi",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    },
+    {
+      label: "Daftar Pilhan",
+      value: (
+        <>
+          <List.Item
+            title={<TextCustom>Pilihan 1</TextCustom>}
+            left={(props) => (
+              <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+            )}
+          />
+          <List.Item
+            title={<TextCustom>Pilihan 2</TextCustom>}
+            left={(props) => (
+              <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+            )}
+          />
+          <List.Item
+            title={<TextCustom>Pilihan 3</TextCustom>}
+            left={(props) => (
+              <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+            )}
+          />
+          <List.Item
+            title={<TextCustom>Pilihan 4</TextCustom>}
+            left={(props) => (
+              <List.Icon {...props} icon="circle" color={MainColor.yellow} />
+            )}
+          />
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
+      >
+        <BaseBox>
+          <StackCustom>
+            {listData.map((item, i) => (
+              <GridDetail_4_8
+                key={i}
+                label={<TextCustom bold>{item.label}</TextCustom>}
+                value={<TextCustom>{item.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        </BaseBox>
+
+        {status === "publish" && (
+          <BaseBox>
+            <TextCustom bold align="center">
+              Hasil Voting
+            </TextCustom>
+            <Spacing />
+            <Grid>
+             
+             {Array.from({length: 4}).map((_, index) => (
+              <Grid.Col key={index} span={3} style={{ paddingRight: 3, paddingLeft: 3 }}>
+                <StackCustom gap={"sm"}>
+                  <CircleContainer value={index % 3 * 3} style={{ alignSelf: "center" }} />
+                  <TextCustom size="small" align="center">
+                    Pilihan {index + 1}
+                  </TextCustom>
+                </StackCustom>
+              </Grid.Col>
+             ))}
+            </Grid>
+          </BaseBox>
+        )}
+
+        {status === "review" && (
+          <AdminButtonReview
+            onPublish={() => {
+              AlertDefaultSystem({
+                title: "Publish",
+                message: "Apakah anda yakin ingin mempublikasikan data ini?",
+                textLeft: "Cancel",
+                textRight: "Publish",
+                onPressLeft: () => {
+                  router.back();
+                },
+                onPressRight: () => {
+                  router.back();
+                },
+              });
+            }}
+            onReject={() => {
+              router.push(`/admin/voting/${id}/reject-input`);
+            }}
+          />
+        )}
+
+        {status === "reject" && (
+          <AdminButtonReject
+            title="Tambah Catatan"
+            onReject={() => {
+              router.push(`/admin/voting/${id}/reject-input`);
+            }}
+          />
+        )}
+        <Spacing />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/voting/[id]/reject-input.tsx

@@ -0,0 +1,55 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminVotingRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              router.replace(`/admin/voting/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Masukan Alasan" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/voting/[status]/status.tsx

@@ -0,0 +1,76 @@
+import {
+    ActionIcon,
+    BaseBox,
+    SearchInput,
+    Spacing,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
+import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { Octicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { Divider } from "react-native-paper";
+
+export default function AdminVotingStatus() {
+  const { status } = useLocalSearchParams();
+  const rightComponent = (
+    <SearchInput
+      containerStyle={{ width: "100%", marginBottom: 0 }}
+      placeholder="Cari"
+    />
+  );
+  return (
+    <>
+      <ViewWrapper headerComponent={<AdminTitlePage title="Voting" />}>
+        <AdminComp_BoxTitle
+          title={`${_.startCase(status as string)}`}
+          rightComponent={rightComponent}
+        />
+
+        <BaseBox>
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Voting"
+          />
+          <Spacing />
+          <Divider />
+
+          {Array.from({ length: 10 }).map((_, index) => (
+            <AdminTableValue
+              key={index}
+              value1={
+                <ActionIcon
+                  icon={
+                    <Octicons
+                      name="eye"
+                      size={ICON_SIZE_BUTTON}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {
+                    router.push(`/admin/voting/${index}/${status}`);
+                  }}
+                />
+              }
+              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+              value3={
+                <TextCustom truncate={2}>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis asperiores quidem deleniti architecto eaque et
+                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                </TextCustom>
+              }
+            />
+          ))}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/voting/index.tsx

@@ -0,0 +1,49 @@
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
+import { IconArchive } from "@/components/_Icon";
+import {
+  IconPublish,
+  IconReject,
+  IconReview,
+} from "@/components/_Icon/IconComponent";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminVoting() {
+  return (
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Voting" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = [
+  {
+    label: "Publish",
+    value: 4,
+    icon: <IconPublish size={25} color={MainColor.green} />,
+  },
+  {
+    label: "Review",
+    value: 7,
+    icon: <IconReview size={25} color={MainColor.orange} />,
+  },
+  {
+    label: "Reject",
+    value: 5,
+    icon: <IconReject size={25} color={MainColor.red} />,
+  },
+  {
+    label: "Riwayat",
+    value: 5,
+    icon: <IconArchive size={25} color={MainColor.white_gray} />,
+  },
+];

components/_ShareComponent/Admin/ButtonReject.tsx

@@ -0,0 +1,24 @@
+import { IconReject } from "@/components/_Icon/IconComponent";
+import ButtonCustom from "@/components/Button/ButtonCustom";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminButtonReject({
+  title,
+  onReject,
+}: {
+  title: string;
+  onReject: () => void;
+}) {
+  return (
+    <>
+      <ButtonCustom
+        iconLeft={<IconReject />}
+        backgroundColor={MainColor.red}
+        textColor="white"
+        onPress={onReject}
+      >
+        {title}
+      </ButtonCustom>
+    </>
+  );
+}

components/_ShareComponent/Admin/ButtonReview.tsx

@@ -0,0 +1,39 @@
+import { IconPublish, IconReject } from "@/components/_Icon/IconComponent";
+import ButtonCustom from "@/components/Button/ButtonCustom";
+import Grid from "@/components/Grid/GridCustom";
+import { MainColor } from "@/constants/color-palet";
+
+export default function AdminButtonReview({
+  onPublish,
+  onReject,
+}: {
+  onPublish: () => void;
+  onReject: () => void;
+}) {
+  return (
+    <>
+      <Grid>
+        <Grid.Col span={6} style={{ paddingRight: 10 }}>
+          <ButtonCustom
+            iconLeft={<IconPublish />}
+            backgroundColor={MainColor.green}
+            textColor="white"
+            onPress={onPublish}
+          >
+            Publish
+          </ButtonCustom>
+        </Grid.Col>
+        <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+          <ButtonCustom
+            iconLeft={<IconReject />}
+            backgroundColor={MainColor.red}
+            textColor="white"
+            onPress={onReject}
+          >
+            Reject
+          </ButtonCustom>
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}

screens/Admin/listPageAdmin.tsx

@@ -46,10 +46,10 @@ const adminListMenu: NavbarItem[] = [
     icon: "accessibility-outline",
     links: [
       { label: "Dashboard", link: "/admin/voting" },
-      { label: "Publish", link: "/admin/voting/publish" },
+      { label: "Publish", link: "/admin/voting/publish/status" },
-      { label: "Review", link: "/admin/voting/review" },
+      { label: "Review", link: "/admin/voting/review/status" },
-      { label: "Reject", link: "/admin/voting/reject" },
+      { label: "Reject", link: "/admin/voting/reject/status" },
-      { label: "Riwayat", link: "/admin/voting/riwayat" },
+      { label: "Riwayat", link: "/admin/voting/riwayat/status" },
     ],
   },
   {

screens/Authentication/LoginView.tsx

@@ -84,7 +84,7 @@ export default function LoginView() {
 
         <Spacing />
 
-        <ButtonCustom onPress={() => router.navigate("/admin/forum")}>
+        <ButtonCustom onPress={() => router.navigate("/admin/voting")}>
           Admin ( Delete Soon )
         </ButtonCustom>
       </View>