#style:

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

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 {
-  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 { Box, Center, Loader, Stack } from "@mantine/core";
 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>
-          {dataKontribusi.map((e, i) => (
-            <Box key={i}>
+        <Box >
+          <ScrollOnly
+            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>
-          ))}
-        </Stack>
+            )}
+          </ScrollOnly>
+        </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={tabsRiwayat === e.value ? "bold" : "normal"}
+                fw={"bold"}
+                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 {
-  Stack,
-  Card,
-  Grid,
-  Avatar,
-  Divider,
-  Title,
-  Badge,
-  Group,
-  Radio,
-  Center,
-  Text,
-  Box,
-} from "@mantine/core";
-import moment from "moment";
+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 { 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) ? (
-        <ComponentVote_IsEmptyData text="Tidak ada data"/>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
       ) : (
-      <Stack>
-        {listRiwayatSaya.map((e, i) => (
-          <Box key={i}>
-            <ComponentVote_CardViewPublish
-              path={RouterVote.detail_riwayat_saya}
-              data={e}
-              authorName={true}
-            />
-          </Box>
-        ))}
-      </Stack>
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            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 {
-  Stack,
-  Card,
-  Grid,
-  Avatar,
-  Divider,
-  Title,
-  Badge,
-  Group,
-  Radio,
-  Center,
-  Text,
-  Box,
-} from "@mantine/core";
-import moment from "moment";
-import { useRouter } from "next/navigation";
-import ComponentVote_CardViewPublish from "../../component/card_view_publish";
-import { MODEL_VOTING } from "../../model/interface";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { Box, Center, Loader } from "@mantine/core";
 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) ? (
-        <ComponentVote_IsEmptyData text="Tidak ada data" />
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
       ) : (
-        <Stack>
-          {listRiwayat.map((e, i) => (
-            <Box key={i}>
+        // --- Main component --- //
+        <Box>
+          <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>
-          ))}
-        </Stack>
+            )}
+          </ScrollOnly>
+        </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,