Merge pull request #222 from bipproduction/fix/bug/colab

Intergarasi server action to API collaboration

src/app/api/auth/login/route.ts

@@ -1,5 +1,6 @@
 import { prisma } from "@/app/lib";
 import { randomOTP } from "@/app_modules/auth/fun/rondom_otp";
+import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
 export async function POST(req: Request) {
@@ -17,12 +18,13 @@ export async function POST(req: Request) {
       );
 
       const sendWa = await res.json();
+
       if (sendWa.status !== "success")
         return NextResponse.json(
           { success: false, message: "Nomor Whatsapp Tidak Aktif" },
           { status: 400 }
         );
-        
+
       const createOtpId = await prisma.kodeOtp.create({
         data: {
           nomor: nomor,
@@ -45,14 +47,14 @@ export async function POST(req: Request) {
         { status: 200 }
       );
     } catch (error) {
-      console.log(error);
+      backendLogger.log("Error Login", error);
-
       return NextResponse.json(
-        { success: false, message: "Server Whatsapp Error !! " },
+        { success: false, message: error as Error },
         { status: 500 }
       );
     }
   }
+
   return NextResponse.json(
     { success: false, message: "Method Not Allowed" },
     { status: 405 }

src/app/api/auth/register/route.ts

@@ -1,5 +1,6 @@
 import { sessionCreate } from "@/app/auth/_lib/session_create";
 import prisma from "@/app/lib/prisma";
+import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
 export async function POST(req: Request) {
@@ -38,7 +39,15 @@ export async function POST(req: Request) {
         { status: 200 }
       );
     } catch (error) {
-      console.log(error);
+      backendLogger.log("Error registrasi:", error);
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Server Error",
+          reason: (error as Error).message,
+        },
+        { status: 500 }
+      );
     }
   }
 

src/app/api/auth/validasi/route.ts

@@ -1,5 +1,6 @@
 import { sessionCreate } from "@/app/auth/_lib/session_create";
 import prisma from "@/app/lib/prisma";
+import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
 export async function POST(req: Request) {
@@ -42,7 +43,15 @@ export async function POST(req: Request) {
         { status: 200 }
       );
     } catch (error) {
-      console.log(error);
+      backendLogger.log("Error Validasi:", error);
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Server Error",
+          reason: (error as Error).message,
+        },
+        { status: 500 }
+      );
     }
   }
   return NextResponse.json(

src/app/api/collaboration/[id]/route.ts

@@ -0,0 +1,61 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  request: Request,
+  context: { params: { id: string } }
+) {
+  try {
+    let fixData;
+    const { id } = context.params;
+
+    // Buatkan api untuk list partisipasi
+
+    fixData = await prisma.projectCollaboration.findFirst({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        isActive: true,
+        title: true,
+        lokasi: true,
+        purpose: true,
+        benefit: true,
+        createdAt: true,
+        // jumlah_partisipan: true,
+        Author: {
+          select: {
+            id: true,
+            Profile: true,
+          },
+        },
+        ProjectCollaborationMaster_Industri: true,
+        ProjectCollaboration_Partisipasi: {
+          where: {
+            isActive: true,
+          },
+        },
+      },
+    });
+
+    return NextResponse.json(
+      { success: true, message: "Berhasil mendapatkan data", data: fixData },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get collaboration by id", error);
+
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/collaboration/get/route.ts

@@ -0,0 +1,176 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  try {
+    let fixData;
+
+    const { searchParams } = new URL(request.url);
+    const kategori = searchParams.get("kategori");
+    const page = searchParams.get("page");
+
+    const takeData = 5;
+    const skipData = page ? Number(page) * takeData - takeData : 0;
+
+    const userLoginId = await funGetUserIdByToken();
+
+    if (userLoginId == null) {
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Gagal mendapatkan data, user id tidak ada",
+        },
+        { status: 500 }
+      );
+    }
+
+    if (kategori == "beranda") {
+      fixData = await prisma.projectCollaboration.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          projectCollaborationMaster_StatusId: 1,
+          isActive: true,
+        },
+        select: {
+          id: true,
+          isActive: true,
+          title: true,
+          lokasi: true,
+          purpose: true,
+          benefit: true,
+          Author: {
+            select: {
+              id: true,
+              Profile: true,
+            },
+          },
+          ProjectCollaborationMaster_Industri: true,
+          ProjectCollaboration_Partisipasi: {
+            where: {
+              isActive: true,
+            },
+          },
+        },
+      });
+    } else if (kategori == "partisipasi") {
+      fixData = await prisma.projectCollaboration_Partisipasi.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          userId: userLoginId,
+          isActive: true,
+          AND: {
+            ProjectCollaboration: {
+              isActive: true,
+            },
+          },
+        },
+        select: {
+          id: true,
+          isActive: true,
+          ProjectCollaboration: {
+            select: {
+              id: true,
+              isActive: true,
+              title: true,
+              lokasi: true,
+              purpose: true,
+              benefit: true,
+              Author: {
+                select: {
+                  id: true,
+                  Profile: true,
+                },
+              },
+              ProjectCollaborationMaster_Industri: true,
+              ProjectCollaboration_Partisipasi: {
+                where: {
+                  isActive: true,
+                },
+              },
+            },
+          },
+        },
+      });
+    } else if (kategori == "proyeksaya") {
+      fixData = await prisma.projectCollaboration.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: { createdAt: "desc" },
+        where: { userId: userLoginId, isActive: true },
+        select: {
+          id: true,
+          isActive: true,
+          title: true,
+          lokasi: true,
+          purpose: true,
+          benefit: true,
+          // jumlah_partisipan: true,
+          Author: {
+            select: {
+              id: true,
+              Profile: true,
+            },
+          },
+          ProjectCollaborationMaster_Industri: true,
+          ProjectCollaboration_Partisipasi: {
+            where: {
+              isActive: true,
+            },
+          },
+        },
+      });
+    } else if (kategori == "grup") {
+      fixData = await prisma.projectCollaboration_AnggotaRoomChat.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          userId: userLoginId as string,
+        },
+        select: {
+          ProjectCollaboration_RoomChat: {
+            select: {
+              id: true,
+              name: true,
+              isActive: true,
+              ProjectCollaboration_AnggotaRoomChat: {
+                select: {
+                  User: true,
+                },
+              },
+            },
+          },
+        },
+      });
+    }
+
+    return NextResponse.json(
+      { success: true, message: "Berhasil mendapatkan data", data: fixData },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get collaboration: ", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/colab/detail/main_detail/[id]/page.tsx

@@ -15,7 +15,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   return (
     <>
       <Colab_MainDetail
-        dataColab={dataColab as any}
+        dataColab={{} as any}
         userLoginId={userLoginId as string}
         listPartisipan={listPartisipan as any}
         cekPartisipan={cekPartisipan}

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

@@ -1,14 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Colab_Beranda } from "@/app_modules/colab";
-import colab_getListAllProyek from "@/app_modules/colab/fun/get/get_list_all_proyek";
 
 export default async function Page() {
-  const listData = await colab_getListAllProyek({ page: 1 });
   const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      <Colab_Beranda listData={listData as any} userLoginId={userLoginId as string} />
+      <Colab_Beranda userLoginId={userLoginId as string} />
     </>
   );
 }

