#style:

Deskripsi:
- UI Voting bagian beranda dan status
## Noissue

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

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

src/app/dev/vote/detail/draft/[id]/loading.tsx

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

src/app/dev/vote/detail/main/[id]/loading.tsx

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

src/app/dev/vote/detail/publish/[id]/loading.tsx

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

src/app/dev/vote/detail/reject/[id]/loading.tsx

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

src/app/dev/vote/detail/review/[id]/loading.tsx

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

src/app/dev/vote/edit/[id]/loading.tsx

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

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

@@ -1,8 +1,8 @@
 import { Vote_Beranda } from "@/app_modules/vote";
-import { Vote_getAllListPublish } from "@/app_modules/vote/fun/get/get_all_list_publish";
+import { vote_getAllListPublish } from "@/app_modules/vote/fun/get/get_all_list_publish";
 
 export default async function Page() {
-    const dataVote = await Vote_getAllListPublish()
+    const dataVote = await vote_getAllListPublish({page: 1})
 
     return (
       <>

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

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

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

@@ -1,12 +1,14 @@
 import { Vote_Status } from "@/app_modules/vote";
-import { Vote_getListByStatusId } from "@/app_modules/vote/fun/get/get_list_status_by_status_id";
+import { vote_getAllDraft } from "@/app_modules/vote/fun/get/status/get_all_draft";
+import { vote_getAllPublish } from "@/app_modules/vote/fun/get/status/get_all_publish";
+import { vote_getAllReject } from "@/app_modules/vote/fun/get/status/get_all_reject";
+import { vote_getAllReview } from "@/app_modules/vote/fun/get/status/get_all_review";
 
 export default async function Page() {
-  const listPublish = await Vote_getListByStatusId("1");
+  const listPublish = await vote_getAllPublish({page: 1});
-  const listReview = await Vote_getListByStatusId("2");
+  const listReview = await vote_getAllReview({page: 1});
-  const listDraft = await Vote_getListByStatusId("3");
+  const listDraft = await vote_getAllDraft({page: 1});
-  const listReject = await Vote_getListByStatusId("4");
+  const listReject = await vote_getAllReject({page: 1});
-
 
   return (
     <>

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

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

src/app_modules/_global/component/button_create.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ActionIcon, Loader } from "@mantine/core";
+import { IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentGlobal_CreateButton({ path }: { path: string }) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        variant="transparent"
+        radius={"xl"}
+        size={"xl"}
+        style={{
+          position: "absolute",
+          zIndex: 1,
+          bottom: 100,
+          right: 30,
+          transition: "0.5s",
+          border: `1px solid ${AccentColor.skyblue}`,
+          backgroundColor: AccentColor.blue,
+          padding: 3,
+        }}
+        onClick={() => {
+          setLoading(true);
+          router.push(path);
+        }}
+      >
+        {isLoading ? (
+          <Loader color={AccentColor.yellow} size={25} />
+        ) : (
+          <IconPencilPlus color="white" />
+        )}
+      </ActionIcon>
+    </>
+  );
+}

src/app_modules/forum/main/layout.tsx

@@ -1,33 +1,17 @@
 "use client";
 
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   ActionIcon,
-  AppShell,
   Avatar,
-  Center,
+  Loader
-  Footer,
-  Grid,
-  Group,
-  Header,
-  Loader,
-  Stack,
-  Text,
-  Title,
 } from "@mantine/core";
-import React, { useState } from "react";
-import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { IconChevronLeft, IconCircle, IconHome } from "@tabler/icons-react";
-import router from "next/router";
 import { useRouter } from "next/navigation";
-import { title } from "process";
+import React, { useState } from "react";
-import { MODEL_USER } from "@/app_modules/home/model/interface";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutForum_Main({
   children,

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

@@ -1,31 +1,15 @@
 "use client";
 
-import {
-  ActionIcon,
-  AppShell,
-  Box,
-  Drawer,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import React from "react";
-import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
-import { IconDots, IconDotsVertical, IconEdit, IconX } from "@tabler/icons-react";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import { useRouter } from "next/navigation";
-import { useDisclosure } from "@mantine/hooks";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import {
+  ActionIcon
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
+import React from "react";
 
 export default function LayoutJob_DetailDraft({
   children,
@@ -34,7 +18,6 @@ export default function LayoutJob_DetailDraft({
   children: React.ReactNode;
   jobId: string;
 }) {
-  const router = useRouter();
   const [opened, { open, close }] = useDisclosure();
 
   const listComponent = [

src/app_modules/job/main/arsip/ui_arsip.tsx

@@ -1,18 +1,17 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { MODEL_JOB } from "../../model/interface"
-import _ from "lodash";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { Box, Center, Loader } from "@mantine/core";
+import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
 import ComponentJob_CardStatus from "../../component/card/card_view";
-import job_getAllStatusPublish from "../../fun/get/status/get_list_publish";
 import { job_getAllArsipById } from "../../fun/get/get_all_arsip";
+import { MODEL_JOB } from "../../model/interface";
 
-export function Job_UI_Arsip({listData}: {listData: MODEL_JOB[]}){
+export function Job_UI_Arsip({ listData }: { listData: MODEL_JOB[] }) {
-    const [data, setData] = useState(listData)
+  const [data, setData] = useState(listData);
   const [activePage, setActivePage] = useState(1);
 
   return (
@@ -21,7 +20,7 @@ export function Job_UI_Arsip({listData}: {listData: MODEL_JOB[]}){
         <ComponentGlobal_IsEmptyData />
       ) : (
         // --- Main component --- //
-          <Box >
+        <Box>
           <ScrollOnly
             height="85vh"
             renderLoading={() => (

src/app_modules/job/main/layout.tsx

@@ -79,42 +79,6 @@ export default function LayoutJob_Main({
               </Stack>
             ))}
           </SimpleGrid>
-          // <Stack justify="center" h={"100%"}>
-          //   <Grid>
-          //     {listFooter.map((e) => (
-          //       <Grid.Col
-          //         key={e.id}
-          //         span={"auto"}
-          //         pt={"md"}
-          //         onClick={() => {
-          //           // setLoading(true);
-          //           // setTimeout(() => router.replace(e.path), 3000);
-          //           router.replace(e.path);
-          //           setHotMenuId(e.id);
-          //           // setTimeout(() => setLoading(false), 1000);
-          //         }}
-          //       >
-          //         <Center>
-          //           <Stack align="center" spacing={0}>
-          //             <ActionIcon
-          //               radius={"xl"}
-          //               variant="transparent"
-          //               c={hotMenuId === e.id ? MainColor.yellow : "white"}
-          //             >
-          //               {e.icon}
-          //             </ActionIcon>
-          //             <Text
-          //               fz={10}
-          //               c={hotMenuId === e.id ? MainColor.yellow : "white"}
-          //             >
-          //               {e.name}
-          //             </Text>
-          //           </Stack>
-          //         </Center>
-          //       </Grid.Col>
-          //     ))}
-          //   </Grid>
-          // </Stack>
         }
       >
         {children}

src/app_modules/vote/component/card_view_publish.tsx

@@ -13,11 +13,15 @@ import {
   Text,
   Title,
   Box,
+  Center,
+  Progress,
 } from "@mantine/core";
 import moment from "moment";
 import { useRouter } from "next/navigation";
 import { MODEL_VOTING } from "../model/interface";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { toNumber } from "lodash";
 
 export default function ComponentVote_CardViewPublish({
   data,
@@ -35,7 +39,19 @@ export default function ComponentVote_CardViewPublish({
   const router = useRouter();
   return (
     <>
-      <Card shadow="lg" withBorder p={30} radius={"md"}>
+      <Card
+        radius={"md"}
+        px={30}
+        pt={authorName ? 30 : 10}
+        pb={authorName ? 100 : 30}
+        mb={"lg"}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+        }}
+      >
         {/* Header name */}
         {authorName ? (
           <Card.Section>
@@ -48,6 +64,7 @@ export default function ComponentVote_CardViewPublish({
         ) : (
           ""
         )}
+
         {/* Isi deskripsi */}
         <Card.Section
           py={authorName ? "sm" : 0}
@@ -59,9 +76,21 @@ export default function ComponentVote_CardViewPublish({
             }
           }}
         >
-          <Stack>
+          <Stack spacing={"xl"}>
-            <Text fw={"bold"}>{data ? data.title : "Judul Voting"}</Text>
+            <Stack align="center">
-            <Badge>
+              <Text align="center" fw={"bold"}>
+                {data ? data.title : "Judul Voting"}
+              </Text>
+              <Badge
+                styles={{
+                  root: {
+                    backgroundColor: AccentColor.blue,
+                    border: `1px solid ${AccentColor.skyblue}`,
+                    color: "white",
+                    width: "80%",
+                  },
+                }}
+              >
                 <Group>
                   <Text>
                     {data
@@ -80,23 +109,26 @@ export default function ComponentVote_CardViewPublish({
                   </Text>
                 </Group>
               </Badge>
+            </Stack>
             {data ? (
               <Stack>
-                <Grid>
+                {data?.Voting_DaftarNamaVote.map((v, i) => (
-                  {data?.Voting_DaftarNamaVote.map((v) => (
+                  <Stack key={v.id} spacing={0}>
-                    <Grid.Col key={v.id} span={"auto"}>
+                    <Text>{v.value}</Text>
-                      <Stack align="center" spacing={"xs"}>
+                    <Progress radius={"xl"} value={v.jumlah} color="yellow" />
-                        <Text fz={10} lineClamp={1}>
-                          {v.value}
-                        </Text>
-
-                        <Avatar radius={100} variant="outline" color="blue">
-                          <Text>{v.jumlah}</Text>
-                        </Avatar>
                   </Stack>
-                    </Grid.Col>
+                  // <Grid.Col key={v.id} span={"auto"}>
+                  //   <Stack align="center" spacing={"xs"}>
+                  //     <Text fz={10} lineClamp={1}>
+                  //       {v.value}
+                  //     </Text>
+
+                  //     <Avatar radius={100} variant="outline" color="yellow">
+                  //       <Text>{v.jumlah}</Text>
+                  //     </Avatar>
+                  //   </Stack>
+                  // </Grid.Col>
                 ))}
-                </Grid>
               </Stack>
             ) : (
               <Stack>

src/app_modules/vote/component/card_view_status.tsx

@@ -1,20 +1,10 @@
 "use client";
 
-import {
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-  Card,
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-  Stack,
+import { Badge, Card, Group, Stack, Text } from "@mantine/core";
-  Title,
-  Badge,
-  Group,
-  Radio,
-  Grid,
-  Center,
-  Text,
-} from "@mantine/core";
-import moment from "moment";
 import { useRouter } from "next/navigation";
 import { MODEL_VOTING } from "../model/interface";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 
 export default function ComponentVote_CardViewStatus({
   path,
@@ -27,10 +17,14 @@ export default function ComponentVote_CardViewStatus({
   return (
     <>
       <Card
-        shadow="lg"
-        withBorder
         p={30}
-        radius={"md"}
+        mb={"lg"}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+        }}
         onClick={() => {
           if (data?.id === undefined) {
             ComponentGlobal_NotifikasiPeringatan("Path tidak ditemukan");
@@ -41,11 +35,21 @@ export default function ComponentVote_CardViewStatus({
       >
         {/* Isi deskripsi */}
         <Card.Section>
-          <Stack>
+          <Stack px={"xs"} align="center">
-            <Text fw={"bold"} truncate>
+            <Text fw={"bold"} lineClamp={1} align="center">
               {data?.title}
             </Text>
-            <Badge>
+            <Badge
+              // size="md"
+              styles={{
+                root: {
+                  backgroundColor: AccentColor.blue,
+                  border: `1px solid ${AccentColor.skyblue}`,
+                  color: "white",
+                  width: "80%",
+                },
+              }}
+            >
               <Group>
                 <Text>
                   {data?.awalVote.toLocaleDateString(["id-ID"], {

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

@@ -1,23 +1,20 @@
 "use client";
-import {
-  Card,
-  Stack,
-  Center,
-  Title,
-  Badge,
-  Group,
-  Radio,
-  Grid,
-  Text,
-  Avatar,
-  Divider,
-  Box,
-} from "@mantine/core";
-import moment from "moment";
-import { MODEL_VOTE_KONTRIBUTOR } from "../../model/interface";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  Avatar,
+  Badge,
+  Card,
+  Center,
+  Divider,
+  Grid,
+  Stack,
+  Text,
+  Title
+} from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
+import { MODEL_VOTE_KONTRIBUTOR } from "../../model/interface";
 
 export default function ComponentVote_DaftarKontributorVoter({
   listKontributor,
@@ -27,7 +24,15 @@ export default function ComponentVote_DaftarKontributorVoter({
   const router = useRouter()
   return (
     <>
-      <Card shadow="lg" withBorder p={30}>
+      <Card
+        p={30}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+        }}
+      >
         <Card.Section>
           <Stack>
             <Center>
@@ -36,15 +41,22 @@ export default function ComponentVote_DaftarKontributorVoter({
 
             {_.isEmpty(listKontributor) ? (
               <Center>
-                <Text fz={"xs"} fw={"bold"}>- Tidak ada voting -</Text>
+                <Text fz={"xs"} c={"gray"} fw={"bold"}>
+                  - Tidak ada voting -
+                </Text>
               </Center>
             ) : (
               <Stack>
                 {listKontributor?.map((e, i) => (
                   <Stack spacing={"xs"} key={i}>
                     <Grid>
-                      <Grid.Col span={2}
+                      <Grid.Col
-                      onClick={() => router.push(RouterProfile.katalog + e.Author.Profile.id)}
+                        span={2}
+                        onClick={() =>
+                          router.push(
+                            RouterProfile.katalog + e.Author.Profile.id
+                          )
+                        }
                       >
                         <Avatar
                           size={30}

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

@@ -1,19 +1,16 @@
 "use client";
 import {
-  Card,
-  Stack,
-  Center,
-  Title,
   Badge,
+  Card,
+  Center,
   Group,
-  Radio,
+  Stack,
-  Grid,
   Text,
+  Title
 } from "@mantine/core";
-import moment from "moment";
-import { MODEL_VOTING } from "../../model/interface";
 import { IconCircle } from "@tabler/icons-react";
-import _ from "lodash";
+import { MODEL_VOTING } from "../../model/interface";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentVote_DetailDataSebelumPublish
 ({
@@ -21,24 +18,42 @@ export default function ComponentVote_DetailDataSebelumPublish
 }: {
   data?: MODEL_VOTING;
 }) {
-
   return (
     <>
-      <Card shadow="lg" withBorder p={30}>
+      <Card
+        p={30}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+        }}
+      >
         <Card.Section px={"xs"}>
           <Stack spacing={"lg"}>
             <Center>
-              <Title order={5}>{data?.title}</Title>
+              <Title align="center" order={4}>
+                {data?.title}
+              </Title>
             </Center>
             <Text>{data?.deskripsi}</Text>
 
-            <Stack spacing={0}>
+            <Stack spacing={0} align="center">
               <Center>
                 <Text fz={10} fw={"bold"}>
                   Batas Voting
                 </Text>
               </Center>
-              <Badge>
+              <Badge
+                styles={{
+                  root: {
+                    backgroundColor: AccentColor.blue,
+                    border: `1px solid ${AccentColor.skyblue}`,
+                    color: "white",
+                    width: "80%",
+                  },
+                }}
+              >
                 <Group>
                   <Text>
                     {data?.awalVote.toLocaleDateString(["id-ID"], {

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

@@ -15,6 +15,7 @@ import { MODEL_VOTING } from "../../model/interface";
 import { IconCircle } from "@tabler/icons-react";
 import _ from "lodash";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentVote_DetailDataSetelahPublish({
   data,
@@ -25,7 +26,15 @@ export default function ComponentVote_DetailDataSetelahPublish({
 }) {
   return (
     <>
-      <Card shadow="lg" withBorder p={30}>
+      <Card
+        p={30}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+        }}
+      >
         {authorName ? (
           <Card.Section>
             <ComponentGlobal_AuthorNameOnHeader
@@ -40,17 +49,27 @@ export default function ComponentVote_DetailDataSetelahPublish({
         <Card.Section px={"xs"} py={authorName ? "sm" : 0}>
           <Stack spacing={"lg"}>
             <Center>
-              <Title order={5}>{data?.title}</Title>
+              <Title order={4} align="center">
+                {data?.title}
+              </Title>
             </Center>
             <Text>{data?.deskripsi}</Text>
 
             <Stack spacing={0} pb={authorName ? 0 : "xs"}>
-              <Center>
+              <Stack align="center" spacing={"xs"}>
                 <Text fz={10} fw={"bold"}>
                   Batas Voting
                 </Text>
-              </Center>
+                <Badge
-              <Badge>
+                  styles={{
+                    root: {
+                      backgroundColor: AccentColor.blue,
+                      border: `1px solid ${AccentColor.skyblue}`,
+                      color: "white",
+                      width: "80%",
+                    },
+                  }}
+                >
                   <Group>
                     <Text>
                       {data?.awalVote.toLocaleDateString(["id-ID"], {
@@ -67,6 +86,7 @@ export default function ComponentVote_DetailDataSetelahPublish({
                 </Badge>
               </Stack>
             </Stack>
+          </Stack>
         </Card.Section>
       </Card>
     </>

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

@@ -1,16 +1,14 @@
 "use client";
 
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import {
   Avatar,
-  Box,
   Card,
   Center,
   Grid,
-  Group,
-  List,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import { MODEL_VOTING_DAFTAR_NAMA_VOTE } from "../../model/interface";
 
@@ -21,7 +19,15 @@ export default function ComponentVote_HasilVoting({
 }) {
   return (
     <>
-      <Card shadow="lg" withBorder p={30}>
+      <Card
+        p={30}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+        }}
+      >
         <Card.Section>
           <Stack>
             <Center>
@@ -36,11 +42,13 @@ export default function ComponentVote_HasilVoting({
                       radius={100}
                       size={70}
                       variant="outline"
-                      color="blue"
+                      color="yellow"
                     >
-                      <Text> {e.jumlah}</Text>
+                      <Text>{e.jumlah}</Text>
                     </Avatar>
-                    <Text fz={"xs"}>{e.value}</Text>
+                    <Text fz={"xs"} align="center">
+                      {e.value}
+                    </Text>
                   </Stack>
                 </Grid.Col>
               ))}

src/app_modules/vote/create/index.tsx

@@ -13,7 +13,7 @@ import {
   Stack,
   Text,
   TextInput,
-  Textarea
+  Textarea,
 } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
 import { IconMinus, IconPlus } from "@tabler/icons-react";
@@ -26,6 +26,7 @@ import { useState } from "react";
 import { Vote_funCreate } from "../fun/create/create_vote";
 import { gs_vote_hotMenu, gs_vote_status } from "../global_state";
 import { MODEL_VOTING } from "../model/interface";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Vote_Create() {
   const router = useRouter();
@@ -36,13 +37,10 @@ export default function Vote_Create() {
   const [data, setData] = useState({
     title: "",
     deskripsi: "",
-    awalVote: Date,
+    awalVote: "",
-    akhirVote: Date,
+    akhirVote: "",
   });
 
-  // const [range, setRange] = useState({
-  // });
-
   const [listVote, setListVote] = useState([
     {
       name: "Nama Pilihan",
@@ -56,9 +54,14 @@ export default function Vote_Create() {
 
   return (
     <>
-      <Stack px={"sm"} spacing={"xl"}>
+      <Stack px={"sm"} spacing={"xl"} mb={"xl"}>
         <Stack>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Judul"
             withAsterisk
             placeholder="Masukan judul"
@@ -72,6 +75,11 @@ export default function Vote_Create() {
           />
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               label="Deskripsi"
               autosize
               minRows={2}
@@ -93,6 +101,11 @@ export default function Vote_Create() {
           </Stack>
 
           <DatePickerInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Jangka Waktu"
             placeholder="Masukan jangka waktu voting"
             withAsterisk
@@ -118,11 +131,16 @@ export default function Vote_Create() {
             </Text>
           </Center>
 
-          <Stack>
+          <Stack spacing={"xl"}>
             <Stack>
               {listVote.map((e, index) => (
                 <Box key={index}>
                   <TextInput
+                    styles={{
+                      label: {
+                        color: "white",
+                      },
+                    }}
                     label={e.name}
                     withAsterisk
                     maxLength={100}
@@ -140,31 +158,33 @@ export default function Vote_Create() {
             <Group position="center">
               <Button
                 disabled={listVote.length >= 4 ? true : false}
-                compact
-                w={100}
                 radius={"xl"}
                 leftIcon={<IconPlus size={15} />}
-                variant="outline"
                 onClick={() => {
                   setListVote([
                     ...listVote,
                     { name: "Nama Voting", value: "" },
                   ]);
                 }}
+                compact
+                bg={MainColor.yellow}
+                color={"yellow"}
+                c={"black"}
               >
                 <Text fz={8}>Tambah List</Text>
               </Button>
 
               <Button
                 disabled={listVote.length <= 2 ? true : false}
-                compact
-                w={100}
                 radius={"xl"}
                 leftIcon={<IconMinus size={15} />}
-                variant="outline"
                 onClick={() => {
                   setListVote([...listVote.slice(0, -1)]);
                 }}
+                compact
+                bg={MainColor.yellow}
+                color={"yellow"}
+                c={"black"}
               >
                 <Text fz={8}>Kurangi List</Text>
               </Button>
@@ -173,7 +193,15 @@ export default function Vote_Create() {
         </Stack>
 
         <Button
-          // disabled
+          disabled={
+            !data.title ||
+            !data.deskripsi ||
+            !data.awalVote ||
+            !data.akhirVote ||
+            listVote.map((e, i) => e.value).includes("")
+              ? true
+              : false
+          }
           loaderPosition="center"
           loading={isLoading ? true : false}
           mt={"lg"}
@@ -188,6 +216,12 @@ export default function Vote_Create() {
               setIsLoading
             );
           }}
+          c={"black"}
+          bg={MainColor.yellow}
+          color="yellow"
+          style={{
+            transition: "0.5s",
+          }}
         >
           Simpan
         </Button>
@@ -222,7 +256,7 @@ async function onSave(
 
   await Vote_funCreate(data, listVote).then((res) => {
     if (res.status === 201) {
-      setHotMenu(1);
+      setHotMenu(2);
       setTabsStatus("Review");
       router.replace(RouterVote.status);
       ComponentGlobal_NotifikasiBerhasil(res.message);

src/app_modules/vote/create/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentVote_HeaderTamplate from "../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutVote_Create({
   children,
@@ -12,9 +11,9 @@ export default function LayoutVote_Create({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentVote_HeaderTamplate title="Tambah Vote" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Vote" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -13,6 +13,13 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_glo
 import { Vote_funDeleteById } from "../../fun/delete/fun_delete_by_id";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import moment from "moment";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { useState } from "react";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 
 export default function Vote_DetailDraft({
   dataVote,
@@ -21,7 +28,15 @@ export default function Vote_DetailDraft({
 }) {
   return (
     <>
-      <Stack>
+      <Stack spacing={"xl"}>
+        {dataVote?.catatan ? (
+          <ComponentGlobal_BoxInformation
+            isReport
+            informasi={dataVote?.catatan}
+          />
+        ) : (
+          ""
+        )}
         <ComponentVote_DetailDataSebelumPublish data={dataVote} />
         <ButtonAction voteId={dataVote.id} awalVote={dataVote.awalVote} />
       </Stack>
@@ -38,7 +53,9 @@ function ButtonAction({
 }) {
   const router = useRouter();
   const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
-  const [opened, { open, close }] = useDisclosure(false);
+  const [openModal1, setOpenModal1] = useState(false);
+  const [openModal2, setOpenModal2] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onUpdate() {
     const hariIni = new Date();
@@ -51,6 +68,7 @@ function ButtonAction({
       if (res.status === 200) {
         setTabsStatus("Review");
         ComponentGlobal_NotifikasiBerhasil("Berhasil Ajukan Review", 2000);
+        setIsLoading(true);
         router.back();
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
@@ -75,9 +93,10 @@ function ButtonAction({
       <SimpleGrid cols={2}>
         <Button
           radius={"xl"}
+          bg={MainColor.yellow}
           color="yellow"
           onClick={() => {
-            onUpdate();
+            setOpenModal1(true);
           }}
         >
           Ajukan Review
@@ -86,25 +105,60 @@ function ButtonAction({
           radius={"xl"}
           color="red"
           onClick={() => {
-            open();
+            setOpenModal2(true);
           }}
         >
           Hapus
         </Button>
       </SimpleGrid>
 
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+      {/* MODAL AJUKAN */}
-        <Stack>
+      <UIGlobal_Modal
-          <Title order={6}>Yakin menghapus vote ini ?</Title>
+        title={"Anda yakin akan melakukan pengajuan review kembali ?"}
-          <Group position="center">
+        opened={openModal1}
+        close={() => setOpenModal1(false)}
+        buttonKiri={
           <Button
             radius={"xl"}
             onClick={() => {
-                close();
+              setOpenModal1(false);
             }}
           >
-              Kembali
+            Batal
           </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            onClick={() => {
+              onUpdate();
+            }}
+            color="yellow"
+            bg={MainColor.yellow}
+          >
+            Ajukan
+          </Button>
+        }
+      />
+
+      {/* MODAL HAPUS */}
+      <UIGlobal_Modal
+        title={"Anda yakin menghapus voting ini ?"}
+        opened={openModal2}
+        close={() => setOpenModal2(false)}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setOpenModal2(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
           <Button
             radius={"xl"}
             onClick={() => {
@@ -114,9 +168,8 @@ function ButtonAction({
           >
             Hapus
           </Button>
-          </Group>
+        }
-        </Stack>
+      />
-      </Modal>
     </>
   );
 }

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

@@ -1,32 +1,57 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import { ActionIcon, AppShell } from "@mantine/core";
-import React from "react";
+import React, { useState } from "react";
 import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
-import { IconEdit } from "@tabler/icons-react";
+import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
 
 export default function LayoutVote_DetailDraft({
   children,
-  voteId
+  voteId,
 }: {
   children: React.ReactNode;
-  voteId: string
+  voteId: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listComponent = [
+    {
+      id: "1",
+      name: "Edit Voting",
+      icon: <IconEdit />,
+      path: RouterVote.edit + voteId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentVote_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
-            icon={<IconEdit />}
+            customButtonRight={
-            route2={RouterVote.edit + voteId}
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listComponent}
+      />
     </>
   );
 }

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

@@ -1,37 +1,36 @@
 "use client";
 
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import {
-  Card,
+  Avatar,
-  Stack,
-  Center,
-  Title,
   Badge,
-  Group,
-  Radio,
-  Grid,
-  Text,
   Box,
   Button,
-  Avatar,
+  Card,
+  Center,
   Divider,
+  Grid,
+  Group,
+  Radio,
+  Stack,
+  Text,
+  Title,
 } from "@mantine/core";
-import moment from "moment";
+import _ from "lodash";
-import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import { useState } from "react";
 import ComponentVote_DaftarKontributorVoter from "../../component/detail/detail_daftar_kontributor";
+import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import { Vote_funCreateHasil } from "../../fun/create/create_hasil";
+import { Vote_getOnebyId } from "../../fun/get/get_one_by_id";
 import {
   MODEL_VOTE_KONTRIBUTOR,
   MODEL_VOTING,
   MODEL_VOTING_DAFTAR_NAMA_VOTE,
 } from "../../model/interface";
-import { useState } from "react";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import _ from "lodash";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { Vote_funCreatePilihanVotingById } from "../../fun/create/create_pilihan_voting";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { Vote_funCreateHasil } from "../../fun/create/create_hasil";
-import { Vote_getOnebyId } from "../../fun/get/get_one_by_id";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 
 export default function Vote_MainDetail({
   dataVote,
@@ -79,8 +78,16 @@ function TampilanDataVoting({
   const [votingNameId, setVotingNameId] = useState("");
   return (
     <>
-      <Card shadow="lg" withBorder p={30}>
+      <Card
-        <Card.Section>
+        p={30}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+        }}
+      >
+        <Card.Section mb={"md"}>
           <ComponentGlobal_AuthorNameOnHeader
             authorName={dataVote?.Author.Profile.name}
             imagesId={dataVote?.Author.Profile.imagesId}
@@ -90,17 +97,28 @@ function TampilanDataVoting({
         <Card.Section px={"xs"} py={"sm"}>
           <Stack spacing={"lg"}>
             <Center>
-              <Title order={5}>{dataVote?.title}</Title>
+              <Title order={5} align="center">
+                {dataVote?.title}
+              </Title>
             </Center>
             <Text>{dataVote?.deskripsi}</Text>
 
             <Stack spacing={0}>
-              <Center>
+              <Stack align="center" spacing={"xs"}>
                 <Text fz={10} fw={"bold"}>
                   Batas Voting
                 </Text>
-              </Center>
+
-              <Badge>
+                <Badge
+                  styles={{
+                    root: {
+                      backgroundColor: AccentColor.blue,
+                      border: `1px solid ${AccentColor.skyblue}`,
+                      color: "white",
+                      width: "80%",
+                    },
+                  }}
+                >
                   <Group>
                     <Text>
                       {dataVote?.awalVote.toLocaleDateString(["id-ID"], {
@@ -117,12 +135,19 @@ function TampilanDataVoting({
                 </Badge>
               </Stack>
             </Stack>
+          </Stack>
         </Card.Section>
 
         {/* Voting View */}
         <Card.Section py={"xl"}>
           {isKontributor ? (
-            <Stack align="center" spacing={0}>
+            <Stack
+              align="center"
+              spacing={0}
+              style={{
+                color: "white",
+              }}
+            >
               <Text mb={"sm"} fw={"bold"} fz={"xs"}>
                 Pilihan anda:
               </Text>
@@ -131,8 +156,18 @@ function TampilanDataVoting({
               </Badge>
             </Stack>
           ) : (
-            <Stack spacing={"xl"}>
+            <Stack
+              spacing={"xl"}
+              style={{
+                color: "white",
+              }}
+            >
               <Radio.Group
+                styles={{
+                  label: {
+                    color: "white",
+                  },
+                }}
                 value={votingNameId}
                 onChange={(val) => {
                   setVotingNameId(val);
@@ -146,7 +181,12 @@ function TampilanDataVoting({
                 <Stack px={"md"}>
                   {dataVote?.Voting_DaftarNamaVote.map((v) => (
                     <Box key={v.id}>
-                      <Radio label={v.value} value={v.id} />
+                      <Radio
+                      color="yellow"
+                        styles={{ label: { color: "white" } }}
+                        label={v.value}
+                        value={v.id}
+                      />
                     </Box>
                   ))}
                 </Stack>
@@ -162,6 +202,9 @@ function TampilanDataVoting({
                     onClick={() =>
                       onVote(votingNameId, dataVote?.id as any, setData)
                     }
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Vote
                   </Button>

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

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutVote_MainDetail({
   children,
@@ -12,11 +14,11 @@ export default function LayoutVote_MainDetail({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentVote_HeaderTamplate title="Detail Voting" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Voting" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutVote_DetailPublish({
   children,
@@ -12,11 +14,11 @@ export default function LayoutVote_DetailPublish({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentVote_HeaderTamplate title="Detail Publish" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Publish" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -20,6 +20,10 @@ import { Vote_funDeleteById } from "../../fun/delete/fun_delete_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { Vote_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_id";
 import ComponentVote_NotedBox from "../../component/noted_box";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { useState } from "react";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Vote_DetailReject({
   dataVote,
@@ -29,7 +33,10 @@ export default function Vote_DetailReject({
   return (
     <>
       <Stack spacing={"xl"}>
-        <ComponentVote_NotedBox informasi={dataVote?.catatan} />
+        <ComponentGlobal_BoxInformation
+          isReport
+          informasi={dataVote?.catatan}
+        />
         <ComponentVote_DetailDataSebelumPublish data={dataVote as any} />
         <ButtonAction voteId={dataVote.id} />
       </Stack>
@@ -40,7 +47,10 @@ export default function Vote_DetailReject({
 function ButtonAction({ voteId }: { voteId: string }) {
   const router = useRouter();
   const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
-  const [opened, { open, close }] = useDisclosure(false);
+
+  const [openModal1, setOpenModal1] = useState(false);
+  const [openModal2, setOpenModal2] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onUpdate() {
     await Vote_funEditStatusByStatusId(voteId, "3").then((res) => {
@@ -73,7 +83,7 @@ function ButtonAction({ voteId }: { voteId: string }) {
           radius={"xl"}
           color="orange"
           onClick={() => {
-            onUpdate();
+            setOpenModal1(true);
           }}
         >
           Edit Kembali
@@ -82,25 +92,58 @@ function ButtonAction({ voteId }: { voteId: string }) {
           radius={"xl"}
           color="red"
           onClick={() => {
-            open();
+            setOpenModal2(true);
           }}
         >
           Hapus
         </Button>
       </SimpleGrid>
 
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+      <UIGlobal_Modal
-        <Stack>
+        title={"Anda akan mengedit kembali voting ini ?"}
-          <Title order={6}>Yakin menghapus vote ini ?</Title>
+        opened={openModal1}
-          <Group position="center">
+        close={() => setOpenModal1(false)}
+        buttonKiri={
           <Button
             radius={"xl"}
             onClick={() => {
-                close();
+              setOpenModal1(false);
             }}
           >
-              Kembali
+            Batal
           </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            onClick={() => {
+              onUpdate();
+            }}
+            color="orange"
+          >
+            Simpan
+          </Button>
+        }
+      />
+
+      {/* MODAL HAPUS */}
+      <UIGlobal_Modal
+        title={"Anda yakin menghapus voting ini ?"}
+        opened={openModal2}
+        close={() => setOpenModal2(false)}
+        buttonKiri={
+          <Button
+            radius={"xl"}
+            onClick={() => {
+              setOpenModal2(false);
+            }}
+          >
+            Batal
+          </Button>
+        }
+        buttonKanan={
           <Button
             radius={"xl"}
             onClick={() => {
@@ -110,9 +153,8 @@ function ButtonAction({ voteId }: { voteId: string }) {
           >
             Hapus
           </Button>
-          </Group>
+        }
-        </Stack>
+      />
-      </Modal>
     </>
   );
 }

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutVote_DetailReject({
   children,
@@ -12,11 +11,11 @@ export default function LayoutVote_DetailReject({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentVote_HeaderTamplate title="Detail Reject" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,28 +1,16 @@
 "use client";
 
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import {
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-  Badge,
+import { Button, Stack } from "@mantine/core";
-  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 { useState } from "react";
 import ComponentVote_DetailDataSebelumPublish from "../../component/detail/detail_data_sebelum_publish";
 import { Vote_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_id";
+import { gs_vote_status } from "../../global_state";
 import { MODEL_VOTING } from "../../model/interface";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
-import { useState } from "react";
 
 export default function Vote_DetailReview({
   dataVote,
@@ -43,6 +31,7 @@ function ButtonAction({ voteId }: { voteId: string }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
+  const [openModal, setOpenModal] = useState(false);
 
   async function onUpdate() {
     await Vote_funEditStatusByStatusId(voteId, "3").then((res) => {
@@ -59,16 +48,36 @@ function ButtonAction({ voteId }: { voteId: string }) {
   return (
     <>
       <Button
-        loaderPosition="center"
-        loading={isLoading ? true : false}
         radius={"xl"}
         color="orange"
-        onClick={() => {8
+        onClick={() => {
-          onUpdate();
+          setOpenModal(true);
         }}
       >
         Batalkan Review
       </Button>
+
+      <UIGlobal_Modal
+        title={"Anda yakin akan membatalkan review?"}
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            color="green"
+            onClick={() => onUpdate()}
+          >
+            Simpan
+          </Button>
+        }
+      />
     </>
   );
 }

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutVote_DetailReview({
   children,
@@ -12,11 +11,11 @@ export default function LayoutVote_DetailReview({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentVote_HeaderTamplate title="Detail Review" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/vote/edit/index.tsx

@@ -14,7 +14,7 @@ import {
   Stack,
   Text,
   TextInput,
-  Textarea
+  Textarea,
 } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
@@ -29,6 +29,9 @@ import {
   MODEL_VOTING,
   MODEL_VOTING_DAFTAR_NAMA_VOTE,
 } from "../model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { Vote_getListDaftarNamaById } from "../fun/get/get_list_daftar_vote_by_id";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Vote_Edit({
   dataVote,
@@ -40,10 +43,24 @@ export default function Vote_Edit({
   const [data, setData] = useState(dataVote);
   const [pilihanNama, setPilihanNama] = useState(listDaftarVote);
 
+  useShallowEffect(() => {
+    onLoadList();
+  }, []);
+
+  async function onLoadList() {
+    const loadList = await Vote_getListDaftarNamaById(data.id);
+    setPilihanNama(loadList as any);
+  }
+
   return (
     <>
-      <Stack px={"sm"}>
+      <Stack px={"sm"} c={"white"} mb={"xl"}>
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul"
           withAsterisk
           placeholder="Judul"
@@ -66,6 +83,11 @@ export default function Vote_Edit({
 
         <Stack spacing={5}>
           <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Deskripsi"
             autosize
             minRows={2}
@@ -95,6 +117,11 @@ export default function Vote_Edit({
         </Stack>
 
         <DatePickerInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Jangka Waktu"
           placeholder="Masukan jangka waktu voting"
           withAsterisk
@@ -130,10 +157,14 @@ export default function Vote_Edit({
           <Stack>
             <Stack>
               {pilihanNama.map((e, index) => (
-                <Grid key={index} h="100%" align="center">
+                <Group key={index} position="apart" align="center">
-                  <Grid.Col span={10}>
+                  <Box w={"85%"}>
-                    <Box>
                     <TextInput
+                      styles={{
+                        label: {
+                          color: "white",
+                        },
+                      }}
                       label={"Nama Pilihan"}
                       withAsterisk
                       placeholder="Nama pilihan"
@@ -153,9 +184,8 @@ export default function Vote_Edit({
                       }}
                     />
                   </Box>
-                  </Grid.Col>
-                  <Grid.Col span={2} mt={"md"}>
                   <ActionIcon
+                    mt={"lg"}
                     variant="transparent"
                     radius={"xl"}
                     disabled={pilihanNama.length < 3 ? true : false}
@@ -171,22 +201,22 @@ export default function Vote_Edit({
                       color={pilihanNama.length < 3 ? "gray" : "red"}
                     />
                   </ActionIcon>
-                  </Grid.Col>
+                </Group>
-                </Grid>
               ))}
             </Stack>
 
             <Group position="center">
               <Button
                 disabled={pilihanNama.length >= 4 ? true : false}
-                compact
-                w={100}
                 radius={"xl"}
                 leftIcon={<IconPlus size={15} />}
-                variant="outline"
                 onClick={() => {
                   setPilihanNama([...(pilihanNama as any), { value: "" }]);
                 }}
+                compact
+                bg={MainColor.yellow}
+                color={"yellow"}
+                c={"black"}
               >
                 <Text fz={8}>Tambah List</Text>
               </Button>
@@ -233,12 +263,18 @@ function ButtonAction({
   return (
     <>
       <Button
+        disabled={!data.title || !data.deskripsi ? true : false}
         loaderPosition="center"
         loading={isLoading ? true : false}
         mt={"lg"}
         radius={"xl"}
-        color="green"
         onClick={() => onUpdate()}
+        c={"black"}
+        bg={MainColor.yellow}
+        color="yellow"
+        style={{
+          transition: "0.5s",
+        }}
       >
         Update
       </Button>

src/app_modules/vote/edit/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentVote_HeaderTamplate from "../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutVote_Edit({
   children,
@@ -12,9 +11,11 @@ export default function LayoutVote_Edit({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentVote_HeaderTamplate title="Edit Vote" />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Vote" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/vote/fun/get/get_all_list_publish.ts

@@ -3,8 +3,13 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export async function Vote_getAllListPublish() {
+export async function vote_getAllListPublish({ page }: { page: number }) {
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
   const data = await prisma.voting.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       updatedAt: "desc",
     },

src/app_modules/vote/fun/get/get_list_status_by_status_id.ts

@@ -1,89 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-
-export async function Vote_getListByStatusId(statusId: string) {
-  const authorId = await user_getOneUserId();
-
-  if (statusId === "1") {
-    const data = await prisma.voting.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        voting_StatusId: "1",
-        authorId: authorId,
-        isActive: true,
-        akhirVote: {
-          gte: new Date(),
-        },
-      },
-      select: {
-        id: true,
-        title: true,
-        isActive: true,
-        createdAt: true,
-        updatedAt: true,
-        deskripsi: true,
-        awalVote: true,
-        akhirVote: true,
-        catatan: true,
-        authorId: true,
-        voting_StatusId: true,
-        Voting_DaftarNamaVote: {
-          orderBy: {
-            createdAt: "asc",
-          },
-        },
-      },
-    });
-
-    return data;
-  }
-
-  if (statusId === "2") {
-    const data = await prisma.voting.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        voting_StatusId: "2",
-        authorId: authorId,
-        isActive: true,
-      },
-    });
-
-    return data;
-  }
-
-  if (statusId === "3") {
-    const data = await prisma.voting.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        voting_StatusId: "3",
-        authorId: authorId,
-        isActive: true,
-      },
-    });
-
-    return data;
-  }
-
-  if (statusId === "4") {
-    const data = await prisma.voting.findMany({
-      orderBy: {
-        updatedAt: "desc",
-      },
-      where: {
-        voting_StatusId: "4",
-        authorId: authorId,
-        isActive: true,
-      },
-    });
-
-    return data;
-  }
-}

src/app_modules/vote/fun/get/status/get_all_draft.tsx

@@ -0,0 +1,26 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function vote_getAllDraft({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.voting.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      voting_StatusId: "3",
+      authorId: authorId,
+      isActive: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/vote/fun/get/status/get_all_publish.tsx

@@ -0,0 +1,47 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function vote_getAllPublish({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.voting.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      voting_StatusId: "1",
+      authorId: authorId,
+      isActive: true,
+      akhirVote: {
+        gte: new Date(),
+      },
+    },
+    select: {
+      id: true,
+      title: true,
+      isActive: true,
+      createdAt: true,
+      updatedAt: true,
+      deskripsi: true,
+      awalVote: true,
+      akhirVote: true,
+      catatan: true,
+      authorId: true,
+      voting_StatusId: true,
+      Voting_DaftarNamaVote: {
+        orderBy: {
+          createdAt: "asc",
+        },
+      },
+    },
+  });
+
+  return data;
+}

src/app_modules/vote/fun/get/status/get_all_reject.tsx

@@ -0,0 +1,26 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function vote_getAllReject({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.voting.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      voting_StatusId: "4",
+      authorId: authorId,
+      isActive: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/vote/fun/get/status/get_all_review.tsx

@@ -0,0 +1,26 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function vote_getAllReview({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.voting.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      voting_StatusId: "2",
+      authorId: authorId,
+      isActive: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/vote/global_state/index.ts

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

src/app_modules/vote/main/beranda.tsx

@@ -5,8 +5,10 @@ import {
   ActionIcon,
   Affix,
   Box,
+  Center,
+  Loader,
   Stack,
-  rem
+  rem,
 } from "@mantine/core";
 import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
 import { IconPencilPlus } from "@tabler/icons-react";
@@ -15,21 +17,20 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentVote_CardViewPublish from "../component/card_view_publish";
 import ComponentVote_IsEmptyData from "../component/is_empty_data";
-import { Vote_getAllListPublish } from "../fun/get/get_all_list_publish";
+import { vote_getAllListPublish } from "../fun/get/get_all_list_publish";
 import { MODEL_VOTING } from "../model/interface";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
+import { ScrollOnly } from "next-scroll-loader";
 
 export default function Vote_Beranda({
   dataVote,
 }: {
   dataVote: MODEL_VOTING[];
 }) {
-  const router = useRouter();
-
   const [data, setData] = useState(dataVote);
 
-  const [isLoading, setIsLoading] = useState(false);
-  const [scroll, scrollTo] = useWindowScroll();
-
   useShallowEffect(() => {
     onLoad({
       setData(val) {
@@ -39,46 +40,45 @@ export default function Vote_Beranda({
   }, [setData]);
 
   async function onLoad({ setData }: { setData: (val: any) => void }) {
-    const loadData = await Vote_getAllListPublish();
+    const loadData = await vote_getAllListPublish({ page: 1 });
     setData(loadData);
   }
 
+  const [activePage, setActivePage] = useState(1);
+
   return (
     <>
-      <Affix position={{ bottom: rem(150), right: rem(30) }}>
+      {_.isEmpty(data) ? (
-        <ActionIcon
+        <ComponentGlobal_IsEmptyData />
-          loading={isLoading ? true : false}
+      ) : (
-          opacity={scroll.y > 0 ? 0.5 : ""}
+        // --- Main component --- //
-          style={{
+        <ScrollOnly
-            transition: "0.5s",
+          height="85vh"
-          }}
+          renderLoading={() => (
-          size={"xl"}
+            <Center mt={"lg"}>
-          radius={"xl"}
+              <Loader color={"yellow"} />
-          variant="transparent"
+            </Center>
-          bg={"blue"}
+          )}
-          onClick={() => {
+          data={data}
-            setIsLoading(true);
+          setData={setData}
-            router.push(RouterVote.create);
+          moreData={async () => {
+            const loadData = await vote_getAllListPublish({
+              page: activePage + 1,
+            });
+
+            setActivePage((val) => val + 1);
+
+            return loadData;
           }}
         >
-          <IconPencilPlus color="white" />
+          {(item) => (
-        </ActionIcon>
-      </Affix>
-
-      {_.isEmpty(data) ? (
-        <ComponentVote_IsEmptyData text="Tidak ada data" />
-      ) : (
-        <Stack>
-          {data.map((e, i) => (
-            <Box key={i}>
             <ComponentVote_CardViewPublish
+              data={item}
               path={RouterVote.main_detail}
-                data={e}
               authorName={true}
             />
-            </Box>
+          )}
-          ))}
+        </ScrollOnly>
-        </Stack>
       )}
     </>
   );

src/app_modules/vote/main/layout.tsx

@@ -6,6 +6,7 @@ import {
   Center,
   Footer,
   Grid,
+  SimpleGrid,
   Stack,
   Text,
 } from "@mantine/core";
@@ -23,6 +24,10 @@ import { gs_vote_hotMenu } from "../global_state";
 import { useAtom } from "jotai";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 
 export default function LayoutVote_Main({
   children,
@@ -62,50 +67,75 @@ export default function LayoutVote_Main({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentVote_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Voting"
-            route={RouterHome.main_home}
+            routerLeft={RouterHome.main_home}
           />
         }
         footer={
-          <Footer
+          <SimpleGrid cols={4} h={"9vh"} mx={"xs"} >
-            height={"10vh"}
-            bg={"dark"}
-            sx={{ borderTop: "px solid blue" }}
-          >
-            <Stack h={"100%"} justify="center">
-              <Grid>
             {listFooter.map((e, i) => (
-                  <Grid.Col key={e.id} span={"auto"} pt={"md"}>
+              <Stack key={i} align="center" justify="center" spacing={0}>
-                    <Center
-                      onClick={() => {
-                        router.replace(e.path);
-                        setHotMenu(i);
-                      }}
-                    >
-                      <Stack align="center" spacing={0}>
                 <ActionIcon
+                  // disabled={e.path === "" ? true : false}
                   variant="transparent"
-                          c={hotMenu === i ? "blue" : "white"}
+                  c={hotMenu === e.id ? MainColor.yellow : "white"}
+                  onClick={() =>
+                    e.path === ""
+                      ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                      : (router.replace(e.path), setHotMenu(e.id))
+                  }
                 >
                   {e.icon}
                 </ActionIcon>
-                        <Text fz={10} c={hotMenu === i ? "blue" : "white"}>
+                <Text
+                  c={hotMenu === e.id ? MainColor.yellow : "white"}
+                  fz={"xs"}
+                  lineClamp={1}
+                >
                   {e.name}
                 </Text>
               </Stack>
-                    </Center>
-                  </Grid.Col>
             ))}
-              </Grid>
+          </SimpleGrid>
-            </Stack>
+          // <Footer
-          </Footer>
+          //   height={"10vh"}
+          //   bg={"dark"}
+          //   sx={{ borderTop: "px solid blue" }}
+          // >
+          //   <Stack h={"100%"} justify="center">
+          //     <Grid>
+          //       {listFooter.map((e, i) => (
+          //         <Grid.Col key={e.id} span={"auto"} pt={"md"}>
+          //           <Center
+          //             onClick={() => {
+          //               router.replace(e.path);
+          //               setHotMenu(i);
+          //             }}
+          //           >
+          //             <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>
+          //   </Stack>
+          // </Footer>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,32 +1,59 @@
 "use client";
 
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import ComponentVote_CardViewStatus from "../../component/card_view_status";
+import { Box, Center, Loader, Stack } from "@mantine/core";
-import { MODEL_VOTING } from "../../model/interface";
 import _ from "lodash";
-import { Box, Center, Stack, Text } from "@mantine/core";
+import ComponentVote_CardViewStatus from "../../component/card_view_status";
 import ComponentVote_IsEmptyData from "../../component/is_empty_data";
+import { MODEL_VOTING } from "../../model/interface";
+import { useState } from "react";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import { vote_getAllReview } from "../../fun/get/status/get_all_review";
+import { vote_getAllDraft } from "../../fun/get/status/get_all_draft";
 
 export default function Vote_StatusDraft({
   listDraft,
 }: {
   listDraft: MODEL_VOTING[];
 }) {
-  if (_.isEmpty(listDraft))
+  const [data, setData] = useState(listDraft);
-    return <ComponentVote_IsEmptyData text="Tidak ada data" />;
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      <Stack>
+      {_.isEmpty(data) ? (
-        {listDraft.map((e) => (
+        <ComponentGlobal_IsEmptyData />
-          <Box key={e.id}>
+      ) : (
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await vote_getAllDraft({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
               <ComponentVote_CardViewStatus
+                data={item}
                 path={RouterVote.detail_draft}
-              data={e}
               />
+            )}
+          </ScrollOnly>
         </Box>
-        ))}
+      )}
-      </Stack>
     </>
   );
 }

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

@@ -1,14 +1,16 @@
 "use client";
 
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 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_StatusPublish from "./publish";
 import Vote_StatusReject from "./reject";
+import Vote_StatusReview from "./review";
 
 export default function Vote_Status({
   listPublish,
@@ -21,7 +23,7 @@ export default function Vote_Status({
   listDraft: any[];
   listReject: any[];
 }) {
-  const router = useRouter();
+
   const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
   const listTabs = [
     {
@@ -49,12 +51,23 @@ export default function Vote_Status({
   return (
     <>
       <Tabs
-        color="blue"
+        mt={1}
         variant="pills"
         radius={"xl"}
         defaultValue={"Publish"}
         value={tabsStatus}
         onTabChange={setTabsStatus}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+          panel: {
+            paddingTop: 10,
+          },
+        }}
       >
         <Stack>
           <Tabs.List grow>
@@ -62,8 +75,17 @@ export default function Vote_Status({
               <Tabs.Tab
                 key={e.id}
                 value={e.value}
-                bg={tabsStatus === e.value ? "blue" : "gray.1"}
+                fw={"bold"}
-                fw={tabsStatus === e.value ? "bold" : "normal"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    tabsStatus === e.value ? MainColor.yellow : "white",
+                  border:
+                    tabsStatus === e.value
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
               >
                 {e.value}
               </Tabs.Tab>

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

@@ -1,54 +1,60 @@
 "use client";
 
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import {
+import { Box, Center, Loader, Stack } from "@mantine/core";
-  Avatar,
-  Badge,
-  Box,
-  Card,
-  Center,
-  Divider,
-  Grid,
-  Group,
-  Radio,
-  Skeleton,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import moment from "moment";
-import { useRouter } from "next/navigation";
-import { MODEL_VOTING } from "../../model/interface";
-import ComponentVote_IsEmptyData from "../../component/is_empty_data";
 import _ from "lodash";
+import { useRouter } from "next/navigation";
 import ComponentVote_CardViewPublish from "../../component/card_view_publish";
+import ComponentVote_IsEmptyData from "../../component/is_empty_data";
+import { MODEL_VOTING } from "../../model/interface";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentJob_CardStatus from "@/app_modules/job/component/card/card_view";
+import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
 
 export default function Vote_StatusPublish({
   listPublish,
 }: {
   listPublish: MODEL_VOTING[];
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(listPublish);
-
+  const [activePage, setActivePage] = useState(1);
-  if (_.isEmpty(listPublish))
-    return (
-      <>
-        <ComponentVote_IsEmptyData text="Tidak ada data" />
-      </>
-    );
 
   return (
     <>
-      <Stack>
+      {_.isEmpty(data) ? (
-        {listPublish.map((e) => (
+        <ComponentGlobal_IsEmptyData />
-          <Box key={e.id}>
+      ) : (
+        // --- Main component --- //
+        <ScrollOnly
+          height="75vh"
+          renderLoading={() => (
+            <Center mt={"lg"}>
+              <Loader color={"yellow"} />
+            </Center>
+          )}
+          data={data}
+          setData={setData}
+          moreData={async () => {
+            const loadData = await job_getAllStatusPublish({
+              page: activePage + 1,
+            });
+
+            setActivePage((val) => val + 1);
+
+            return loadData;
+          }}
+        >
+          {(item) => (
             <ComponentVote_CardViewPublish
-              data={e}
+              data={item}
               path={RouterVote.detail_publish}
             />
-          </Box>
+          )}
-        ))}
+        </ScrollOnly>
-      </Stack>
+      )}
     </>
   );
 }

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

@@ -1,32 +1,57 @@
 "use client";
 
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import ComponentVote_CardViewStatus from "../../component/card_view_status";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { MODEL_VOTING } from "../../model/interface";
+import { Box, Center, Loader } from "@mantine/core";
-import { Box, Stack } from "@mantine/core";
-import ComponentVote_IsEmptyData from "../../component/is_empty_data";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentVote_CardViewStatus from "../../component/card_view_status";
+import { vote_getAllReject } from "../../fun/get/status/get_all_reject";
+import { MODEL_VOTING } from "../../model/interface";
 
 export default function Vote_StatusReject({
   listReject,
 }: {
   listReject: MODEL_VOTING[];
 }) {
-  if (_.isEmpty(listReject))
+  const [data, setData] = useState(listReject);
-    return <ComponentVote_IsEmptyData text="Tidak ada data" />;
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      <Stack>
+      {_.isEmpty(data) ? (
-        {listReject.map((e) => (
+        <ComponentGlobal_IsEmptyData />
-          <Box key={e.id}>
+      ) : (
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await vote_getAllReject({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
               <ComponentVote_CardViewStatus
+                data={item}
                 path={RouterVote.detail_reject}
-              data={e}
               />
+            )}
+          </ScrollOnly>
         </Box>
-        ))}
+      )}
-      </Stack>
     </>
   );
 }

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

@@ -3,31 +3,58 @@
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
 import ComponentVote_CardViewStatus from "../../component/card_view_status";
 import { MODEL_VOTING } from "../../model/interface";
-import { Box, Center, Stack, Text } from "@mantine/core";
+import { Box, Center, Loader, Stack, Text } from "@mantine/core";
 import _ from "lodash";
 import ComponentVote_IsEmptyData from "../../component/is_empty_data";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentVote_CardViewPublish from "../../component/card_view_publish";
+import { vote_getAllReview } from "../../fun/get/status/get_all_review";
 
 export default function Vote_StatusReview({
   listReview,
 }: {
   listReview: MODEL_VOTING[];
 }) {
-  if (_.isEmpty(listReview))
+  const [data, setData] = useState(listReview);
-    return <ComponentVote_IsEmptyData text="Tidak ada data" />;
+  const [activePage, setActivePage] = useState(1);
-
 
   return (
     <>
-      <Stack>
+      {_.isEmpty(data) ? (
-        {listReview.map((e) => (
+        <ComponentGlobal_IsEmptyData />
-          <Box key={e.id}>
+      ) : (
+        // --- Main component --- //
+        <Box >
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await vote_getAllReview({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
               <ComponentVote_CardViewStatus
+                data={item}
                 path={RouterVote.detail_review}
-              data={e}
               />
+            )}
+          </ScrollOnly>
         </Box>
-        ))}
+      )}
-      </Stack>
     </>
   );
 }

src/app_modules/vote/splash/index.tsx

@@ -10,6 +10,8 @@ import {
   gs_vote_riwayat,
   gs_vote_status,
 } from "../global_state";
+import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
+import { IconPackageImport } from "@tabler/icons-react";
 
 export default function Vote_Splash() {
   const router = useRouter();
@@ -18,7 +20,7 @@ export default function Vote_Splash() {
   const [tabsRiwayat, setTabsRiwayat] = useAtom(gs_vote_riwayat);
   useShallowEffect(() => {
     setTimeout(() => {
-      setHotMenu(0);
+      setHotMenu(1);
       setTabsStatus("Publish");
       setTabsRiwayat("Semua");
       router.replace(RouterVote.beranda);
@@ -27,11 +29,12 @@ export default function Vote_Splash() {
 
   return (
     <>
-      <Center h={"100vh"}>
+      <UIGlobal_SplashScreen icon={<IconPackageImport size={300} />} />
+      {/* <Center h={"100vh"}>
         <Paper p={{ base: 50, md: 60, lg: 80 }}>
           <Image alt="logo" src={"/aset/vote/logo.png"} />
         </Paper>
-      </Center>
+      </Center> */}
     </>
   );
 }