#style:

Deskripsi:
- UI Voting: bagian kontribusi dan riwayat
## No issue

src/app/dev/vote/detail/kontribusi/[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]/page.tsx

@@ -1,10 +1,9 @@
-import prisma from "@/app/lib/prisma";
 import { Vote_MainDetail } from "@/app_modules/vote";
-import { Vote_getHasilVoteById } from "@/app_modules/vote/fun/get/get_list_hasil_by_id";
 import { Vote_cekKontributorById } from "@/app_modules/vote/fun/get/cek_kontributor_by_id";
+import { Vote_getHasilVoteById } from "@/app_modules/vote/fun/get/get_list_hasil_by_id";
+import { Vote_getListKontributorById } from "@/app_modules/vote/fun/get/get_list_kontributor_by_id";
 import { Vote_getOnebyId } from "@/app_modules/vote/fun/get/get_one_by_id";
 import { Vote_getOnePilihanVotingByUserId } from "@/app_modules/vote/fun/get/get_one_pilihan_voting_by_user_id";
-import { Vote_getListKontributorById } from "@/app_modules/vote/fun/get/get_list_kontributor_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const voteId = params.id;

src/app/dev/vote/detail/riwayat_saya/[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/semua_riwayat/[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/kontribusi/page.tsx

@@ -1,9 +1,8 @@
 import { Vote_Kontribusi } from "@/app_modules/vote";
-import { Vote_getAllListKontribusiByAuthorId } from "@/app_modules/vote/fun/get/get_list_kontribusi_by_author_id";
+import { vote_getAllListKontribusiByAuthorId } from "@/app_modules/vote/fun/get/get_list_kontribusi_by_author_id";
-
 
 export default async function Page() {
-  const dataKontribusi = await Vote_getAllListKontribusiByAuthorId()
+  const dataKontribusi = await vote_getAllListKontribusiByAuthorId({ page: 1 });
   return (
     <>
       <Vote_Kontribusi dataKontribusi={dataKontribusi as any} />

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

@@ -1,10 +1,10 @@
 import { Vote_Riwayat } from "@/app_modules/vote";
-import { Vote_getAllListRiwayat } from "@/app_modules/vote/fun/get/get_all_list_riwayat";
+import { vote_getAllListRiwayat } from "@/app_modules/vote/fun/get/get_all_list_riwayat";
-import { Vote_getAllListRiwayatSaya } from "@/app_modules/vote/fun/get/get_all_list_riwayat_saya";
+import { Vote_getAllListRiwayatSaya as vote_getAllListRiwayatSaya } from "@/app_modules/vote/fun/get/get_all_list_riwayat_saya";
 
 export default async function Page() {
-  const listRiwayat = await Vote_getAllListRiwayat();
+  const listRiwayat = await vote_getAllListRiwayat({ page: 1 });
-  const listRiwayatSaya = await Vote_getAllListRiwayatSaya()
+  const listRiwayatSaya = await vote_getAllListRiwayatSaya({ page: 1 });
 
   return (
     <>

src/app_modules/home/component/ui_home.tsx

@@ -274,11 +274,11 @@ export function Home_UiFooter({ dataUser }: { dataUser: MODEL_USER }) {
         }}
         w={"100%"}
         bottom={0}
-        h={"10vh"}
+        h={"9vh"}
       >
         <SimpleGrid cols={4}>
           {listHalamanFooter.map((e, i) => (
-            <Center h={"10vh"} key={e.id}>
+            <Center h={"9vh"} key={e.id}>
               <Stack align="center" spacing={0}>
                 <ActionIcon
                   radius={"xl"}
@@ -310,7 +310,7 @@ export function Home_UiFooter({ dataUser }: { dataUser: MODEL_USER }) {
             </Center>
           ))}
 
-          <Center h={"10vh"}>
+          <Center h={"9vh"}>
             <Stack
               align="center"
               spacing={2}

src/app_modules/vote/component/card_view_publish.tsx

@@ -43,7 +43,7 @@ export default function ComponentVote_CardViewPublish({
         radius={"md"}
         px={30}
         pt={authorName ? 30 : 10}
-        pb={authorName ? 100 : 30}
+        pb={30}
         mb={"lg"}
         style={{
           backgroundColor: AccentColor.darkblue,
@@ -114,43 +114,21 @@ export default function ComponentVote_CardViewPublish({
               <Stack>
                 {data?.Voting_DaftarNamaVote.map((v, i) => (
                   <Stack key={v.id} spacing={0}>
-                    <Text>{v.value}</Text>
+                    <Group position="apart">
-                    <Progress radius={"xl"} value={v.jumlah} color="yellow" />
+                      <Text>{v.value}</Text>
+                      <Text>{v.jumlah}</Text>
+                    </Group>
+                    <Progress
+                      size={"xl"}
+                      radius={"xl"}
+                      value={v.jumlah}
+                      color="yellow"
+                    />
                   </Stack>
-                  // <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>
                 ))}
               </Stack>
             ) : (
-              <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>
           {pilihanSaya ? (

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

@@ -26,7 +26,7 @@ export default function Vote_DetailKontribusi({
 }) {
   return (
     <>
-      <Stack>
+      <Stack py={"md"}>
         <ComponentVote_DetailDataSetelahPublish
           data={dataVote}
           authorName={true}

src/app_modules/vote/detail/kontribusi/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_DetailKontribusi({
   children,
@@ -12,11 +14,11 @@ export default function LayoutVote_DetailKontribusi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentVote_HeaderTamplate title="Detail Kontribusi" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Kontribusi" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -48,7 +48,7 @@ export default function Vote_MainDetail({
   const [data, setData] = useState(dataVote);
   return (
     <>
-      <Stack>
+      <Stack py={"md"}>
         <TampilanDataVoting
           dataVote={data}
           setData={setData}

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

@@ -27,7 +27,7 @@ export default function Vote_DetailPublish({
 }) {
   return (
     <>
-      <Stack>
+      <Stack py={"md"}>
         {/* <ComponentVote_DetailStatus /> */}
         <ComponentVote_DetailDataSetelahPublish data={dataVote} />
         <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />

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

@@ -1,29 +1,22 @@
 "use client";
 
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 import {
   Button,
-  Group,
-  Modal,
   SimpleGrid,
-  Stack,
+  Stack
-  Text,
-  Title,
 } from "@mantine/core";
-import ComponentVote_DetailDataSebelumPublish from "../../component/detail/detail_data_sebelum_publish";
-import { useRouter } from "next/navigation";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { useAtom } from "jotai";
-import { gs_vote_status } from "../../global_state";
+import { useRouter } from "next/navigation";
-import { useDisclosure } from "@mantine/hooks";
-import { MODEL_VOTING } from "../../model/interface";
-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 ComponentVote_DetailDataSebelumPublish from "../../component/detail/detail_data_sebelum_publish";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { Vote_funDeleteById } from "../../fun/delete/fun_delete_by_id";
+import { Vote_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_id";
+import { gs_vote_status } from "../../global_state";
+import { MODEL_VOTING } from "../../model/interface";
 
 export default function Vote_DetailReject({
   dataVote,

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

@@ -15,7 +15,7 @@ export default function Vote_DetailRiwayatSaya({
 }) {
   return (
     <>
-      <Stack>
+      <Stack py={"md"}>
         <ComponentVote_DetailDataSetelahPublish
           data={dataVote}
           authorName={true}

src/app_modules/vote/detail/riwayat_saya/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_DetailRiwayatSaya({
   children,
@@ -12,11 +11,11 @@ export default function LayoutVote_DetailRiwayatSaya({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentVote_HeaderTamplate title="Detail Riwayat" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -12,17 +12,19 @@ export default function Vote_DetailSemuaRiwayat({
   listKontributor,
 }: {
   dataVote: MODEL_VOTING;
-  listKontributor:MODEL_VOTE_KONTRIBUTOR[]
+  listKontributor: MODEL_VOTE_KONTRIBUTOR[];
 }) {
   return (
     <>
-      <Stack>
+      <Stack py={"md"}>
         <ComponentVote_DetailDataSetelahPublish
           data={dataVote}
           authorName={true}
         />
         <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />
-        <ComponentVote_DaftarKontributorVoter listKontributor={listKontributor} />
+        <ComponentVote_DaftarKontributorVoter
+          listKontributor={listKontributor}
+        />
       </Stack>
     </>
   );

src/app_modules/vote/detail/semua_riwayat/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_DetailSemuaRiwayat({
   children,
@@ -12,11 +11,11 @@ export default function LayoutVote_DetailSemuaRiwayat({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentVote_HeaderTamplate title="Detail Riwayat" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -2,45 +2,51 @@
 
 import prisma from "@/app/lib/prisma"
 
-export async function Vote_getAllListRiwayat() {
+export async function vote_getAllListRiwayat({ page }: { page: number }) {
-    const data = await prisma.voting.findMany({
+  const takeData = 5;
-      orderBy: {
+  const skipData = page * takeData - takeData;
-        createdAt: "asc",
-      },
-      where: {
-        voting_StatusId: "1",
-        isActive: true,
-        akhirVote: {
-          lte: 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",
-          },
-        },
-        Author: {
-          select: {
-            id: true,
-            username: true,
-            nomor: true,
-            Profile: true,
-          },
-        },
-      },
-    });
 
-    return data
+  const data = await prisma.voting.findMany({
+    take: takeData,
+    skip: skipData,
+    
+    orderBy: {
+      createdAt: "asc",
+    },
+    where: {
+      voting_StatusId: "1",
+      isActive: true,
+      akhirVote: {
+        lte: 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",
+        },
+      },
+      Author: {
+        select: {
+          id: true,
+          username: true,
+          nomor: true,
+          Profile: true,
+        },
+      },
+    },
+  });
+
+  return data;
 }

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

@@ -3,9 +3,16 @@
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import prisma from "@/app/lib/prisma";
 
-export async function Vote_getAllListRiwayatSaya() {
+export async function Vote_getAllListRiwayatSaya({ 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: {
       createdAt: "asc",
     },

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

@@ -3,9 +3,18 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export async function Vote_getAllListKontribusiByAuthorId() {
+export async function vote_getAllListKontribusiByAuthorId({
+  page,
+}: {
+  page: number;
+}) {
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
   const authorId = await user_getOneUserId();
   const data = await prisma.voting_Kontributor.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "asc",
     },

src/app_modules/vote/main/beranda.tsx

@@ -53,7 +53,7 @@ export default function Vote_Beranda({
       ) : (
         // --- Main component --- //
         <ScrollOnly
-          height="85vh"
+          height="82vh"
           renderLoading={() => (
             <Center mt={"lg"}>
               <Loader color={"yellow"} />

src/app_modules/vote/main/kontribusi.tsx

@@ -1,51 +1,62 @@
 "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,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import moment from "moment";
-import { useRouter } from "next/navigation";
-import ComponentVote_CardViewPublish from "../component/card_view_publish";
-import { MODEL_VOTE_KONTRIBUTOR } from "../model/interface";
 import _ from "lodash";
+import ComponentVote_CardViewPublish from "../component/card_view_publish";
 import ComponentVote_IsEmptyData from "../component/is_empty_data";
+import { MODEL_VOTE_KONTRIBUTOR } from "../model/interface";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { data } from "autoprefixer";
+import { ScrollOnly } from "next-scroll-loader";
+import { vote_getAllListPublish } from "../fun/get/get_all_list_publish";
+import { useState } from "react";
+import { vote_getAllListKontribusiByAuthorId } from "../fun/get/get_list_kontribusi_by_author_id";
 
 export default function Vote_Kontribusi({
   dataKontribusi,
 }: {
   dataKontribusi: MODEL_VOTE_KONTRIBUTOR[];
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(dataKontribusi);
+  const [activePage, setActivePage] = useState(1);
+
   return (
     <>
       {_.isEmpty(dataKontribusi) ? (
-        <ComponentVote_IsEmptyData text="Tidak ada data" />
+        <ComponentGlobal_IsEmptyData />
       ) : (
-        <Stack>
+        <Box >
-          {dataKontribusi.map((e, i) => (
+          <ScrollOnly
-            <Box key={i}>
+            height="82vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await vote_getAllListKontribusiByAuthorId({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
               <ComponentVote_CardViewPublish
                 path={RouterVote.detail_kontribusi}
                 pilihanSaya={true}
-                data={e.Voting}
+                data={item.Voting}
                 authorName={true}
-                namaPilihan={e.Voting_DaftarNamaVote.value}
+                namaPilihan={item.Voting_DaftarNamaVote.value}
               />
-            </Box>
+            )}
-          ))}
+          </ScrollOnly>
-        </Stack>
+        </Box>
       )}
       {/* <pre>{JSON.stringify(dataKontribusi, null, 2)}</pre> */}
     </>

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

@@ -7,13 +7,14 @@ import Vote_RiwayatSaya from "./saya";
 import { useAtom } from "jotai";
 import { gs_vote_riwayat } from "../../global_state";
 import { MODEL_VOTING } from "../../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Vote_Riwayat({
   listRiwayat,
   listRiwayatSaya,
 }: {
   listRiwayat: MODEL_VOTING[];
-  listRiwayatSaya: MODEL_VOTING[]
+  listRiwayatSaya: MODEL_VOTING[];
 }) {
   const [tabsRiwayat, setTabsRiwayat] = useAtom(gs_vote_riwayat);
   const listTabs = [
@@ -34,12 +35,23 @@ export default function Vote_Riwayat({
   return (
     <>
       <Tabs
+        mt={1}
         variant="pills"
         radius={"xl"}
-        color="blue"
         defaultValue={"Semua"}
         value={tabsRiwayat}
         onTabChange={setTabsRiwayat}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+          panel: {
+            paddingTop: 10,
+          },
+        }}
       >
         <Stack>
           <Tabs.List grow>
@@ -47,8 +59,17 @@ export default function Vote_Riwayat({
               <Tabs.Tab
                 key={i}
                 value={e.value}
-                bg={tabsRiwayat === e.value ? "blue" : "gray.1"}
+                fw={"bold"}
-                fw={tabsRiwayat === e.value ? "bold" : "normal"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    tabsRiwayat === e.value ? MainColor.yellow : "white",
+                  border:
+                    tabsRiwayat === e.value
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
               >
                 {e.label}
               </Tabs.Tab>

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

@@ -1,49 +1,59 @@
 "use client";
 
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import {
+import { Box, Center, Loader, Stack } from "@mantine/core";
-  Stack,
+import _ from "lodash";
-  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";
-import { MODEL_VOTING } from "../../model/interface";
-import _ from "lodash";
 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_getAllListRiwayatSaya } from "../../fun/get/get_all_list_riwayat_saya";
 
 export default function Vote_RiwayatSaya({
   listRiwayatSaya,
 }: {
   listRiwayatSaya: MODEL_VOTING[];
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(listRiwayatSaya);
+  const [activePage, setActivePage] = useState(1);
+
   return (
     <>
-    {_.isEmpty(listRiwayatSaya) ? (
+      {_.isEmpty(data) ? (
-        <ComponentVote_IsEmptyData text="Tidak ada data"/>
+        <ComponentGlobal_IsEmptyData />
       ) : (
-      <Stack>
+        // --- Main component --- //
-        {listRiwayatSaya.map((e, i) => (
+        <Box>
-          <Box key={i}>
+          <ScrollOnly
-            <ComponentVote_CardViewPublish
+            height="75vh"
-              path={RouterVote.detail_riwayat_saya}
+            renderLoading={() => (
-              data={e}
+              <Center mt={"lg"}>
-              authorName={true}
+                <Loader color={"yellow"} />
-            />
+              </Center>
-          </Box>
+            )}
-        ))}
+            data={data}
-      </Stack>
+            setData={setData}
+            moreData={async () => {
+              const loadData = await Vote_getAllListRiwayatSaya({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentVote_CardViewPublish
+                path={RouterVote.detail_riwayat_saya}
+                data={item}
+                authorName={true}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
       )}
     </>
   );

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

@@ -1,49 +1,57 @@
 "use client";
 
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import {
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-  Stack,
+import { Box, Center, Loader } from "@mantine/core";
-  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";
-import { MODEL_VOTING } from "../../model/interface";
 import _ from "lodash";
-import ComponentVote_IsEmptyData from "../../component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentVote_CardViewPublish from "../../component/card_view_publish";
+import { vote_getAllListRiwayat } from "../../fun/get/get_all_list_riwayat";
+import { MODEL_VOTING } from "../../model/interface";
 
 export default function Vote_SemuaRiwayat({
   listRiwayat,
 }: {
   listRiwayat: MODEL_VOTING[];
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(listRiwayat);
+  const [activePage, setActivePage] = useState(1);
+
   return (
     <>
-      {_.isEmpty(listRiwayat) ? (
+      {_.isEmpty(data) ? (
-        <ComponentVote_IsEmptyData text="Tidak ada data" />
+        <ComponentGlobal_IsEmptyData />
       ) : (
-        <Stack>
+        // --- Main component --- //
-          {listRiwayat.map((e, i) => (
+        <Box>
-            <Box key={i}>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await vote_getAllListRiwayat({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
               <ComponentVote_CardViewPublish
                 path={RouterVote.detail_semua_riwayat}
-                data={e}
+                data={item}
                 authorName={true}
               />
-            </Box>
+            )}
-          ))}
+          </ScrollOnly>
-        </Stack>
+        </Box>
       )}
     </>
   );

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

@@ -1,18 +1,14 @@
 "use client";
 
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import { Box, Center, Loader, Stack } from "@mantine/core";
-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 { Center, Loader } from "@mantine/core";
+import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
+import ComponentVote_CardViewPublish from "../../component/card_view_publish";
+import { MODEL_VOTING } from "../../model/interface";
 
 export default function Vote_StatusPublish({
   listPublish,