src/app/dev/colab/main/grup/page.tsx

@@ -1,12 +1,10 @@
-import colab_getListRoomChatByAuthorId from "@/app_modules/colab/fun/get/room_chat/get_list_room_by_author_id";
 import Colab_GrupDiskus from "@/app_modules/colab/main/grup";
 
 export default async function Page() {
-  const listRoom = await colab_getListRoomChatByAuthorId({page: 1});
+  // const listRoom = await colab_getListRoomChatByAuthorId({page: 1});
-
   return (
     <>
-      <Colab_GrupDiskus listRoom={listRoom as any} />
+      <Colab_GrupDiskus />
     </>
   );
 }

src/app/dev/colab/main/proyek/page.tsx

@@ -1,17 +1,12 @@
 import { Colab_Proyek } from "@/app_modules/colab";
-import colab_getListPartisipasiProyekByAuthorId from "@/app_modules/colab/fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
-import colab_getListAllProyekSayaByAuthorId from "@/app_modules/colab/fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
 
 export default async function Page() {
-  const listPartisipasiProyek  = await colab_getListPartisipasiProyekByAuthorId({page: 1})
+  // const listPartisipasiProyek  = await colab_getListPartisipasiProyekByAuthorId({page: 1})
-  const listProyekSaya = await colab_getListAllProyekSayaByAuthorId({page: 1})
+  // const listProyekSaya = await colab_getListAllProyekSayaByAuthorId({page: 1})
 
   return (
     <>
-      <Colab_Proyek
+      <Colab_Proyek />
-        listPartisipasiUser={listPartisipasiProyek as any}
-        listProyekSaya={listProyekSaya as any}
-      />
     </>
   );
 }

src/app/dev/vote/detail/kontribusi/[id]/page.tsx

@@ -1,13 +1,9 @@
 import { Vote_DetailKontribusi } from "@/app_modules/vote";
-import { voting_funGetOneVotingbyId } from "@/app_modules/vote/fun/get/fun_get_one_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let voteId = params.id;
-  const dataVote = await voting_funGetOneVotingbyId(voteId);
 
+export default async function Page() {
   return (
     <>
-      <Vote_DetailKontribusi dataVote={dataVote as any} />
+      <Vote_DetailKontribusi />
     </>
   );
 }

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

