# Voting prototype

- feat
- Tampilan beranda
- Tampilan status
- Tampilan kontribusi
- Tampilan riwayat
## No Issue

src/app/admin/layout.tsx

@@ -1,6 +0,0 @@
-import { AdminMain_Layout } from "@/app_modules_admin/main";
-import React from "react";
-
-export default async function Layout({children}: {children: React.ReactNode}) {
-    return <AdminMain_Layout>{children}</AdminMain_Layout>
-}

src/app/admin/main/page.tsx

@@ -1,5 +0,0 @@
-import { AdminMain_Dashboard } from "@/app_modules_admin/main";
-
-export default async function Page() {
-    return <AdminMain_Dashboard/>
-}

src/app/dev/vote/create/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutVote_Create } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutVote_Create>{children}</LayoutVote_Create>
+    </>
+  );
+}

src/app/dev/vote/create/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_Create } from "@/app_modules/vote";
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_Create />
+    </>
+  );
+}

src/app/dev/vote/detail/draft/layout.tsx

@@ -0,0 +1,10 @@
+import { LayoutVote_DetailDraft } from "@/app_modules/vote";
+import React from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <LayoutVote_DetailDraft>{children}</LayoutVote_DetailDraft>
+    </>
+  );
+}

src/app/dev/vote/detail/draft/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_DetailDraft } from "@/app_modules/vote";
+
+export default function Page() {
+  return (
+    <>
+      <Vote_DetailDraft />
+    </>
+  );
+}

src/app/dev/vote/detail/kontribusi/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutVote_DetailKontribusi } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutVote_DetailKontribusi>{children}</LayoutVote_DetailKontribusi>
+    </>
+  );
+}

src/app/dev/vote/detail/kontribusi/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_DetailKontribusi } from "@/app_modules/vote";
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_DetailKontribusi />
+    </>
+  );
+}

src/app/dev/vote/detail/main/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutVote_MainDetail } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutVote_MainDetail>{children}</LayoutVote_MainDetail>
+    </>
+  );
+}

src/app/dev/vote/detail/main/page.tsx

@@ -0,0 +1,7 @@
+import { Vote_MainDetail } from "@/app_modules/vote";
+
+export default async function Page(){
+    return<>
+    <Vote_MainDetail/>
+    </>
+}

src/app/dev/vote/detail/publish/layout.tsx

@@ -0,0 +1,10 @@
+import { LayoutVote_DetailPublish } from "@/app_modules/vote";
+import React from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <LayoutVote_DetailPublish>{children}</LayoutVote_DetailPublish>
+    </>
+  );
+}

src/app/dev/vote/detail/publish/page.tsx

@@ -0,0 +1,7 @@
+import { Vote_DetailPublish } from "@/app_modules/vote";
+
+export default function Page(){
+    return <>
+    <Vote_DetailPublish/>
+    </>
+}

src/app/dev/vote/detail/reject/layout.tsx

@@ -0,0 +1,8 @@
+import { LayoutVote_DetailReject } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return<>
+    <LayoutVote_DetailReject>{children}</LayoutVote_DetailReject>
+    </>
+}

src/app/dev/vote/detail/reject/page.tsx

@@ -0,0 +1,7 @@
+import { Vote_DetailReject } from "@/app_modules/vote";
+
+export default async function Page() {
+    return <>
+    <Vote_DetailReject/>
+    </>
+}

src/app/dev/vote/detail/review/layout.tsx

@@ -0,0 +1,10 @@
+import { LayoutVote_DetailReview } from "@/app_modules/vote";
+import React from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <LayoutVote_DetailReview>{children}</LayoutVote_DetailReview>
+    </>
+  );
+}

src/app/dev/vote/detail/review/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_DetailReview } from "@/app_modules/vote";
+
+export default function Page() {
+  return (
+    <>
+      <Vote_DetailReview />
+    </>
+  );
+}

src/app/dev/vote/detail/riwayat_saya/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutVote_DetailRiwayatSaya } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutVote_DetailRiwayatSaya>{children}</LayoutVote_DetailRiwayatSaya>
+    </>
+  );
+}

src/app/dev/vote/detail/riwayat_saya/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_DetailRiwayatSaya } from "@/app_modules/vote";
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_DetailRiwayatSaya />
+    </>
+  );
+}

src/app/dev/vote/detail/semua_riwayat/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutVote_DetailSemuaRiwayat } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutVote_DetailSemuaRiwayat>{children}</LayoutVote_DetailSemuaRiwayat>
+    </>
+  );
+}

src/app/dev/vote/detail/semua_riwayat/page.tsx

@@ -0,0 +1,10 @@
+import { Vote_DetailSemuaRiwayat } from "@/app_modules/vote";
+
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_DetailSemuaRiwayat />
+    </>
+  );
+}

src/app/dev/vote/edit/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutVote_Edit } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutVote_Edit>{children}</LayoutVote_Edit>
+    </>
+  );
+}

src/app/dev/vote/edit/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_Edit } from "@/app_modules/vote";
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_Edit />
+    </>
+  );
+}

src/app/dev/vote/main/beranda/page.tsx

@@ -0,0 +1,7 @@
+import { Vote_Beranda } from "@/app_modules/vote";
+
+export default async function Page() {
+    return<>
+    <Vote_Beranda/>
+    </>
+}

src/app/dev/vote/main/kontribusi/page.tsx

@@ -0,0 +1,10 @@
+import { Vote_Kontribusi } from "@/app_modules/vote";
+
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_Kontribusi />
+    </>
+  );
+}

src/app/dev/vote/main/layout.tsx

@@ -0,0 +1,14 @@
+import { LayoutVote_Main } from "@/app_modules/vote";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutVote_Main>{children}</LayoutVote_Main>
+    </>
+  );
+}

src/app/dev/vote/main/riwayat/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_Riwayat } from "@/app_modules/vote";
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_Riwayat />
+    </>
+  );
+}

src/app/dev/vote/main/status/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_Status } from "@/app_modules/vote";
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_Status />
+    </>
+  );
+}

src/app/dev/vote/splash/page.tsx

@@ -0,0 +1,9 @@
+import { Vote_Splash } from "@/app_modules/vote";
+
+export default async function Page() {
+  return (
+    <>
+      <Vote_Splash />
+    </>
+  );
+}

src/app/emotion.tsx

@@ -2,7 +2,7 @@
 import AppNotif from "@/app_modules/notif";
 // import './globals.css'
 import { CacheProvider } from "@emotion/react";
-import { MantineProvider, useEmotionCache } from "@mantine/core";
+import { Image, MantineProvider, useEmotionCache } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { useServerInsertedHTML } from "next/navigation";
 import { ToastContainer, toast } from "react-toastify";