@@ -2,7 +2,6 @@ import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Vote_MainDetail } from "@/app_modules/vote";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const voteId = params.id;
   const userLoginId = await funGetUserIdByToken();
   return (
     <>

src/app/dev/vote/detail/semua_riwayat/[id]/page.tsx

@@ -1,19 +1,9 @@
 import { Vote_DetailSemuaRiwayat } from "@/app_modules/vote";
-import { Vote_getListKontributorById } from "@/app_modules/vote/fun/get/get_list_kontributor_by_id";
-import { Vote_getOnePublishbyId } from "@/app_modules/vote/fun/get/get_one_publish_by_id";
-
-
-export default async function Page({params}: {params: {id: string}}) {
-  let voteId = params.id
-  const dataVote = await Vote_getOnePublishbyId(voteId)
-  const listKontributor = await Vote_getListKontributorById(voteId)
 
+export default async function Page() {
   return (
     <>
-      <Vote_DetailSemuaRiwayat
+      <Vote_DetailSemuaRiwayat />
-        dataVote={dataVote as any}
-        listKontributor={listKontributor as any}
-      />
     </>
   );
 }

src/app/zCoba/skeleton/page.tsx

@@ -23,10 +23,36 @@ export default function Voting_ComponentSkeletonViewPuh() {
                 <Grid.Col span={3}>
                   <Skeleton height={20} w={150} />
                 </Grid.Col>
-                <Grid.Col span={3} offset={3}>
+                {/* <Grid.Col span={3} offset={3}>
                   <Skeleton height={20} w={150} />
+                </Grid.Col> */}
+              </Grid>
+              <Center>
+                <Skeleton height={15} w={200} />
+              </Center>
+
+              <Grid align="center" gutter={"md"}>
+                <Grid.Col span={"content"}>
+                  <Skeleton h={15} w={70} />
+                </Grid.Col>
+                <Grid.Col span={3}>
+                  <Skeleton height={15} w={200} />
                 </Grid.Col>
               </Grid>
+
+              <Grid align="center" gutter={"md"}>
+                <Grid.Col span={"content"}>
+                  <Skeleton h={15} w={70} />
+                </Grid.Col>
+                <Grid.Col span={3}>
+                  <Skeleton height={15} w={200} />
+                </Grid.Col>
+              </Grid>
+
+              <Skeleton height={15} w={100} />
+              <Skeleton height={15} w={"100%"} />
+              <Skeleton height={15} w={100} />
+              <Skeleton height={15} w={"100%"} />
             </Stack>
           </ComponentGlobal_CardStyles>
 

src/app_modules/auth/login/view.tsx

@@ -11,6 +11,7 @@ import {
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
 import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
+import { clientLogger } from "@/util/clientLogger";
 import { Box, Button, Center, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -27,8 +28,8 @@ export default function Login({ version }: { version: string }) {
     const nomor = phone.substring(1);
     if (nomor.length <= 4) return setError(true);
 
-    setLoading(true);
     try {
+      setLoading(true);
       const res = await fetch("/api/auth/login", {
         method: "POST",
         body: JSON.stringify({ nomor: nomor }),
@@ -38,6 +39,12 @@ export default function Login({ version }: { version: string }) {
       });
 
       const result = await res.json();
+
+      if (res.status == 500) {
+        ComponentGlobal_NotifikasiGagal("Server Error");
+        return;
+      }
+
       if (res.status === 200) {
         localStorage.setItem("hipmi_auth_code_id", result.kodeId);
         ComponentGlobal_NotifikasiBerhasil(result.message, 2000);
@@ -46,8 +53,10 @@ export default function Login({ version }: { version: string }) {
         ComponentGlobal_NotifikasiPeringatan(result.message);
       }
     } catch (error) {
-      console.error(error);
+      clientLogger.error("Error login:", error);
       ComponentGlobal_NotifikasiGagal("Terjadi Kesalahan");
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -56,22 +65,18 @@ export default function Login({ version }: { version: string }) {
       <UIGlobal_LayoutDefault>
         <Stack align="center" justify="center" h={"100vh"} spacing={100}>
           <Stack align="center" spacing={0}>
-            <Title order={3} c={MainColor.yellow} >
+            <Title order={3} c={MainColor.yellow}>
               WELCOME TO
             </Title>
-            <Title c={MainColor.yellow} >
+            <Title c={MainColor.yellow}>HIPMI APPS</Title>
-              HIPMI APPS
-            </Title>
           </Stack>
 
           <Stack w={300}>
             <Center>
-              <Text c={MainColor.white} >
+              <Text c={MainColor.white}>Nomor telepon</Text>
-                Nomor telepon
-              </Text>
             </Center>
             <PhoneInput
-              inputStyle={{ width: "100%" }}             
+              inputStyle={{ width: "100%" }}
               defaultCountry="id"
               onChange={(val) => {
                 setPhone(val);

src/app_modules/auth/register/view.tsx

@@ -78,6 +78,16 @@ export default function Register() {
         ComponentGlobal_NotifikasiPeringatan(result.message);
         return;
       }
+
+      if (res.status === 405) {
+        ComponentGlobal_NotifikasiPeringatan(result.message);
+        return;
+      }
+
+      if (res.status === 500) {
+        ComponentGlobal_NotifikasiPeringatan(result.message);
+        return;
+      }
     } catch (error) {
       console.log(error);
     } finally {

src/app_modules/auth/validasi/view.tsx

@@ -25,6 +25,7 @@ import { useEffect, useState } from "react";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global";
 import { auth_funDeleteAktivasiKodeOtpByNomor } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 import Validasi_SkeletonView from "./skeleton";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Validasi() {
   const router = useRouter();
@@ -123,8 +124,13 @@ export default function Validasi() {
         ComponentGlobal_NotifikasiPeringatan(result.message);
         return;
       }
+
+      if (res.status == 500) {
+        ComponentGlobal_NotifikasiGagal(result.message);
+        return;
+      }
     } catch (error) {
-      console.error(error);
+      clientLogger.error("Error validasi:", error);
     } finally {
       setLoading(false);
     }
@@ -207,14 +213,13 @@ export default function Validasi() {
                   </Text>
                 </Stack>
                 <Center>
-                    <PinInput
+                  <PinInput
-                      
                     size="xl"
                     type={"number"}
                     ref={focusTrapRef}
                     spacing={"md"}
-                      mt={"md"}
+                    mt={"md"}
-                      styles={{ input: { backgroundColor: MainColor.white } }}
+                    styles={{ input: { backgroundColor: MainColor.white } }}
                     onChange={(val) => {
                       setInputOtp(val);
                     }}

src/app_modules/colab/_lib/api_collaboration.ts

@@ -0,0 +1,17 @@
+export const apiGetAllCollaboration = async ({
+  kategori,
+  page,
+}: {
+  kategori: "beranda" | "partisipasi" | "proyeksaya" | "grup";
+  page: string;
+}) => {
+  const respone = await fetch(
+    `/api/collaboration/get?kategori=${kategori}&page=${page}`
+  );
+  return await respone.json().catch(() => null);
+};
+
+export const apiGetOneCollaborationById = async ({ id }: { id: string }) => {
+  const respone = await fetch(`/api/collaboration/${id}`);
+  return await respone.json().catch(() => null);
+};

src/app_modules/colab/component/card_view/card_section_data.tsx

@@ -40,15 +40,15 @@ export default function ComponentColab_CardSectionData({
         <Stack spacing={"xs"}>
           <Grid>
             <Grid.Col span={2}>
-              <Text fw={"bold"} fz={"xs"}>
+              <Text fw={"bold"} >
                 Industri
               </Text>
             </Grid.Col>
             <Grid.Col span={1}>
-              <Text fz={"xs"}>:</Text>
+              <Text >:</Text>
             </Grid.Col>
             <Grid.Col span={"auto"}>
-              <Text fz={"xs"} lineClamp={1}>
+              <Text  lineClamp={1}>
                 {data?.ProjectCollaborationMaster_Industri.name
                   ? data?.ProjectCollaborationMaster_Industri?.name
                   : "Industri"}
@@ -58,25 +58,25 @@ export default function ComponentColab_CardSectionData({
 
           <Grid>
             <Grid.Col span={2}>
-              <Text fw={"bold"} fz={"xs"}>
+              <Text fw={"bold"} >
                 Lokasi
               </Text>
             </Grid.Col>
             <Grid.Col span={1}>
-              <Text fz={"xs"}>:</Text>
+              <Text >:</Text>
             </Grid.Col>
             <Grid.Col span={"auto"}>
-              <Text fz={"xs"} lineClamp={1}>
+              <Text  lineClamp={1}>
                 {data?.lokasi ? data?.lokasi : "Lokasi dari proyek"}
               </Text>
             </Grid.Col>
           </Grid>
 
           <Stack spacing={5}>
-            <Text fw={"bold"} fz={"xs"}>
+            <Text fw={"bold"} >
               Tujuan proyek
             </Text>
-            <Text lineClamp={3} fz={"xs"}>
+            <Text lineClamp={2} >
               {data?.purpose
                 ? data?.purpose
                 : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odio nihil in animi expedita, suscipit excepturi pariatur totam esse officiis enim cumque. Quidem, facere aliquam. Sunt laboriosam incidunt iste amet"}

src/app_modules/colab/component/detail/list_partisipasi_user.tsx

@@ -30,6 +30,7 @@ import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
 import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";
 import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
 import mqtt_client from "@/util/mqtt_client";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
 export default function ComponentColab_DetailListPartisipasiUser({
   listPartisipan,
@@ -49,6 +50,8 @@ export default function ComponentColab_DetailListPartisipasiUser({
   const [opened, { open, close }] = useDisclosure(false);
   const [deskripsi, setDeskripsi] = useState("");
 
+  
+
   async function onJoin() {
     const res = await colab_funCreatePartisipan(
       colabId as any,
@@ -118,7 +121,6 @@ export default function ComponentColab_DetailListPartisipasiUser({
           },
         }}
       >
-        
         <Stack spacing={"xs"}>
           <Group position="right">
             <ActionIcon onClick={close} variant="transparent">
@@ -127,7 +129,11 @@ export default function ComponentColab_DetailListPartisipasiUser({
           </Group>
           <Textarea
             maxLength={300}
-            label={<Text c={"white"} mb={"sm"} fw={"bold"}>Deskripsi Diri</Text>}
+            label={
+              <Text c={"white"} mb={"sm"} fw={"bold"}>
+                Deskripsi Diri
+              </Text>
+            }
             placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
             minRows={4}
             onChange={(val) => {
@@ -175,15 +181,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
           ""
         )}
 
-        <Paper
+        <ComponentGlobal_CardStyles>
-          style={{
-            border: `2px solid ${AccentColor.softblue}`,
-            backgroundColor: AccentColor.blue,
-            color: "white",
-            borderRadius: "10px",
-            padding: "15px",
-          }}
-        >
           <Stack spacing={"xl"}>
             <Center>
               <Title order={5}>Partispasi User ({data?.length})</Title>
@@ -212,7 +210,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
               </Box>
             </ScrollArea>
           </Stack>
-        </Paper>
+        </ComponentGlobal_CardStyles>
       </Stack>
     </>
   );

src/app_modules/colab/component/skeleton_view.tsx

@@ -1,6 +1,13 @@
-import { Skeleton, Stack } from "@mantine/core";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Center, Grid, Skeleton, Stack } from "@mantine/core";
 
-export function Collaboration_SkeletonCreate() {
+export {
+  Collaboration_SkeletonCreate,
+  Collaboration_SkeletonBeranda,
+  Collaboration_SkeletonGrup,
+};
+
+function Collaboration_SkeletonCreate() {
   return (
     <>
       <Stack px={"xl"} spacing={"lg"}>
@@ -26,3 +33,70 @@ export function Collaboration_SkeletonCreate() {
     </>
   );
 }
+
+function Collaboration_SkeletonBeranda() {
+  return (
+    <>
+      {Array.from(new Array(2)).map((e, i) => (
+        <ComponentGlobal_CardStyles marginBottom={"15px"} key={i}>
+          <Stack spacing={"xl"}>
+            <Grid align="center" gutter={"md"}>
+              <Grid.Col span={"content"}>
+                <Skeleton circle height={40} />
+              </Grid.Col>
+              <Grid.Col span={3}>
+                <Skeleton height={20} w={150} />
+              </Grid.Col>
+              {/* <Grid.Col span={3} offset={3}>
+                  <Skeleton height={20} w={150} />
+                </Grid.Col> */}
+            </Grid>
+            <Center>
+              <Skeleton height={15} w={200} />
+            </Center>
+
+            <Grid align="center" gutter={"md"}>
+              <Grid.Col span={"content"}>
+                <Skeleton h={15} w={70} />
+              </Grid.Col>
+              <Grid.Col span={3}>
+                <Skeleton height={15} w={200} />
+              </Grid.Col>
+            </Grid>
+
+            <Grid align="center" gutter={"md"}>
+              <Grid.Col span={"content"}>
+                <Skeleton h={15} w={70} />
+              </Grid.Col>
+              <Grid.Col span={3}>
+                <Skeleton height={15} w={200} />
+              </Grid.Col>
+            </Grid>
+
+            <Stack spacing={"md"}>
+              <Skeleton height={15} w={150} />
+              <Skeleton height={15} w={"100%"} />
+              <Skeleton height={15} w={"100%"} />
+            </Stack>
+
+            <Center>
+              <Skeleton height={15} w={100} />
+            </Center>
+          </Stack>
+        </ComponentGlobal_CardStyles>
+      ))}
+    </>
+  );
+}
+
+function Collaboration_SkeletonGrup() {
+  return (
+    <>
+      {Array.from(new Array(2)).map((e, i) => (
+        <ComponentGlobal_CardStyles marginBottom={"15px"} key={i}>
+          <Skeleton h={40} />
+        </ComponentGlobal_CardStyles>
+      ))}
+    </>
+  );
+}

src/app_modules/colab/detail/main_detail/index.tsx

@@ -1,12 +1,21 @@
 "use client";
 
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { Stack } from "@mantine/core";
+import { Center, Stack, Loader } from "@mantine/core";
 import ComponentColab_DetailData from "../../component/detail/detail_data";
 import ComponentColab_DetailListPartisipasiUser from "../../component/detail/list_partisipasi_user";
 import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
 import { MODEL_COLLABORATION } from "../../model/interface";
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import {
+  apiGetAllCollaboration,
+  apiGetOneCollaborationById,
+} from "../../_lib/api_collaboration";
+import { useParams } from "next/navigation";
+import _ from "lodash";
 
 export default function Colab_MainDetail({
   dataColab,
@@ -19,24 +28,63 @@ export default function Colab_MainDetail({
   listPartisipan?: any[];
   cekPartisipan: boolean;
 }) {
+  const params = useParams<{ id: string }>();
+
+  const [data, setData] = useState<MODEL_COLLABORATION | null>(null);
+  const [activePage, setActivePage] = useState(1);
+  const [isNewPost, setIsNewPost] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneCollaborationById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get all collaboration", error);
+    }
+  }
+
+  if (_.isNull(data)) {
+    return (
+      <>
+        <Center>
+          <Loader />
+        </Center>
+      </>
+    );
+  }
+
   return (
     <>
-      <ComponentGlobal_CardStyles>
+      <Stack>
-        <Stack>
+        <ComponentGlobal_CardStyles>
-          <ComponentColab_AuthorNameOnHeader
+          <Stack>
-            tglPublish={new Date()}
+            <ComponentColab_AuthorNameOnHeader
-            profile={dataColab?.Author?.Profile as any}
+              tglPublish={new Date()}
-          />
+              profile={data?.Author?.Profile as any}
-          <ComponentColab_DetailData data={dataColab} />
+            />
+            <ComponentColab_DetailData data={data as any} />
+          </Stack>
+        </ComponentGlobal_CardStyles>
+
           <ComponentColab_DetailListPartisipasiUser
             listPartisipan={listPartisipan}
             userLoginId={userLoginId}
-            authorId={dataColab?.Author.id}
+            authorId={data?.Author.id}
-            colabId={dataColab?.id}
+            colabId={data?.id}
             cekPartisipan={cekPartisipan}
           />
-        </Stack>
+        {/* <ComponentGlobal_CardStyles>
-      </ComponentGlobal_CardStyles>
+        </ComponentGlobal_CardStyles> */}
+      </Stack>
     </>
   );
 }

src/app_modules/colab/main/beranda.tsx

@@ -9,23 +9,41 @@ import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
+import { apiGetAllCollaboration } from "../_lib/api_collaboration";
 import { ComponentColab_ButtonUpdateBeranda } from "../component/button/button_update_beranda";
 import { ComponentColab_CardBeranda } from "../component/card_view/card_beranda";
-import colab_getListAllProyek from "../fun/get/get_list_all_proyek";
 import { MODEL_COLLABORATION } from "../model/interface";
+import { Collaboration_SkeletonBeranda } from "../component/skeleton_view";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Colab_Beranda({
-  listData,
   userLoginId,
 }: {
-  listData: MODEL_COLLABORATION[];
   userLoginId: string;
 }) {
-  const [data, setData] = useState(listData);
+  const [data, setData] = useState<MODEL_COLLABORATION[] | null>(null);
   const [activePage, setActivePage] = useState(1);
-
   const [isNewPost, setIsNewPost] = useState(false);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "beranda",
+        page: "1",
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get all collaboration", error);
+    }
+  }
+
   useShallowEffect(() => {
     mqtt_client.subscribe("Colab_create");
 
@@ -36,6 +54,10 @@ export default function Colab_Beranda({
     });
   }, []);
 
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonBeranda />;
+  }
+
   return (
     <>
       <Box>
@@ -62,15 +84,16 @@ export default function Colab_Beranda({
                 </Center>
               )}
               data={data}
-              setData={setData}
+              setData={setData as any}
               moreData={async () => {
-                const loadData = await colab_getListAllProyek({
+                const respone = await apiGetAllCollaboration({
-                  page: activePage + 1,
+                  kategori: "beranda",
+                  page: `${activePage + 1}`,
                 });
 
                 setActivePage((val) => val + 1);
 
-                return loadData;
+                return respone.data;
               }}
             >
               {(item) => (

src/app_modules/colab/main/grup/index.tsx

@@ -1,28 +1,51 @@
 "use client";
 
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import {
+import { Box, Center, Loader, Skeleton, Stack } from "@mantine/core";
-  Box,
-  Center,
-  Loader
-} from "@mantine/core";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
 import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
+import { MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT } from "../../model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetAllCollaboration } from "../../_lib/api_collaboration";
 import {
-  MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT
+  Collaboration_SkeletonBeranda,
-} from "../../model/interface";
+  Collaboration_SkeletonGrup,
+} from "../../component/skeleton_view";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
-export default function Colab_GrupDiskus({
+export default function Colab_GrupDiskus() {
-  listRoom,
+  const [data, setData] = useState<
-}: {
+    MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[] | null
-  listRoom: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
+  >(null);
-}) {
-  const [data, setData] = useState(listRoom);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "grup",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get grup", error);
+    }
+  }
+
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonGrup />;
+  }
+
   return (
     <>
       <Box>
@@ -38,15 +61,16 @@ export default function Colab_GrupDiskus({
                 </Center>
               )}
               data={data}
-              setData={setData}
+              setData={setData as any}
               moreData={async () => {
-                const loadData = await colab_getListRoomChatByAuthorId({
+                const respone = await apiGetAllCollaboration({
-                  page: activePage + 1,
+                  kategori: "grup",
+                  page: `${activePage + 1}`,
                 });
 
                 setActivePage((val) => val + 1);
 
-                return loadData;
+                return respone.data;
               }}
             >
               {(item) => <ComponentColab_CardGrup data={item} />}

src/app_modules/colab/main/proyek/index.tsx

@@ -1,25 +1,17 @@
 "use client";
 
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { Stack, Tabs, Text } from "@mantine/core";
-import { IconBrandOffice, IconUsersGroup, IconUser } from "@tabler/icons-react";
+import { IconUser, IconUsersGroup } from "@tabler/icons-react";
-import { useState } from "react";
-import Colab_ProyekSaya from "./saya";
-import Colab_PartisipasiProyek from "./partisipasi";
 import { useAtom } from "jotai";
 import { gs_colab_proyek } from "../../global_state";
-import {
+import Colab_PartisipasiProyek from "./partisipasi";
-  MODEL_COLLABORATION,
+import Colab_ProyekSaya from "./saya";
-  MODEL_COLLABORATION_PARTISIPASI,
-} from "../../model/interface";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
-export default function Colab_Proyek({
+export default function Colab_Proyek() {
-  listPartisipasiUser,
-  listProyekSaya,
-}: {
-  listPartisipasiUser: MODEL_COLLABORATION_PARTISIPASI[];
-  listProyekSaya: MODEL_COLLABORATION[];
-}) {
   const [activeTab, setActiveTab] = useAtom(gs_colab_proyek);
 
   const listTabs = [
@@ -28,18 +20,14 @@ export default function Colab_Proyek({
       icon: <IconUsersGroup />,
       label: "Partisipasi Proyek",
       value: "Partisipasi",
-      path: (
+      path: <Colab_PartisipasiProyek />,
-        <Colab_PartisipasiProyek
-          listPartisipasiUser={listPartisipasiUser as any}
-        />
-      ),
     },
     {
       id: 2,
       icon: <IconUser />,
       label: "Proyek Saya",
       value: "Saya",
-      path: <Colab_ProyekSaya listProyekSaya={listProyekSaya as any} />,
+      path: <Colab_ProyekSaya />,
     },
   ];
 

src/app_modules/colab/main/proyek/partisipasi.tsx

@@ -9,21 +9,45 @@ import { useState } from "react";
 import { ComponentColab_CardSemuaPartisipan } from "../../component/card_view/card_semua_partisipan";
 import colab_getListPartisipasiProyekByAuthorId from "../../fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
 import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetAllCollaboration } from "../../_lib/api_collaboration";
+import { clientLogger } from "@/util/clientLogger";
+import { Collaboration_SkeletonBeranda } from "../../component/skeleton_view";
 
-export default function Colab_PartisipasiProyek({
+export default function Colab_PartisipasiProyek() {
-  listPartisipasiUser,
+  const [data, setData] = useState<MODEL_COLLABORATION_PARTISIPASI[] | null>(
-}: {
+    null
-  listPartisipasiUser: MODEL_COLLABORATION_PARTISIPASI[];
+  );
-}) {
-  const [data, setData] = useState(listPartisipasiUser);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "partisipasi",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get partisipasi", error);
+    }
+  }
+
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonBeranda />;
+  }
+
   return (
     <>
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
-        // --- Main component --- //
         <Box>
           <ScrollOnly
             height="73vh"
@@ -33,14 +57,15 @@ export default function Colab_PartisipasiProyek({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
             moreData={async () => {
-              const loadData = await colab_getListPartisipasiProyekByAuthorId({
+              const respone = await apiGetAllCollaboration({
-                page: activePage + 1,
+                kategori: "partisipasi",
+                page: `${activePage + 1}`,
               });
               setActivePage((val) => val + 1);
 
-              return loadData;
+              return respone.data;
             }}
           >
             {(item) => (

src/app_modules/colab/main/proyek/saya.tsx

@@ -2,29 +2,51 @@
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { clientLogger } from "@/util/clientLogger";
 import { Box, Center, Loader } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
+import { apiGetAllCollaboration } from "../../_lib/api_collaboration";
 import { ComponentColab_CardProyekSaya } from "../../component/card_view/card_proyek_saya";
-import colab_getListAllProyekSayaByAuthorId from "../../fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
+import { Collaboration_SkeletonBeranda } from "../../component/skeleton_view";
 import { MODEL_COLLABORATION } from "../../model/interface";
 
-export default function Colab_ProyekSaya({
+export default function Colab_ProyekSaya() {
-  listProyekSaya,
+  const [data, setData] = useState<MODEL_COLLABORATION[] | null>(null);
-}: {
-  listProyekSaya: MODEL_COLLABORATION[];
-}) {
-  const [data, setData] = useState(listProyekSaya);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "proyeksaya",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get proyeksaya", error);
+    }
+  }
+
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonBeranda />;
+  }
+
   return (
     <>
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
         // --- Main component --- //
-        <Box >
+        <Box>
           <ScrollOnly
             height="73vh"
             renderLoading={() => (
@@ -33,14 +55,16 @@ export default function Colab_ProyekSaya({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
             moreData={async () => {
-              const loadData = await colab_getListAllProyekSayaByAuthorId({
+              const respone = await apiGetAllCollaboration({
-                page: activePage + 1,
+                kategori: "proyeksaya",
+                page: `${activePage + 1}`,
               });
+
               setActivePage((val) => val + 1);
 
-              return loadData;
+              return respone.data;
             }}
           >
             {(item) => (

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

@@ -6,6 +6,8 @@ import {
 } from "@/app_modules/_global/component";
 import { Badge, Center, Group, Stack, Text, Title } from "@mantine/core";
 import { MODEL_VOTING } from "../../model/interface";
+import moment from "moment"
+import "moment/locale/id"
 
 export default function ComponentVote_DetailDataSetelahPublish({
   data,
@@ -48,19 +50,15 @@ export default function ComponentVote_DetailDataSetelahPublish({
                     },
                   }}
                 >
-                  <Group>
+                  <Text>
-                    <Text>
+                    {data
-                      {data?.awalVote.toLocaleDateString(["id-ID"], {
+                      ? moment(data.awalVote).format("ll")
-                        dateStyle: "medium",
+                      : "tgl awal voting"}{" "}
-                      })}
+                    -{" "}
-                    </Text>
+                    {data
-                    <Text>-</Text>
+                      ? moment(data.akhirVote).format("ll")
-                    <Text>
+                      : "tgl akhir voting"}
-                      {data?.akhirVote.toLocaleDateString(["id-ID"], {
+                  </Text>
-                        dateStyle: "medium",
-                      })}
-                    </Text>
-                  </Group>
                 </Badge>
               </Stack>
             </Stack>

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

@@ -1,25 +1,123 @@
 "use client";
 
+import { AccentColor } from "@/app_modules/_global/color";
 import {
-  Stack
+  ComponentGlobal_AvatarAndUsername,
-} from "@mantine/core";
+  ComponentGlobal_CardStyles,
-import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
+} from "@/app_modules/_global/component";
+import { clientLogger } from "@/util/clientLogger";
+import { Badge, Center, Stack, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import moment from "moment";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import {
+  apiGetHasilVotingById,
+  apiGetOneVotingById,
+} from "../../_lib/api_voting";
 import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
 import { MODEL_VOTING } from "../../model/interface";
+import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
+
+export default function Vote_DetailKontribusi() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_VOTING | null>(null);
+  const [hasil, setHasil] = useState<any[] | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+    onLoadHasil();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail", error);
+    }
+  }
+
+  async function onLoadHasil() {
+    try {
+      const respone = await apiGetHasilVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setHasil(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data hasil voting", error);
+    }
+  }
+
+  if (_.isNull(data) && _.isNull(hasil)) {
+    return (
+      <>
+        <Voting_ComponentSkeletonDetail />
+      </>
+    );
+  }
 
-export default function Vote_DetailKontribusi({
-  dataVote,
-}: {
-  dataVote: MODEL_VOTING;
-}) {
   return (
     <>
-      <Stack py={"md"}>
+      <Stack pb={"md"}>
+        {/* <ComponentGlobal_CardStyles marginBottom={"0px"}>
+          <Stack>
+            <ComponentGlobal_AvatarAndUsername
+              profile={data?.Author.Profile as any}
+            />
+            <Stack spacing={"lg"}>
+              <Center>
+                <Title order={4} align="center">
+                  {data?.title}
+                </Title>
+              </Center>
+              <Text>{data?.deskripsi}</Text>
+
+              <Stack spacing={0} pb={"xs"}>
+                <Stack align="center" spacing={"xs"}>
+                  <Text fz={10} fw={"bold"}>
+                    Batas Voting
+                  </Text>
+                  <Badge
+                    styles={{
+                      root: {
+                        backgroundColor: AccentColor.blue,
+                        border: `1px solid ${AccentColor.skyblue}`,
+                        color: "white",
+                        width: "80%",
+                      },
+                    }}
+                  >
+                    <Text>
+                      {data
+                        ? moment(data.awalVote).format("ll")
+                        : "tgl awal voting"}{" "}
+                      -{" "}
+                      {data
+                        ? moment(data.akhirVote).format("ll")
+                        : "tgl akhir voting"}
+                    </Text>
+                  </Badge>
+                </Stack>
+              </Stack>
+            </Stack>
+          </Stack>
+        </ComponentGlobal_CardStyles> */}
         <ComponentVote_DetailDataSetelahPublish
-          data={dataVote}
+          data={data as any}
           authorName={true}
         />
-        <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />
+        <ComponentVote_HasilVoting data={hasil as any} />
       </Stack>
     </>
   );

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

@@ -5,6 +5,16 @@ import ComponentVote_DaftarKontributorVoter from "../../component/detail/detail_
 import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
 import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
 import { MODEL_VOTING } from "../../model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import {
+  apiGetOneVotingById,
+  apiGetHasilVotingById,
+} from "../../_lib/api_voting";
+import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
 
 export default function Vote_DetailRiwayatSaya({
   dataVote,
@@ -13,17 +23,58 @@ export default function Vote_DetailRiwayatSaya({
   dataVote: MODEL_VOTING;
   listKontributor: any[];
 }) {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_VOTING | null>(null);
+  const [hasil, setHasil] = useState<any[] | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+    onLoadHasil();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail", error);
+    }
+  }
+
+  async function onLoadHasil() {
+    try {
+      const respone = await apiGetHasilVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setHasil(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data hasil voting", error);
+    }
+  }
+
+  if (_.isNull(data) || _.isNull(hasil)) {
+    return <Voting_ComponentSkeletonDetail />;
+  }
+
   return (
     <>
       <Stack pb={"md"}>
         <ComponentVote_DetailDataSetelahPublish
-          data={dataVote}
+          data={data}
           authorName={true}
         />
-        <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />
+        <ComponentVote_HasilVoting data={hasil} />
-        <ComponentVote_DaftarKontributorVoter
+        {/* <ComponentVote_DaftarKontributorVoter
           listKontributor={listKontributor}
-        />
+        /> */}
       </Stack>
     </>
   );

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

@@ -1,21 +1,56 @@
 "use client";
 
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
 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 { ActionIcon } from "@mantine/core";
+import { IconDotsVertical, IconUsersGroup } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import React, { useState } from "react";
 
 export default function LayoutVote_DetailRiwayatSaya({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const params = useParams<{ id: string }>();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Riwayat"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  setOpenDrawer(true);
+                }}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={[
+          {
+            id: "1",
+            name: "Daftar Kontribusi",
+            icon: <IconUsersGroup />,
+            path: RouterVote.daftar_kontributor + params.id,
+          },
+        ]}
+      />
     </>
   );
 }

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

@@ -1,30 +1,73 @@
 "use client";
 
+import { clientLogger } from "@/util/clientLogger";
 import { Stack } from "@mantine/core";
-import ComponentVote_DetailDataTanpaVote from "../../component/detail/detail_data_tanpa_vote";
+import { useShallowEffect } from "@mantine/hooks";
-import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import _ from "lodash";
-import ComponentVote_DaftarKontributorVoter from "../../component/detail/detail_daftar_kontributor";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import {
+  apiGetHasilVotingById,
+  apiGetOneVotingById,
+} from "../../_lib/api_voting";
 import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
-import { MODEL_VOTE_KONTRIBUTOR, MODEL_VOTING } from "../../model/interface";
+import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
+import { MODEL_VOTING } from "../../model/interface";
+
+export default function Vote_DetailSemuaRiwayat() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_VOTING | null>(null);
+  const [hasil, setHasil] = useState<any[] | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+    onLoadHasil();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail", error);
+    }
+  }
+
+  async function onLoadHasil() {
+    try {
+      const respone = await apiGetHasilVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setHasil(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data hasil voting", error);
+    }
+  }
+
+  if (_.isNull(data) || _.isNull(hasil)) {
+    return <Voting_ComponentSkeletonDetail />;
+  }
 
-export default function Vote_DetailSemuaRiwayat({
-  dataVote,
-  listKontributor,
-}: {
-  dataVote: MODEL_VOTING;
-  listKontributor: MODEL_VOTE_KONTRIBUTOR[];
-}) {
   return (
     <>
       <Stack pb={"md"}>
         <ComponentVote_DetailDataSetelahPublish
-          data={dataVote}
+          data={data as any}
           authorName={true}
         />
-        <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />
+        <ComponentVote_HasilVoting data={hasil} />
-        <ComponentVote_DaftarKontributorVoter
+        {/* <ComponentVote_DaftarKontributorVoter
           listKontributor={listKontributor}
-        />
+        /> */}
       </Stack>
     </>
   );

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

@@ -1,8 +1,14 @@
 "use client";
 
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
 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 { ActionIcon } from "@mantine/core";
+import { IconDotsVertical } from "@tabler/icons-react";
+import { IconUsersGroup } from "@tabler/icons-react";
+import { IconDots } from "@tabler/icons-react";
+import React, { useState } from "react";
 
 export default function LayoutVote_DetailSemuaRiwayat({
   children,
@@ -13,13 +19,42 @@ export default function LayoutVote_DetailSemuaRiwayat({
   votingId: string;
   userLoginId: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Riwayat"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  setOpenDrawer(true);
+                }}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={[
+          {
+            id: "1",
+            name: "Daftar Kontribusi",
+            icon: <IconUsersGroup />,
+            path: RouterVote.daftar_kontributor + votingId,
+          },
+        ]}
+      />
     </>
   );
 }