@@ -27,10 +27,13 @@ export default function RootStyleRegistry({
 
   return (
     <html lang="en" data-theme="light">
+      <head>
+        <title>HIPMI</title>
+      </head>
       <body suppressHydrationWarning={true}>
         <CacheProvider value={cache}>
           <MantineProvider withGlobalStyles withNormalizeCSS>
-            <Notifications position="top-center" containerWidth="250px"  />
+            <Notifications position="top-center" containerWidth="250px" />
             {children}
             {/* <ToastContainer position="bottom-center" />
             <AppNotif /> */}

src/app/lib/router_hipmi/router_vote.ts

@@ -0,0 +1,24 @@
+export const RouterVote = {
+  // main
+  splash: "/dev/vote/splash",
+  beranda: "/dev/vote/main/beranda",
+  status: "/dev/vote/main/status",
+  kontribusi: "/dev/vote/main/kontribusi",
+  riwayat: "/dev/vote/main/riwayat",
+
+  // create
+  create: "/dev/vote/create",
+
+  //
+  edit: "/dev/vote/edit",
+
+  //detail
+  main_detail: "/dev/vote/detail/main",
+  detail_publish: "/dev/vote/detail/publish",
+  detail_review: "/dev/vote/detail/review",
+  detail_draft: "/dev/vote/detail/draft",
+  detail_reject: "/dev/vote/detail/reject",
+  detail_kontribusi: "/dev/vote/detail/kontribusi",
+  detail_semua_riwayat: "/dev/vote/detail/semua_riwayat",
+  detail_riwayat_saya: "/dev/vote/detail/riwayat_saya",
+};

src/app_modules/admin/event/child/tipe_acara.tsx

@@ -7,6 +7,7 @@ import {
   Divider,
   Group,
   List,
+  Modal,
   Paper,
   SimpleGrid,
   Stack,
@@ -23,8 +24,11 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_gl
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { AdminEvent_getListTipeAcara } from "../fun/get/get_list_tipe_acara";
-import { IconEditCircle } from "@tabler/icons-react";
+import { IconEditCircle, IconTrash } from "@tabler/icons-react";
 import { AdminEvent_funEditTipeAcara } from "../fun/edit/fun_edit_tipe_acara";
+import { useDisclosure } from "@mantine/hooks";
+import { AdminEvent_funEditActivationTipeAcaraById } from "../fun/edit/fun_edit_activation_tipe_acara";
+import { number } from "echarts";
 
 export default function AdminEvent_DetailTipeAcara({
   listTipe,
@@ -46,8 +50,35 @@ function DetailTipeAcara({ listTipe }: { listTipe: MODEL_DEFAULT_MASTER[] }) {
   const [name, setName] = useState("");
   const [openEditor, setOpenEditor] = useState(false);
   const [edit, setEdit] = useState<MODEL_DEFAULT_MASTER | null>(null);
+  const [opened, { open, close }] = useDisclosure(false);
+  const [hapusTipe, setHapusTipe] = useState({
+    id: "",
+    name: "",
+  });
+
   return (
     <>
+      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+        <Stack>
+          <Title order={6}>
+            Anda yakin akan menghapus{" "}
+            <Text span c={"red"} inherit>
+              {hapusTipe.name}
+            </Text>{" "}
+            ?
+          </Title>
+          <Group position="center">
+            <Button onClick={() => close()}>Batal</Button>
+            <Button
+              onClick={() => onDelete(hapusTipe as any, close, setTipe)}
+              color="red"
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
       <SimpleGrid
         cols={3}
         spacing="lg"
@@ -86,15 +117,30 @@ function DetailTipeAcara({ listTipe }: { listTipe: MODEL_DEFAULT_MASTER[] }) {
                   <Stack key={e.id} spacing={"xs"}>
                     <Group position="apart">
                       <Text>{e.name}</Text>
-                      <ActionIcon
+                      <Group>
-                        variant="transparent"
+                        <ActionIcon
-                        onClick={() => {
+                          variant="transparent"
-                          setOpenEditor(true);
+                          onClick={() => {
-                          setEdit(e);
+                            setOpenEditor(true);
-                        }}
+                            setEdit(e);
-                      >
+                          }}
-                        <IconEditCircle color="green" />
+                        >
-                      </ActionIcon>
+                          <IconEditCircle color="green" />
+                        </ActionIcon>{" "}
+                        <ActionIcon
+                          variant="transparent"
+                          onClick={() => {
+                            open();
+                            setHapusTipe({
+                              ...hapusTipe,
+                              id: e.id,
+                              name: e.name,
+                            });
+                          }}
+                        >
+                          <IconTrash color="red" />
+                        </ActionIcon>
+                      </Group>
                     </Group>
                     <Divider />
                   </Stack>
@@ -175,3 +221,18 @@ async function onUpdate(id: any, edit: any, setTipe: any, setOpenEditor: any) {
     }
   });
 }
+
+async function onDelete(data: MODEL_DEFAULT_MASTER, close: any, setTipe: any) {
+  await AdminEvent_funEditActivationTipeAcaraById(data.id as any).then(
+    async (res) => {
+      if (res.status === 200) {
+        const data = await AdminEvent_getListTipeAcara();
+        setTipe(data);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        close();
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    }
+  );
+}

src/app_modules/admin/event/fun/edit/fun_edit_activation_tipe_acara.ts

@@ -0,0 +1,22 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { revalidatePath } from "next/cache";
+
+export async function AdminEvent_funEditActivationTipeAcaraById(id: number) {
+  const updt = await prisma.eventMaster_TipeAcara.update({
+    where: {
+      id: id,
+    },
+    data: {
+      active: false,
+    },
+  });
+
+  if(!updt) return {status: 400, message: "Gagal Update"}
+  revalidatePath("/dev/admin/event/child/tipe_acara");
+  return {
+    status: 200,
+    message: "Update Berhasil"
+  }
+}

src/app_modules/admin/event/fun/get/get_list_tipe_acara.ts

@@ -6,6 +6,9 @@ export async function AdminEvent_getListTipeAcara(){
     const data = await prisma.eventMaster_TipeAcara.findMany({
         orderBy:{
             id: "asc"
+        },
+        where: {
+            active: true
         }
     })
     return data

src/app_modules/component_global/author_name_on_header.tsx

@@ -3,15 +3,16 @@
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { Stack, Grid, Avatar, Divider, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
+import { ComponentGlobal_NotifikasiPeringatan } from "./notif_global/notifikasi_peringatan";
 
 export default function ComponentGlobal_AuthorNameOnHeader({
   profileId,
   imagesId,
   authorName,
 }: {
-  profileId: string;
+  profileId?: string;
-  imagesId: string;
+  imagesId?: string;
-  authorName: string;
+  authorName?: string;
 }) {
   const router = useRouter();
   return (
@@ -21,7 +22,11 @@ export default function ComponentGlobal_AuthorNameOnHeader({
           <Grid.Col
             span={"content"}
             onClick={() => {
-              router.push(RouterProfile.katalog + profileId);
+              if (profileId) {
+                router.push(RouterProfile.katalog + profileId);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
             }}
           >
             <Avatar
@@ -29,13 +34,17 @@ export default function ComponentGlobal_AuthorNameOnHeader({
               sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
               radius={"xl"}
               bg={"gray.1"}
-              src={RouterProfile.api_foto_profile + imagesId}
+              src={
+                imagesId
+                  ? RouterProfile.api_foto_profile + imagesId
+                  : "/aset/global/avatar.png"
+              }
             />
           </Grid.Col>
           <Grid.Col span={"auto"}>
             <Stack justify="center" h={"100%"}>
               <Text truncate fz={"sm"} fw={"bold"}>
-                {authorName}
+                {authorName ? authorName : "Nama author"}
               </Text>
             </Stack>
           </Grid.Col>

src/app_modules/event/fun/master/get_tipe_acara.ts

@@ -3,6 +3,13 @@
 import prisma from "@/app/lib/prisma"
 
 export async function Event_getMasterTipeAcara(){
-    const data = await prisma.eventMaster_TipeAcara.findMany()
+    const data = await prisma.eventMaster_TipeAcara.findMany({
+         orderBy: {
+            id: "asc"
+         },
+         where: {
+            active: true
+         }
+    })
     return data
 }

src/app_modules/home/view.tsx

@@ -31,6 +31,7 @@ import { useRouter } from "next/navigation";
 import { MODEL_PROFILE_OLD } from "./model/user_profile";
 import AppNotif from "../notif";
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
 
 // export const dynamic = "force-dynamic"
 // export const revalidate = 0
@@ -56,7 +57,7 @@ export default function HomeView() {
       id: 3,
       name: "Voting",
       icon: <IconPackageImport size={50} />,
-      link: "",
+      link: RouterVote.splash,
     },
     {
       id: 4,
@@ -93,7 +94,6 @@ export default function HomeView() {
   return (
     <>
       <Box>
-
         <Paper bg={"dark"} radius={5} my={"xs"}>
           <Image alt="logo" src={"/aset/investasi/home-hipmi.png"} />
         </Paper>
@@ -101,14 +101,14 @@ export default function HomeView() {
         {/* <pre>{JSON.stringify(stateUser, null, 2)}</pre> */}
 
         <Box my={"sm"}>
-          <SimpleGrid 
+          <SimpleGrid
-          cols={2}
+            cols={2}
-          spacing="md"
+            spacing="md"
-          // breakpoints={[
+            // breakpoints={[
-          //   { maxWidth: 'md', cols: 2, spacing: 'md' },
+            //   { maxWidth: 'md', cols: 2, spacing: 'md' },
-          //   { maxWidth: 'sm', cols: 2, spacing: 'sm' },
+            //   { maxWidth: 'sm', cols: 2, spacing: 'sm' },
-          //   { maxWidth: 'xs', cols: 1, spacing: 'xs' },
+            //   { maxWidth: 'xs', cols: 1, spacing: 'xs' },
-          // ]}
+            // ]}
           >
             {listHalaman.map((e, i) => (
               <Paper

src/app_modules/vote/component/card_view_publish.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import {
+  Card,
+  Stack,
+  Grid,
+  Avatar,
+  Divider,
+  Badge,
+  Group,
+  Text,
+  Title,
+} from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function ComponentVote_CardViewPublish({
+  path,
+  pilihanSaya,
+}: {
+  path: string;
+  pilihanSaya?: boolean;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30} radius={"md"}>
+        {/* Header name */}
+        <Card.Section>
+          <ComponentGlobal_AuthorNameOnHeader />
+        </Card.Section>
+
+        {/* Isi deskripsi */}
+        <Card.Section py={"sm"} onClick={() => router.push(path)}>
+          <Stack>
+            <Text fw={"bold"}>Voting Pemilihan Tempat Makan</Text>
+            <Badge>
+              <Group>
+                <Text>
+                  {new Date().toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+                <Text>-</Text>
+                <Text>
+                  {new Date(
+                    moment(Date.now()).add(10, "days").calendar()
+                  ).toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+              </Group>
+            </Badge>
+            <Stack>
+              <Grid>
+                <Grid.Col span={6}>
+                  <Stack align="center" spacing={"xs"}>
+                    <Text fz={10}>Voting A</Text>
+                    <Avatar radius={100} variant="outline" color="blue">
+                      2
+                    </Avatar>
+                  </Stack>
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <Stack align="center" spacing={"xs"}>
+                    <Text fz={10}>Voting B</Text>
+                    <Avatar radius={100} variant="outline" color="red">
+                      3
+                    </Avatar>
+                  </Stack>
+                </Grid.Col>
+              </Grid>
+            </Stack>
+          </Stack>
+        </Card.Section>
+
+        {pilihanSaya ? (
+          <Card.Section py={"sm"}>
+            <Stack align="center">
+              <Title order={5}>Pilihan Saya : A</Title>
+            </Stack>
+          </Card.Section>
+        ) : (
+          ""
+        )}
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/component/card_view_status.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import {
+  Card,
+  Stack,
+  Title,
+  Badge,
+  Group,
+  Radio,
+  Grid,
+  Center,
+  Text,
+} from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function ComponentVote_CardViewStatus({
+  path,
+}: {
+  path: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Card
+        shadow="lg"
+        withBorder
+        p={30}
+        radius={"md"}
+        onClick={() => router.push(path)}
+      >
+        {/* Isi deskripsi */}
+        <Card.Section >
+          <Stack>
+            <Text fw={"bold"} truncate>Judul Voting : Pemilihan tempat wisata</Text>
+            <Badge>
+              <Group>
+                <Text>
+                  {new Date().toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+                <Text>-</Text>
+                <Text>
+                  {new Date(
+                    moment(Date.now()).add(10, "days").calendar()
+                  ).toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+              </Group>
+            </Badge>
+          </Stack>
+        </Card.Section>
+        {/* <Card.Section py={"sm"}>
+          <Stack>
+            <Radio.Group>
+              <Grid>
+                <Grid.Col span={"auto"}>
+                  <Center>
+                    <Text>
+                      Nama Voting {""}
+                      <Text fw={"bold"} inherit span>
+                        A
+                      </Text>
+                    </Text>
+                  </Center>
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Center>
+                    <Text>
+                      Nama Voting {""}
+                      <Text fw={"bold"} inherit span>
+                        B
+                      </Text>
+                    </Text>
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            </Radio.Group>
+          </Stack>
+        </Card.Section> */}
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/component/detail/daftar_voter.tsx

@@ -0,0 +1,53 @@
+"use client";
+import {
+  Card,
+  Stack,
+  Center,
+  Title,
+  Badge,
+  Group,
+  Radio,
+  Grid,
+  Text,
+  Avatar,
+  Divider,
+} from "@mantine/core";
+import moment from "moment";
+
+export default function ComponentVote_DaftarVoter() {
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30}>
+        <Card.Section>
+          <Stack>
+            <Center>
+              <Title order={5}>Daftar Voting</Title>
+            </Center>
+            {Array(5)
+              .fill(0)
+              .map((e, i) => (
+                <Stack spacing={"xs"} key={i}>
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <Avatar radius={"xl"} />
+                    </Grid.Col>
+                    <Grid.Col span={8}>
+                      <Stack justify="center" h={"100%"}>
+                        <Text truncate>Nama User</Text>
+                      </Stack>
+                    </Grid.Col>
+                    <Grid.Col span={2}>
+                      <Stack justify="center" h={"100%"}>
+                        <Text truncate>A</Text>
+                      </Stack>
+                    </Grid.Col>
+                  </Grid>
+                  <Divider />
+                </Stack>
+              ))}
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/component/detail/detail_data.tsx

@@ -0,0 +1,92 @@
+"use client";
+import {
+  Card,
+  Stack,
+  Center,
+  Title,
+  Badge,
+  Group,
+  Radio,
+  Grid,
+  Text,
+} from "@mantine/core";
+import moment from "moment";
+
+export default function ComponentVote_DetailData() {
+  const listVote = [
+    {
+      id: 1,
+      value: "A",
+      label: "A",
+    },
+    {
+      id: 2,
+      value: "B",
+      label: "B",
+    },
+  ];
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30}>
+        <Card.Section px={"xs"}>
+          <Stack spacing={"lg"}>
+            <Center>
+              <Title order={5}>Judul voting</Title>
+            </Center>
+            <Text>
+              Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
+              elit. Mollitia possimus repellendus in, iste voluptatibus sit
+              laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
+              porro, magni nulla consequuntur distinctio at.
+            </Text>
+
+            <Stack spacing={0}>
+              <Center>
+                <Text fz={10} fw={"bold"}>
+                  Batas Voting
+                </Text>
+              </Center>
+              <Badge>
+                <Group>
+                  <Text>
+                    {new Date().toLocaleDateString(["id-ID"], {
+                      dateStyle: "medium",
+                    })}
+                  </Text>
+                  <Text>-</Text>
+                  <Text>
+                    {new Date(
+                      moment(Date.now()).add(10, "days").calendar()
+                    ).toLocaleDateString(["id-ID"], {
+                      dateStyle: "medium",
+                    })}
+                  </Text>
+                </Group>
+              </Badge>
+            </Stack>
+          </Stack>
+        </Card.Section>
+        <Card.Section py={40}>
+          <Stack>
+            <Radio.Group>
+              <Grid>
+                {listVote.map((e) => (
+                  <Grid.Col key={e.id} span={"auto"}>
+                    <Center>
+                      <Radio
+                        value={e.value}
+                        label={
+                          <Text fw={"bold"}>{`Nama Voting ${e.label}`}</Text>
+                        }
+                      />
+                    </Center>
+                  </Grid.Col>
+                ))}
+              </Grid>
+            </Radio.Group>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/component/detail/detail_data_tanpa_vote.tsx

@@ -0,0 +1,51 @@
+import { Badge, Card, Center, Group, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+
+
+export default function ComponentVote_DetailDataTanpaVote() {
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30}>
+        <Card.Section px={"xs"}>
+          <Stack spacing={"lg"}>
+            <Center>
+              <Title order={5}>Judul voting</Title>
+            </Center>
+            <Text>
+              Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
+              elit. Mollitia possimus repellendus in, iste voluptatibus sit
+              laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
+              porro, magni nulla consequuntur distinctio at.
+            </Text>
+          </Stack>
+        </Card.Section>
+        <Card.Section py={"lg"}>
+          <Stack spacing={0}>
+            <Center>
+              <Text fz={10} fw={"bold"}>
+                Batas Voting
+              </Text>
+            </Center>
+            <Badge>
+              <Group>
+                <Text>
+                  {new Date().toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+                <Text>-</Text>
+                <Text>
+                  {new Date(
+                    moment(Date.now()).add(10, "days").calendar()
+                  ).toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+              </Group>
+            </Badge>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/component/detail/hasil_voting.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  Avatar,
+  Box,
+  Card,
+  Center,
+  Grid,
+  Group,
+  List,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+
+export default function ComponentVote_HasilVoting() {
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30}>
+        <Card.Section>
+          <Stack>
+            <Center>
+              <Title order={5}>Hasil Voting</Title>
+            </Center>
+            {/* <Group position="center">
+              <Group>
+                <Text>
+                  Voting A :{" "}
+                  <Text span inherit fw={"bold"}>
+                    10
+                  </Text>
+                </Text>
+              </Group>
+              <Group>
+                <Text>
+                  Voting B :{" "}
+                  <Text span inherit fw={"bold"}>
+                    12
+                  </Text>
+                </Text>
+              </Group>
+            </Group> */}
+            <Grid>
+              <Grid.Col span={6}>
+                <Stack align="center">
+                  <Avatar
+                    radius={100}
+                    size={100}
+                    variant="outline"
+                    color="blue"
+                  >
+                    2
+                  </Avatar>
+                  <Text>Voting A</Text>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Stack align="center">
+                  <Avatar
+                    radius={100}
+                    size={100}
+                    variant="outline"
+                    color="red"
+                  >
+                    3
+                  </Avatar>
+                  <Text>Voting B</Text>
+                </Stack>
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/component/header_tamplate.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentVote_HeaderTamplate({
+  hideBack,
+  changeIconBack,
+  route,
+  route2,
+  title,
+  icon,
+  bg,
+}: {
+  hideBack?: boolean;
+  changeIconBack?: any;
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+  bg?: any;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header
+        height={50}
+        sx={{ borderStyle: "none" }}
+        bg={bg === null ? "" : bg}
+      >
+        <Group h={50} position="apart" px={"md"}>
+          {hideBack ? (
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                if (route === null || route === undefined) {
+                  return router.back();
+                } else {
+                  return router.push(route);
+                }
+              }}
+            >
+              {changeIconBack ? changeIconBack : <IconChevronLeft />}
+            </ActionIcon>
+          )}
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/vote/create/index.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import {
+  Button,
+  Center,
+  Grid,
+  Group,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { DatePickerInput } from "@mantine/dates";
+import { useCounter } from "@mantine/hooks";
+import { IconHome } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import moment from "moment";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { gs_vote_hotMenu, gs_vote_status } from "../global_state";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+
+export default function Vote_Create() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_vote_hotMenu);
+  const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
+
+  const [data, setData] = useState({
+    title: "",
+    deskripsi: "",
+  });
+  return (
+    <>
+      <Stack px={"sm"}>
+        <TextInput
+          label="Judul"
+          withAsterisk
+          placeholder="Masukan judul"
+          onChange={() => {}}
+        />
+        <TextInput
+          label="Deskripsi"
+          withAsterisk
+          placeholder="Masukan deskripsi"
+          onChange={() => {}}
+        />
+
+        <DatePickerInput
+          label="Jangka Waktu"
+          placeholder="Masukan jangka waktu voting"
+          withAsterisk
+          dropdownType="modal"
+          type="range"
+          excludeDate={(date) => {
+            return moment(date).diff(Date.now(), "days") < 0;
+          }}
+          onChange={(val) => console.log(val)}
+        />
+
+        <Stack>
+          <Text fw={"bold"} fz={"sm"}>
+            Daftar Voting
+          </Text>
+
+          <Stack>
+            <Grid>
+              <Grid.Col span={"content"}>
+                <Stack h={"100%"} justify="center">
+                  <Title order={3}>-</Title>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <TextInput
+                  label="Pilihan 1"
+                  placeholder="Masukan pilihan 1"
+                  withAsterisk
+                  onChange={() => {}}
+                />
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={"content"}>
+                <Stack h={"100%"} justify="center">
+                  <Title order={3}>-</Title>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <TextInput
+                  label="Pilihan 2"
+                  placeholder="Masukan pilihan 2"
+                  withAsterisk
+                  onChange={() => {}}
+                />
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Stack>
+
+        <Button
+          mt={"lg"}
+          radius={"xl"}
+          onClick={() => onSave(router, setHotMenu, setTabsStatus)}
+        >
+          Simpan
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+async function onSave(
+  router: AppRouterInstance,
+  setHotMenu: any,
+  setTabsStatus: any
+) {
+  ComponentGlobal_NotifikasiBerhasil("Berhasil Disimpan");
+  setHotMenu(1);
+  setTabsStatus("Review")
+
+  router.replace(RouterVote.status);
+}

src/app_modules/vote/create/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../component/header_tamplate";
+
+export default function LayoutVote_Create({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentVote_HeaderTamplate title="Tambah Vote" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/draft/index.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Button, Group, Modal, SimpleGrid, Stack, Title } from "@mantine/core";
+import ComponentVote_DetailData from "../../component/detail/detail_data";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { gs_vote_status } from "../../global_state";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { useDisclosure } from "@mantine/hooks";
+
+export default function Vote_DetailDraft() {
+  return (
+    <>
+      <Stack>
+        <ComponentVote_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  async function onUpdate() {
+    setTabsStatus("Review");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Ajukan Review", 2000);
+    router.back();
+  }
+
+  async function onDelete() {
+    setTabsStatus("Draft");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Hapus Vote", 2000);
+    router.back();
+  }
+
+  return (
+    <>
+      <SimpleGrid cols={2}>
+        <Button
+          radius={"xl"}
+          color="yellow"
+          onClick={() => {
+            onUpdate();
+          }}
+        >
+          Ajukan Review
+        </Button>
+        <Button
+          radius={"xl"}
+          color="red"
+          onClick={() => {
+            open();
+          }}
+        >
+          Hapus
+        </Button>
+      </SimpleGrid>
+
+      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+        <Stack>
+          <Title order={6}>Yakin menghapus vote ini ?</Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Kembali
+            </Button>
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                onDelete();
+              }}
+              color="red"
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/vote/detail/draft/layout.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+import { IconEdit } from "@tabler/icons-react";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+
+export default function LayoutVote_DetailDraft({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentVote_HeaderTamplate
+            title="Detail Draft"
+            icon={<IconEdit />}
+            route2={RouterVote.edit}
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/kontribusi/index.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  Badge,
+  Card,
+  Center,
+  Grid,
+  Group,
+  Radio,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import moment from "moment";
+import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
+import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
+
+export default function Vote_DetailKontribusi() {
+  return (
+    <>
+      <Stack>
+        <TampilanDataVoting />
+        <ComponentVote_HasilVoting />
+        <ComponentVote_DaftarVoter />
+      </Stack>
+    </>
+  );
+}
+
+function TampilanDataVoting() {
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30}>
+        <Card.Section px={"xs"}>
+          <Stack spacing={"lg"}>
+            <Center>
+              <Title order={5}>Judul voting</Title>
+            </Center>
+            <Text>
+              Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
+              elit. Mollitia possimus repellendus in, iste voluptatibus sit
+              laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
+              porro, magni nulla consequuntur distinctio at.
+            </Text>
+          </Stack>
+        </Card.Section>
+        <Card.Section py={"lg"}>
+          <Stack spacing={0}>
+            <Center>
+              <Text fz={10} fw={"bold"}>
+                Batas Voting
+              </Text>
+            </Center>
+            <Badge>
+              <Group>
+                <Text>
+                  {new Date().toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+                <Text>-</Text>
+                <Text>
+                  {new Date(
+                    moment(Date.now()).add(10, "days").calendar()
+                  ).toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+              </Group>
+            </Badge>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/detail/kontribusi/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutVote_DetailKontribusi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentVote_HeaderTamplate title="Detail Kontribusi" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/main/index.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  Card,
+  Stack,
+  Center,
+  Title,
+  Badge,
+  Group,
+  Radio,
+  Grid,
+  Text,
+} from "@mantine/core";
+import moment from "moment";
+import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
+import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
+
+export default function Vote_MainDetail() {
+  return (
+    <>
+      <Stack>
+        <TampilanDataVoting />
+        <ComponentVote_HasilVoting />
+        <ComponentVote_DaftarVoter />
+      </Stack>
+    </>
+  );
+}
+
+function TampilanDataVoting() {
+  const listVote = [
+    {
+      id: 1,
+      value: "A",
+      label: "A",
+    },
+    {
+      id: 2,
+      value: "B",
+      label: "B",
+    },
+  ];
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30}>
+        <Card.Section px={"xs"}>
+          <Stack spacing={"lg"}>
+            <Center>
+              <Title order={5}>Judul voting</Title>
+            </Center>
+            <Text>
+              Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
+              elit. Mollitia possimus repellendus in, iste voluptatibus sit
+              laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
+              porro, magni nulla consequuntur distinctio at.
+            </Text>
+
+            <Stack spacing={0}>
+              <Center>
+                <Text fz={10} fw={"bold"}>
+                  Batas Voting
+                </Text>
+              </Center>
+              <Badge>
+                <Group>
+                  <Text>
+                    {new Date().toLocaleDateString(["id-ID"], {
+                      dateStyle: "medium",
+                    })}
+                  </Text>
+                  <Text>-</Text>
+                  <Text>
+                    {new Date(
+                      moment(Date.now()).add(10, "days").calendar()
+                    ).toLocaleDateString(["id-ID"], {
+                      dateStyle: "medium",
+                    })}
+                  </Text>
+                </Group>
+              </Badge>
+            </Stack>
+          </Stack>
+        </Card.Section>
+        <Card.Section py={40}>
+          <Stack>
+            <Radio.Group>
+              <Grid>
+                {listVote.map((e) => (
+                  <Grid.Col key={e.id} span={"auto"}>
+                    <Center>
+                      <Radio
+                        value={e.value}
+                        label={
+                          <Text fw={"bold"}>{`Nama Voting ${e.label}`}</Text>
+                        }
+                      />
+                    </Center>
+                  </Grid.Col>
+                ))}
+              </Grid>
+            </Radio.Group>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/detail/main/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutVote_MainDetail({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentVote_HeaderTamplate title="Detail Voting" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/publish/index.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  Badge,
+  Card,
+  Center,
+  Grid,
+  Group,
+  Radio,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import ComponentVote_DetailData from "../../component/detail/detail_data";
+import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
+import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
+import moment from "moment";
+
+export default function Vote_DetailPublish() {
+  return (
+    <>
+      <Stack>
+        {/* <ComponentVote_DetailStatus /> */}
+        <TampilanDataVoting />
+        <ComponentVote_HasilVoting />
+        <ComponentVote_DaftarVoter />
+      </Stack>
+    </>
+  );
+}
+
+function TampilanDataVoting() {
+  return (
+    <>
+      <Card shadow="lg" withBorder p={30}>
+        <Card.Section px={"xs"}>
+          <Stack spacing={"lg"}>
+            <Center>
+              <Title order={5}>Judul voting</Title>
+            </Center>
+            <Text>
+              Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
+              elit. Mollitia possimus repellendus in, iste voluptatibus sit
+              laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
+              porro, magni nulla consequuntur distinctio at.
+            </Text>
+          </Stack>
+        </Card.Section>
+        <Card.Section py={"lg"}>
+          <Stack spacing={0}>
+            <Center>
+              <Text fz={10} fw={"bold"}>
+                Batas Voting
+              </Text>
+            </Center>
+            <Badge>
+              <Group>
+                <Text>
+                  {new Date().toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+                <Text>-</Text>
+                <Text>
+                  {new Date(
+                    moment(Date.now()).add(10, "days").calendar()
+                  ).toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+              </Group>
+            </Badge>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/detail/publish/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutVote_DetailPublish({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentVote_HeaderTamplate title="Detail Publish" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/reject/index.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import {
+  Button,
+  Group,
+  Modal,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import ComponentVote_DetailData from "../../component/detail/detail_data";
+import { useRouter } from "next/navigation";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { useAtom } from "jotai";
+import { gs_vote_status } from "../../global_state";
+import { useDisclosure } from "@mantine/hooks";
+
+export default function Vote_DetailReject() {
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <ComponentVote_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  async function onUpdate() {
+    setTabsStatus("Draft");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Masuk Draft", 2000);
+    router.back();
+  }
+
+  async function onDelete() {
+    setTabsStatus("Reject");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Hapus Vote", 2000);
+    router.back();
+  }
+
+  return (
+    <>
+      <SimpleGrid cols={2}>
+        <Button
+          radius={"xl"}
+          color="orange"
+          onClick={() => {
+            onUpdate();
+          }}
+        >
+          Edit Kembali
+        </Button>{" "}
+        <Button
+          radius={"xl"}
+          color="red"
+          onClick={() => {
+            open();
+          }}
+        >
+          Hapus
+        </Button>
+      </SimpleGrid>
+
+      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+        <Stack>
+          <Title order={6}>Yakin menghapus vote ini ?</Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                close();
+              }}
+            >
+              Kembali
+            </Button>
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                onDelete();
+              }}
+              color="red"
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/vote/detail/reject/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutVote_DetailReject({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentVote_HeaderTamplate title="Detail Reject" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/review/index.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import {
+  Badge,
+  Button,
+  Card,
+  Center,
+  Grid,
+  Group,
+  Radio,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useAtom } from "jotai";
+import moment from "moment";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { gs_vote_status } from "../../global_state";
+import ComponentVote_DetailData from "../../component/detail/detail_data";
+
+export default function Vote_DetailReview() {
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <ComponentVote_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
+
+  async function onUpdate() {
+    setTabsStatus("Draft");
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Batalkan Review", 2000);
+    router.back();
+  }
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        color="red"
+        onClick={() => {
+          onUpdate();
+        }}
+      >
+        Batalkan Review
+      </Button>
+    </>
+  );
+}

src/app_modules/vote/detail/review/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutVote_DetailReview({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentVote_HeaderTamplate title="Detail Review" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/riwayat_saya/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutVote_DetailRiwayatSaya({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentVote_HeaderTamplate title="Detail Riwayat" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/riwayat_saya/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function Vote_DetailRiwayatSaya() {
+  return <> riwayat saya</>;
+}

src/app_modules/vote/detail/semua_riwayat/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutVote_DetailSemuaRiwayat({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentVote_HeaderTamplate title="Detail Riwayat" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/detail/semua_riwayat/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Stack } from "@mantine/core";
+import ComponentVote_DetailDataTanpaVote from "../../component/detail/detail_data_tanpa_vote";
+import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
+import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
+
+export default function Vote_DetailSemuaRiwayat() {
+  return (
+    <>
+      <Stack>
+        <ComponentVote_DetailDataTanpaVote />
+        <ComponentVote_HasilVoting/>
+        <ComponentVote_DaftarVoter/>
+      </Stack>
+    </>
+  );
+}

src/app_modules/vote/edit/index.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import {
+  Button,
+  Center,
+  Grid,
+  Group,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { DatePickerInput } from "@mantine/dates";
+import { useCounter } from "@mantine/hooks";
+import { IconHome } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import moment from "moment";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { gs_vote_hotMenu, gs_vote_status } from "../global_state";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+
+export default function Vote_Edit() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_vote_hotMenu);
+  const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <TextInput
+          label="Judul"
+          withAsterisk
+          placeholder="Masukan judul"
+          onChange={() => {}}
+        />
+        <TextInput
+          label="Deskripsi"
+          withAsterisk
+          placeholder="Masukan deskripsi"
+          onChange={() => {}}
+        />
+
+        <DatePickerInput
+          label="Jangka Waktu"
+          placeholder="Masukan jangka waktu voting"
+          withAsterisk
+          dropdownType="modal"
+          type="range"
+          excludeDate={(date) => {
+            return moment(date).diff(Date.now(), "days") < 0;
+          }}
+          onChange={(val) => console.log(val)}
+        />
+
+        <Stack>
+          <Text fw={"bold"} fz={"sm"}>
+            Daftar Voting
+          </Text>
+
+          <Stack>
+            <Grid>
+              <Grid.Col span={"content"}>
+                <Stack h={"100%"} justify="center">
+                  <Title order={3}>-</Title>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <TextInput
+                  label="Pilihan 1"
+                  placeholder="Masukan pilihan 1"
+                  withAsterisk
+                  onChange={() => {}}
+                />
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={"content"}>
+                <Stack h={"100%"} justify="center">
+                  <Title order={3}>-</Title>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <TextInput
+                  label="Pilihan 2"
+                  placeholder="Masukan pilihan 2"
+                  withAsterisk
+                  onChange={() => {}}
+                />
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Stack>
+
+        <Button
+          mt={"lg"}
+          radius={"xl"}
+          color="green"
+          onClick={() => onSave(router, setHotMenu, setTabsStatus)}
+        >
+          Update
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+async function onSave(
+  router: AppRouterInstance,
+  setHotMenu: any,
+  setTabsStatus: any
+) {
+  ComponentGlobal_NotifikasiBerhasil("Berhasil Update");
+  setHotMenu(1);
+  setTabsStatus("Draft");
+  router.back();
+}

src/app_modules/vote/edit/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentVote_HeaderTamplate from "../component/header_tamplate";
+
+export default function LayoutVote_Edit({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentVote_HeaderTamplate title="Edit Vote" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/global_state/index.ts

@@ -0,0 +1,13 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_vote_hotMenu = atomWithStorage("gs_vote_hotMenu", 0);
+
+export const gs_vote_status = atomWithStorage<string | any>(
+  "gs_vote_status",
+  "Publish"
+);
+
+export const gs_vote_riwayat = atomWithStorage<string | any>(
+  "gs_vote_riwayat",
+  "Semua"
+);

src/app_modules/vote/index.tsx

@@ -0,0 +1,55 @@
+import LayoutVote_Main from "./main/layout";
+import Vote_Beranda from "./main/beranda";
+import Vote_Status from "./main/status";
+import Vote_Kontribusi from "./main/kontribusi";
+import Vote_Riwayat from "./main/riwayat";
+import Vote_Splash from "./splash";
+import Vote_Create from "./create";
+import LayoutVote_Create from "./create/layout";
+import Vote_DetailPublish from "./detail/publish";
+import Vote_DetailReview from "./detail/review";
+import Vote_DetailDraft from "./detail/draft";
+import Vote_DetailReject from "./detail/reject";
+import LayoutVote_DetailPublish from "./detail/publish/layout";
+import LayoutVote_DetailReview from "./detail/review/layout";
+import LayoutVote_DetailDraft from "./detail/draft/layout";
+import LayoutVote_DetailReject from "./detail/reject/layout";
+import Vote_Edit from "./edit";
+import LayoutVote_Edit from "./edit/layout";
+import Vote_MainDetail from "./detail/main";
+import LayoutVote_MainDetail from "./detail/main/layout";
+import Vote_DetailKontribusi from "./detail/kontribusi";
+import LayoutVote_DetailKontribusi from "./detail/kontribusi/layout";
+import Vote_DetailSemuaRiwayat from "./detail/semua_riwayat/page";
+import LayoutVote_DetailSemuaRiwayat from "./detail/semua_riwayat/layout";
+import Vote_DetailRiwayatSaya from "./detail/riwayat_saya/page";
+import LayoutVote_DetailRiwayatSaya from "./detail/riwayat_saya/layout";
+
+export {
+  LayoutVote_Main,
+  Vote_Beranda,
+  Vote_Status,
+  Vote_Kontribusi,
+  Vote_Riwayat,
+  Vote_Splash,
+  Vote_Create,
+  LayoutVote_Create,
+  Vote_DetailPublish,
+  Vote_DetailReview,
+  Vote_DetailDraft,
+  Vote_DetailReject,
+  LayoutVote_DetailPublish,
+  LayoutVote_DetailReview,
+  LayoutVote_DetailDraft,
+  LayoutVote_DetailReject,
+  Vote_Edit,
+  LayoutVote_Edit,
+  Vote_MainDetail,
+  LayoutVote_MainDetail,
+  Vote_DetailKontribusi,
+  LayoutVote_DetailKontribusi,
+  Vote_DetailSemuaRiwayat,
+  LayoutVote_DetailSemuaRiwayat,
+  Vote_DetailRiwayatSaya,
+  LayoutVote_DetailRiwayatSaya,
+};

src/app_modules/vote/main/beranda.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  ActionIcon,
+  Affix,
+  Avatar,
+  Badge,
+  Box,
+  Card,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Radio,
+  Stack,
+  Text,
+  Title,
+  rem,
+} from "@mantine/core";
+import { IconCirclePlus } from "@tabler/icons-react";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import ComponentVote_CardViewPublish from "../component/card_view_publish";
+
+export default function Vote_Beranda() {
+  const router = useRouter();
+
+  return (
+    <>
+      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+        <ActionIcon
+          size={"xl"}
+          radius={"xl"}
+          variant="transparent"
+          bg={"blue"}
+          onClick={() => {
+            router.push(RouterVote.create);
+          }}
+        >
+          <IconCirclePlus color="white" size={40} />
+        </ActionIcon>
+      </Affix>
+
+      <Stack>
+        {Array(5)
+          .fill(0)
+          .map((e, i) => (
+            <Box key={i}>
+              <ComponentVote_CardViewPublish path={RouterVote.main_detail}/>
+            </Box>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/vote/main/kontribusi.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  Avatar,
+  Badge,
+  Box,
+  Card,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Radio,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import ComponentVote_CardViewPublish from "../component/card_view_publish";
+
+export default function Vote_Kontribusi() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        {Array(5)
+          .fill(0)
+          .map((e, i) => (
+            <Box key={i}>
+              <ComponentVote_CardViewPublish
+                path={RouterVote.detail_kontribusi}
+                pilihanSaya={true}
+              />
+            </Box>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/vote/main/layout.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Center,
+  Footer,
+  Grid,
+  Stack,
+  Text,
+} from "@mantine/core";
+import React, { useState } from "react";
+import ComponentVote_HeaderTamplate from "../component/header_tamplate";
+import { useRouter } from "next/navigation";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  IconClick,
+  IconHistory,
+  IconHome,
+  IconReservedLine,
+} from "@tabler/icons-react";
+import { gs_vote_hotMenu } from "../global_state";
+import { useAtom } from "jotai";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+
+export default function LayoutVote_Main({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_vote_hotMenu);
+
+  const listFooter = [
+    {
+      id: 1,
+      name: "Beranda",
+      path: RouterVote.beranda,
+      icon: <IconHome />,
+    },
+
+    {
+      id: 2,
+      name: "Status",
+      path: RouterVote.status,
+      icon: <IconReservedLine />,
+    },
+    {
+      id: 3,
+      name: "Kontribusi",
+      path: RouterVote.kontribusi,
+      icon: <IconClick />,
+    },
+    {
+      id: 4,
+      name: "Riwayat",
+      path: RouterVote.riwayat,
+      icon: <IconHistory />,
+    },
+  ];
+
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentVote_HeaderTamplate
+            title="Voting"
+            route={RouterHome.main_home}
+          />
+        }
+        footer={
+          <Footer height={70} bg={"dark"} sx={{ borderTop: "px solid blue" }}>
+            <Grid>
+              {listFooter.map((e, i) => (
+                <Grid.Col
+                  key={e.id}
+                  span={"auto"}
+                  pt={"md"}
+                  onClick={() => {
+                    router.replace(e.path);
+                    setHotMenu(i);
+                  }}
+                >
+                  <Center>
+                    <Stack align="center" spacing={0}>
+                      <ActionIcon
+                        variant="transparent"
+                        c={hotMenu === i ? "blue" : "white"}
+                      >
+                        {e.icon}
+                      </ActionIcon>
+                      <Text fz={10} c={hotMenu === i ? "blue" : "white"}>
+                        {e.name}
+                      </Text>
+                    </Stack>
+                  </Center>
+                </Grid.Col>
+              ))}
+            </Grid>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/vote/main/riwayat/index.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Stack, Tabs } from "@mantine/core";
+import { useState } from "react";
+import Vote_SemuaRiwayat from "./semua";
+import Vote_RiwayatSaya from "./saya";
+import { useAtom } from "jotai";
+import { gs_vote_riwayat } from "../../global_state";
+
+export default function Vote_Riwayat() {
+  const [tabsRiwayat, setTabsRiwayat] = useAtom(gs_vote_riwayat)
+  const listTabs = [
+    {
+      id: 1,
+      path: <Vote_SemuaRiwayat />,
+      value: "Semua",
+      label: "Semua Riwayat",
+    },
+    {
+      id: 2,
+      path: <Vote_RiwayatSaya />,
+      value: "Saya",
+      label: "Riwayat Saya",
+    },
+  ];
+
+  return (
+    <>
+      <Tabs
+        variant="pills"
+        radius={"xl"}
+        color="blue"
+        defaultValue={"Semua"}
+        value={tabsRiwayat}
+        onTabChange={setTabsRiwayat}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listTabs.map((e, i) => (
+              <Tabs.Tab
+                key={i}
+                value={e.value}
+                bg={tabsRiwayat === e.value ? "blue" : "gray.1"}
+                fw={tabsRiwayat === e.value ? "bold" : "normal"}
+              >
+                {e.label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {listTabs.map((e) => (
+            <Tabs.Panel key={e.id} value={e.value}>
+              {e.path}
+            </Tabs.Panel>
+          ))}
+        </Stack>
+      </Tabs>
+    </>
+  );
+}

src/app_modules/vote/main/riwayat/saya.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  Stack,
+  Card,
+  Grid,
+  Avatar,
+  Divider,
+  Title,
+  Badge,
+  Group,
+  Radio,
+  Center,
+  Text,
+  Box,
+} from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import ComponentVote_CardViewPublish from "../../component/card_view_publish";
+
+export default function Vote_RiwayatSaya() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        {Array(5)
+          .fill(0)
+          .map((e, i) => (
+            <Box key={i}>
+              <ComponentVote_CardViewPublish
+                path={RouterVote.detail_riwayat_saya}
+              />
+            </Box>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/vote/main/riwayat/semua.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  Stack,
+  Card,
+  Grid,
+  Avatar,
+  Divider,
+  Title,
+  Badge,
+  Group,
+  Radio,
+  Center,
+  Text,
+  Box,
+} from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import ComponentVote_CardViewPublish from "../../component/card_view_publish";
+
+export default function Vote_SemuaRiwayat() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        {Array(5)
+          .fill(0)
+          .map((e, i) => (
+            <Box key={i}>
+              <ComponentVote_CardViewPublish
+                path={RouterVote.detail_semua_riwayat}
+              />
+            </Box>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/vote/main/status/draft.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import ComponentVote_CardViewStatus from "../../component/card_view_status";
+
+export default function Vote_StatusDraft() {
+  return (
+    <>
+      <ComponentVote_CardViewStatus path={RouterVote.detail_draft} />
+    </>
+  );
+}

src/app_modules/vote/main/status/index.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Stack, Tabs } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { gs_vote_status } from "../../global_state";
+import Vote_StatusPublish from "./publish";
+import Vote_StatusReview from "./review";
+import Vote_StatusDraft from "./draft";
+import Vote_StatusReject from "./reject";
+
+export default function Vote_Status() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
+  const listTabs = [
+    {
+      id: 1,
+      path: <Vote_StatusPublish />,
+      value: "Publish",
+    },
+    {
+      id: 2,
+      path: <Vote_StatusReview />,
+      value: "Review",
+    },
+    {
+      id: 3,
+      path: <Vote_StatusDraft />,
+      value: "Draft",
+    },
+    {
+      id: 4,
+      path: <Vote_StatusReject />,
+      value: "Reject",
+    },
+  ];
+  return (
+    <>
+      <Tabs
+        color="blue"
+        variant="pills"
+        radius={"xl"}
+        defaultValue={"Publish"}
+        value={tabsStatus}
+        onTabChange={setTabsStatus}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listTabs.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.value}
+                bg={tabsStatus === e.value ? "blue" : "gray.1"}
+                fw={tabsStatus === e.value ? "bold" : "normal"}
+              >
+                {e.value}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {listTabs.map((e) => (
+            <Tabs.Panel key={e.id} value={e.value}>
+              {e.path}
+            </Tabs.Panel>
+          ))}
+        </Stack>
+      </Tabs>
+    </>
+  );
+}

src/app_modules/vote/main/status/publish.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
+  Avatar,
+  Badge,
+  Card,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Radio,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function Vote_StatusPublish() {
+  const router = useRouter();
+  return (
+    <>
+      <Card
+        shadow="lg"
+        withBorder
+        p={30}
+        radius={"md"}
+        onClick={() => {
+          router.push(RouterVote.detail_publish);
+        }}
+      >
+        {/* Isi deskripsi */}
+        <Card.Section>
+          <Stack>
+            <Text fw={"bold"}>Voting Pemilihan Tempat Makan</Text>
+            <Badge>
+              <Group>
+                <Text>
+                  {new Date().toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+                <Text>-</Text>
+                <Text>
+                  {new Date(
+                    moment(Date.now()).add(10, "days").calendar()
+                  ).toLocaleDateString(["id-ID"], {
+                    dateStyle: "medium",
+                  })}
+                </Text>
+              </Group>
+            </Badge>
+            <Stack>
+              <Grid>
+                <Grid.Col span={6}>
+                  <Stack align="center" spacing={"xs"}>
+                    <Text fz={10}>Voting A</Text>
+                    <Avatar radius={100} variant="outline" color="blue">
+                      2
+                    </Avatar>
+                  </Stack>
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <Stack align="center" spacing={"xs"}>
+                    <Text fz={10}>Voting B</Text>
+                    <Avatar radius={100} variant="outline" color="red">
+                      3
+                    </Avatar>
+                  </Stack>
+                </Grid.Col>
+              </Grid>
+            </Stack>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/app_modules/vote/main/status/reject.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import ComponentVote_CardViewStatus from "../../component/card_view_status";
+
+export default function Vote_StatusReject() {
+  return (
+    <>
+      <ComponentVote_CardViewStatus path={RouterVote.detail_reject} />
+    </>
+  );
+}

src/app_modules/vote/main/status/review.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import ComponentVote_CardViewStatus from "../../component/card_view_status";
+
+export default function Vote_StatusReview() {
+  return (
+    <>
+      <ComponentVote_CardViewStatus path={RouterVote.detail_review}/>
+    </>
+  );
+}

src/app_modules/vote/splash/index.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import { Center, Image, Paper, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_vote_hotMenu } from "../global_state";
+
+export default function Vote_Splash() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_vote_hotMenu);
+
+  useShallowEffect(() => {
+    setTimeout(() => {
+      setHotMenu(0)
+      router.replace(RouterVote.beranda);
+    }, 2000);
+  }, []);
+
+  return (
+    <>
+      <Center h={"100vh"}>
+        <Paper>
+          <Image alt="logo" src={"/aset/vote/logo.png"} />
+        </Paper>
+      </Center>
+    </>
+  );
+}

src/app_modules_admin/READ_ADMIN.md

@@ -1 +0,0 @@
-# Admin here

src/app_modules_admin/main/index.ts

@@ -1,4 +0,0 @@
-import AdminMain_Dashboard from "./main";
-import AdminMain_Layout from "./layout";
-
-export { AdminMain_Dashboard, AdminMain_Layout };

src/app_modules_admin/main/layout.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import {
-  AppShell,
-  Navbar,
-  MediaQuery,
-  Aside,
-  Footer,
-  Header,
-  Burger,
-  Text,
-  useMantineTheme,
-  Box,
-  NavLink,
-  Divider,
-  Group,
-  Title,
-  ActionIcon,
-} from "@mantine/core";
-import { IconLogout } from "@tabler/icons-react";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
-import toast from "react-simple-toasts";
-
-export default function AdminMain_Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const router = useRouter();
-  const theme = useMantineTheme();
-  const [opened, setOpened] = useState(false);
-  const [active, setActive] = useState(0);
-
-  const listAdminPage = [
-    {
-      id: 1,
-      name: "Dashboard",
-      // route: RouterAdminDashboard.main_admin,
-      child: [
-        
-      ],
-    },
-    {
-      id: 2,
-      name: "Investasi",
-      // route: RouterAdminInvestasi.main_investasi,
-      child: [
-        {
-          id: 1,
-          name: "Child Investasi",
-        },
-      ],
-    },
-    {
-      id: 3,
-      name: "Donasi",
-      // route: RouterAdminDonasi.main_donasi,
-      child: [
-        {
-          id: 1,
-          name: "Child Don 1",
-        },
-        {
-          id: 1,
-          name: "Child DOn 2",
-        },
-      ],
-    },
-    {
-      id: 4,
-      name: "Event",
-      // route: RouterAdminEvent.main_event,
-      child: [
-        {
-          id: 1,
-          name: "Child Event",
-        },
-      ],
-    },
-  ];
-
-  return (
-    <>
-      <AppShell
-        padding={"sm"}
-        navbarOffsetBreakpoint="md"
-        asideOffsetBreakpoint="sm"
-        navbar={
-          <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
-            <Navbar
-              width={{ lg: 200, md: 200, sm: 200, base: 200 }}
-              hiddenBreakpoint="md"
-              hidden={!opened}
-              p="xs"
-              bg={"gray.2"}
-            >
-              {listAdminPage.map((e, i) => (
-                <Box key={i}>
-                  <NavLink
-                    sx={{
-                      ":hover": {
-                        backgroundColor: "transparent",
-                      },
-                    }}
-                    fw={active === i ? "bold" : "normal"}
-                    label={e.name}
-                    onClick={() => {
-                      setActive(i);
-                      // router.push(e.route);
-                      toast(e.name);
-                    }}
-                  >
-                    {_.isEmpty(e.child) ? (
-                      ""
-                    ) : (
-                      <Box>
-                        {e.child.map((v, ii) => (
-                          <Box key={ii}>
-                            <NavLink label={v.name} />
-                          </Box>
-                        ))}
-                      </Box>
-                    )}
-                  </NavLink>
-                </Box>
-              ))}
-            </Navbar>
-          </MediaQuery>
-        }
-        header={
-          <Header height={50} bg={"gray.2"}>
-            {/* Mobile View */}
-            <MediaQuery largerThan="md" styles={{ display: "none" }}>
-              <Group h={50} align="center" px={"md"} position="apart">
-                <Burger
-                  opened={opened}
-                  onClick={() => setOpened((o) => !o)}
-                  size="sm"
-                  color={theme.colors.gray[6]}
-                  mr="xl"
-                />
-                <Title order={6}>Dashboard Admin</Title>
-                <ActionIcon
-                  variant="transparent"
-                  // onClick={() => router.push(RouterHome.main_home)}
-                >
-                  {/* <IconLogout color="red" />  */}
-                  <IconLogout />
-                </ActionIcon>
-              </Group>
-            </MediaQuery>
-
-            {/* Web View */}
-            <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
-              <Group position="apart" align="center" h={50} px={"md"}>
-                <Text fw={"lighter"}>Dashboard Admin</Text>
-                <Title order={4}> HIPMI</Title>
-                {/* <Group>
-                  {listAdminPage.map((e) => (
-                    <Text key={e.id}  onClick={() => router.push(e.route)}>
-                      {e.name}
-                    </Text>
-                  ))}
-                </Group> */}
-                {/* <Admin_Logout/> */}
-                <IconLogout />
-              </Group>
-            </MediaQuery>
-          </Header>
-        }
-      >
-        {children}
-      </AppShell>
-    </>
-  );
-}

src/app_modules_admin/main/main/index.tsx

@@ -1,8 +0,0 @@
-"use client"
-
-export default function AdminMain_Dashboard(){
-    return <>
-    ini main
-    
-    </>
-}