Merge pull request #249 from bipproduction/bagas/20-jan-25

Fix event ( list peserta )

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

@@ -0,0 +1,50 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+
+export async function GET(
+  request: Request,
+  context: { params: { id: string } }
+) {
+  const method = request.method;
+  if (method !== "GET") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    let fixData;
+    const { id } = context.params;
+
+    fixData = await prisma.event.findUnique({
+      where: {
+        id: id,
+      },
+      include: {
+        Author: {
+          include: {
+            Profile: true,
+          },
+        },
+        EventMaster_TipeAcara: true,
+        EventMaster_Status: true,
+      },
+    });
+
+    await prisma.$disconnect();
+
+    return NextResponse.json({
+      success: true,
+      message: "Berhasil mendapatkan data",
+      data: fixData,
+    });
+  } catch (error) {
+    await prisma.$disconnect();
+
+    return NextResponse.json(
+      { success: false, message: "Gagal mendapatkan data" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/event/check-kehadiran/route.ts

@@ -1,8 +1,16 @@
 import { event_funCheckKehadiran } from "@/app_modules/event/fun";
 import { NextResponse } from "next/server";
 
-export async function GET(req: Request) {
+export async function GET(request: Request) {
-  const { searchParams } = new URL(req.url);
+  const method = request.method;
+  if (method !== "GET") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  const { searchParams } = new URL(request.url);
   const userId = searchParams.get("userId");
   const eventId = searchParams.get("eventId");
 

src/app/api/event/check-peserta/route.ts

@@ -1,15 +1,50 @@
-import { event_funCheckPesertaByUserId } from "@/app_modules/event/fun";
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
-export async function GET(req: Request) {
+export async function GET(request: Request) {
-  const { searchParams } = new URL(req.url);
+  const method = request.method;
-  const userId = searchParams.get("userId");
+  if (method !== "GET") {
-  const eventId = searchParams.get("eventId");
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
 
-  const res = await event_funCheckPesertaByUserId({
+  try {
-    eventId: eventId as string,
+    let fixData;
-    userId: userId as string,
+    const { searchParams } = new URL(request.url);
-  });
+    const userId = searchParams.get("userId");
+    const eventId = searchParams.get("eventId");
 
-  return NextResponse.json(res, { status: 200 });
+    const check = await prisma.event_Peserta.findFirst({
+      where: {
+        userId: userId,
+        eventId: eventId,
+      },
+    });
+
+    if (check) {
+      fixData = true;
+    } else {
+      fixData = false;
+    }
+
+    await prisma.$disconnect();
+    return NextResponse.json(
+      { success: true, message: "Success get data", data: fixData },
+      { status: 200 }
+    );
+  } catch (error) {
+    await prisma.$disconnect();
+    backendLogger.error("Error get data detail event:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
 }

src/app/api/event/peserta/[id]/route.ts

@@ -0,0 +1,71 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(
+  request: Request,
+  context: { params: { id: string } }
+) {
+  const method = request.method;
+  if (method !== "GET") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    let fixData;
+    const { id } = context.params;
+    const { searchParams } = new URL(request.url);
+    const page = searchParams.get("page");
+    const takeData = 10;
+    const skipData = Number(page) * takeData - takeData;
+
+    fixData = await prisma.event_Peserta.findMany({
+      take: takeData,
+      skip: skipData,
+      orderBy: {
+        updatedAt: "desc",
+      },
+      where: {
+        eventId: id,
+      },
+      select: {
+        id: true,
+        active: true,
+        createdAt: true,
+        updatedAt: true,
+        userId: true,
+        isPresent: true,
+        User: {
+          select: {
+            Profile: true,
+          },
+        },
+        Event: true,
+        eventId: true,
+      },
+    });
+
+    
+
+    console.log("server", fixData)
+    return NextResponse.json({
+      success: true,
+      message: "Success get data",
+      data: fixData,
+    });
+  } catch (error) {
+
+    backendLogger.error("Error get list data:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Failed get data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -5,13 +5,12 @@ import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let eventId = params.id;
-  const dataEvent = await event_getOneById(eventId);
+  // const dataEvent = await event_getOneById(eventId);
-  const listKontributor = await Event_getListPesertaById(eventId);
+  // const listKontributor = await Event_getListPesertaById(eventId);
   const totalPeserta = await Event_countTotalPesertaById(eventId)
   return (
     <>
       <Event_DetailKontribusi
-        eventId={eventId}
         totalPeserta={totalPeserta}
       />
     </>

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

@@ -2,17 +2,15 @@ import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Event_DetailMain } from "@/app_modules/event";
 import { Event_countTotalPesertaById } from "@/app_modules/event/fun/count/count_total_peserta_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let eventId = params.id;
   const userLoginId = await funGetUserIdByToken();
-  const totalPeserta = await Event_countTotalPesertaById(eventId);
+  // const totalPeserta = await Event_countTotalPesertaById(eventId);
 
   return (
     <>
       <Event_DetailMain
         userLoginId={userLoginId as string}
-        totalPeserta={totalPeserta as any}
+        // totalPeserta={totalPeserta as any}
-        eventId={eventId}
       />
     </>
   );

src/app/dev/event/detail/riwayat/[id]/page.tsx

@@ -9,7 +9,6 @@ export default async function Page({ params }: { params: { id: string } }) {
     <>
       <Event_DetailRiwayat
         totalPeserta={totalPeserta as any}
-        eventId={eventId}
       />
     </>
   );

src/app/dev/event/konfirmasi/[id]/page.tsx

@@ -1,17 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import Ui_Konfirmasi from "@/app_modules/event/_ui/konfirmasi";
 
-export default async function Page({
+export default async function Page() {
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const eventId = (await params).id;
   const userLoginId = await funGetUserIdByToken();
 
   return (
     <>
-      <Ui_Konfirmasi userLoginId={userLoginId as string} eventId={eventId} />
+      <Ui_Konfirmasi userLoginId={userLoginId as string} />
     </>
   );
 }

src/app_modules/event/_lib/api_event.ts

@@ -0,0 +1,62 @@
+export const apiGetEventDetailById = async ({ id }: { id: string }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const response = await fetch(`/api/event/${id}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};
+
+export const apiGetEventCekPeserta = async ({
+  userId,
+  eventId,
+}: {
+  userId: string;
+  eventId: string;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const response = await fetch(
+    `/api/event/check-peserta?userId=${userId}&eventId=${eventId}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return await response.json().catch(() => null);
+};
+
+export const apiGetEventPesertaById = async ({
+  id,
+  page,
+}: {
+  id: string;
+  page: string;
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const response = await fetch(`/api/event/peserta/${id}?page=${page}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};

src/app_modules/event/_ui/konfirmasi.tsx

@@ -13,7 +13,7 @@ import { Button, Center, Group, Skeleton, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import moment from "moment";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { event_funUpdateKehadiran } from "../fun";
 import { Event_funJoinAndConfirmEvent } from "../fun/create/fun_join_and_confirm";
@@ -21,31 +21,41 @@ import { gs_event_hotMenu } from "../global_state";
 import { MODEL_EVENT } from "../model/interface";
 import { Event_funJoinEvent } from "../fun/create/fun_join_event";
 import "moment/locale/id";
+import { apiGetEventDetailById } from "../_lib/api_event";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Ui_Konfirmasi({
   userLoginId,
-  eventId,
 }: {
   userLoginId: string;
-  eventId: string;
 }) {
   //   console.log(dataEvent);
 
+  const params = useParams<{ id: string }>();
+  const eventId = params.id;
+
   const router = useRouter();
   const [data, setData] = useState<MODEL_EVENT | null>(null);
   const [isJoin, setIsJoin] = useState<boolean | null>(null);
   const [isPresent, setIsPresent] = useState<boolean | null>(null);
 
+  // Load Data
   useShallowEffect(() => {
     onLoadData();
   }, []);
 
   async function onLoadData() {
-    const data = await fetch(
+    try {
-      API_RouteEvent.get_one_by_id({ eventId: eventId })
+      const respone = await apiGetEventDetailById({
-    );
+        id: eventId,
-    const res = await data.json();
+      });
-    setData(res.data);
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail event", error);
+    }
   }
 
   //  CEK PESERTA

src/app_modules/event/component/detail/comp_box_daftar_peserta.tsx

@@ -1,12 +1,12 @@
-import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { AccentColor, MainColor } from '@/app_modules/_global/color';
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { ActionIcon, Flex, Paper, Text, Loader } from '@mantine/core';
+import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
-import { IconUser } from '@tabler/icons-react';
+import { IconUsersGroup } from "@tabler/icons-react";
-import { useParams, useRouter } from 'next/navigation';
+import { useParams, useRouter } from "next/navigation";
-import React, { useState } from 'react';
+import { useState } from "react";
 
 function Event_ComponentBoxDaftarPeserta({ eventId }: { eventId?: string }) {
-  const params = useParams<{ id: string }>()
+  const params = useParams<{ id: string }>();
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   return (
@@ -28,12 +28,14 @@ function Event_ComponentBoxDaftarPeserta({ eventId }: { eventId?: string }) {
         }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
-          <Text c={MainColor.white} fz={12}>Daftar Peserta</Text>
+          <Text c={MainColor.white} fz={12}>
+            Daftar Peserta
+          </Text>
           <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (
-              <IconUser size={70} color={MainColor.white} />
+              <IconUsersGroup size={40} color={MainColor.white} />
             )}
           </ActionIcon>
         </Flex>

src/app_modules/event/component/detail/comp_box_sponsor.tsx

@@ -1,9 +1,9 @@
 import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
 import { AccentColor, MainColor } from '@/app_modules/_global/color';
 import { ActionIcon, Flex, Loader, Paper, Text } from '@mantine/core';
+import { IconStar } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { TfiCup } from "react-icons/tfi";
 
 function Event_ComponentBoxDaftarSponsor() {
   const router = useRouter();
@@ -28,12 +28,14 @@ function Event_ComponentBoxDaftarSponsor() {
         }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
-          <Text c={MainColor.white} fz={12}>Daftar Sponsor</Text>
+          <Text c={MainColor.white} fz={12}>
+            Daftar Sponsor
+          </Text>
           <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (
-              <TfiCup size={70} color={MainColor.white} />
+              <IconStar size={40} color={MainColor.white} />
             )}
           </ActionIcon>
         </Flex>

src/app_modules/event/component/detail/detail_main.tsx

@@ -1,26 +1,32 @@
 "use client";
 
+import { MainColor } from "@/app_modules/_global/color";
 import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import { Center, Grid, SimpleGrid, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { clientLogger } from "@/util/clientLogger";
-import { MODEL_EVENT } from "../../model/interface";
+import {
+  Grid,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title
+} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { useState } from "react";
-import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
-import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
 import moment from "moment";
 import "moment/locale/id";
-import { MainColor } from "@/app_modules/_global/color";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { apiGetEventDetailById } from "../../_lib/api_event";
+import { MODEL_EVENT } from "../../model/interface";
+import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
 import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
 import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
 
-export default function ComponentEvent_DetailMainData({
+export default function ComponentEvent_DetailMainData() {
-  eventId,
+  const params = useParams<{ id: string }>();
-}: {
+  const eventId = params.id as string;
-  eventId: string;
-}) {
   const [data, setData] = useState<MODEL_EVENT | null>(null);
 
   useShallowEffect(() => {
@@ -28,11 +34,17 @@ export default function ComponentEvent_DetailMainData({
   }, []);
 
   async function onLoadData() {
-    const data = await fetch(
+    try {
-      API_RouteEvent.get_one_by_id({ eventId: eventId })
+      const respone = await apiGetEventDetailById({
-    );
+        id: eventId,
-    const res = await data.json();
+      });
-    setData(res.data);
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail event", error);
+    }
   }
 
   return (
@@ -52,7 +64,9 @@ export default function ComponentEvent_DetailMainData({
               </Title>
               <Grid>
                 <Grid.Col span={4}>
-                  <Text c={MainColor.white} fw={"bold"}>Lokasi</Text>
+                  <Text c={MainColor.white} fw={"bold"}>
+                    Lokasi
+                  </Text>
                 </Grid.Col>
                 <Grid.Col span={1}>:</Grid.Col>
                 <Grid.Col span={"auto"}>
@@ -61,19 +75,27 @@ export default function ComponentEvent_DetailMainData({
               </Grid>
               <Grid>
                 <Grid.Col span={4}>
-                  <Text c={MainColor.white} fw={"bold"}>Tipe Acara</Text>
+                  <Text c={MainColor.white} fw={"bold"}>
+                    Tipe Acara
+                  </Text>
                 </Grid.Col>
                 <Grid.Col span={1}>:</Grid.Col>
                 <Grid.Col span={"auto"}>
-                  <Text c={MainColor.white}>{data ? data.EventMaster_TipeAcara.name : null}</Text>
+                  <Text c={MainColor.white}>
+                    {data ? data.EventMaster_TipeAcara.name : null}
+                  </Text>
                 </Grid.Col>
               </Grid>
 
               <Stack spacing={"xs"}>
-                <Text c={MainColor.white} fw={"bold"}>Tanggal & Waktu</Text>
+                <Text c={MainColor.white} fw={"bold"}>
+                  Tanggal & Waktu
+                </Text>
                 <Grid>
                   <Grid.Col span={4}>
-                    <Text c={MainColor.white} fw={"bold"}>Mulai</Text>
+                    <Text c={MainColor.white} fw={"bold"}>
+                      Mulai
+                    </Text>
                   </Grid.Col>
                   <Grid.Col span={1}>:</Grid.Col>
                   <Grid.Col span={"auto"}>
@@ -88,7 +110,9 @@ export default function ComponentEvent_DetailMainData({
                 </Grid>
                 <Grid>
                   <Grid.Col span={4}>
-                    <Text c={MainColor.white} fw={"bold"}>Selesai</Text>
+                    <Text c={MainColor.white} fw={"bold"}>
+                      Selesai
+                    </Text>
                   </Grid.Col>
                   <Grid.Col span={1}>:</Grid.Col>
                   <Grid.Col span={"auto"}>
@@ -104,7 +128,9 @@ export default function ComponentEvent_DetailMainData({
               </Stack>
 
               <Stack spacing={2}>
-                <Text c={MainColor.white} fw={"bold"}>Deskripsi</Text>
+                <Text c={MainColor.white} fw={"bold"}>
+                  Deskripsi
+                </Text>
                 <Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
               </Stack>
               <SimpleGrid
@@ -114,8 +140,8 @@ export default function ComponentEvent_DetailMainData({
                   { maxWidth: "36rem", cols: 1, spacing: "sm" },
                 ]}
               >
-                  <Event_ComponentBoxDaftarPeserta/>
+                <Event_ComponentBoxDaftarPeserta />
-                  <Event_ComponentBoxDaftarSponsor />
+                <Event_ComponentBoxDaftarSponsor />
               </SimpleGrid>
             </Stack>
           </Stack>

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

@@ -3,18 +3,19 @@
 import { Stack } from "@mantine/core";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
+import { useParams } from "next/navigation";
 
 export default function Event_DetailKontribusi({
-  eventId,
   totalPeserta,
 }: {
-  eventId: string;
   totalPeserta: number;
 }) {
+  const params = useParams<{id: string}>()
+  const eventId = params.id
   return (
     <>
       <Stack spacing={"lg"} mb={"md"}>
-        <ComponentEvent_DetailMainData eventId={eventId} />
+        <ComponentEvent_DetailMainData/>
         <ComponentEvent_ListPeserta eventId={eventId} total={totalPeserta} />
       </Stack>
     </>

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

@@ -1,55 +1,102 @@
 "use client";
 
-import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
 import { IRealtimeData } from "@/app/lib/global_state";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
+import { clientLogger } from "@/util/clientLogger";
 import { Button, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
+import { apiGetEventCekPeserta } from "../../_lib/api_event";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
-import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
-import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
 import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
-import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { clientLogger } from "@/util/clientLogger";
 
 export default function Event_DetailMain({
   userLoginId,
-  totalPeserta,
-  eventId,
 }: {
   userLoginId: string;
-  totalPeserta: number;
-  eventId: string;
 }) {
-  const [total, setTotal] = useState(totalPeserta);
+  const params = useParams<{ id: string }>();
+  const eventId = params.id;
   const [isLoading, setLoading] = useState(false);
   const [isJoinSuccess, setIsJoinSuccess] = useState<boolean | null>(null);
-  const [isNewPeserta, setIsNewPeserta] = useState<boolean | null>(null);
+  // const [isNewPeserta, setIsNewPeserta] = useState<boolean | null>(null);
 
   useShallowEffect(() => {
     onCheckPeserta();
   }, []);
 
   async function onCheckPeserta() {
-    const res = await fetch(
+    try {
-      API_RouteEvent.check_peserta({ eventId: eventId, userId: userLoginId })
+      const respone = await apiGetEventCekPeserta({
-    );
+        userId: userLoginId,
-    const data = await res.json();
+        eventId: eventId,
-    setIsJoinSuccess(data);
+      });
+
+      if (respone) {
+        console.log(respone.data)
+        setIsJoinSuccess(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error check peserta", error);
+    }
+  }
+
+  // [ON JOIN BUTTON]
+  async function onJoin() {
+    const body = {
+      userId: userLoginId,
+      eventId: eventId,
+    };
+
+    try {
+      setLoading(true);
+      const res = await Event_funJoinEvent(body as any);
+      if (res.status === 200) {
+        if (userLoginId !== res.data?.Event?.authorId) {
+          const dataNotifikasi: IRealtimeData = {
+            appId: res?.data?.Event?.id as any,
+            status: "Peserta Event" as any,
+            userId: res.data?.Event?.authorId as any,
+            pesan: res.data?.Event?.title as any,
+            kategoriApp: "EVENT",
+            title: "Peserta baru event anda !",
+          };
+
+          const createNotifikasi = await notifikasiToUser_funCreate({
+            data: dataNotifikasi as any,
+          });
+
+          if (createNotifikasi.status === 201) {
+            WibuRealtime.setData({
+              type: "notification",
+              pushNotificationTo: "USER",
+              dataMessage: dataNotifikasi,
+            });
+          }
+        }
+        setIsJoinSuccess(true);
+        setLoading(false);
+        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error join event", error);
+    }
   }
 
   return (
     <>
       <Stack spacing={"lg"} pb={"md"}>
-        <ComponentEvent_DetailMainData
+        <ComponentEvent_DetailMainData />
-          eventId={eventId}
-        />
 
         {isJoinSuccess == null ? (
           <CustomSkeleton radius={"xl"} h={40} />
@@ -65,14 +112,7 @@ export default function Event_DetailMain({
             radius={"xl"}
             c={AccentColor.white}
             onClick={() => {
-              onJoin(
+              onJoin();
-                userLoginId,
-                eventId,
-                setTotal,
-                setLoading,
-                setIsJoinSuccess,
-                setIsNewPeserta
-              );
             }}
           >
             JOIN
@@ -88,63 +128,3 @@ export default function Event_DetailMain({
     </>
   );
 }
-
-async function onJoin(
-  userId: string,
-  eventId: string,
-  setTotal: any,
-  setLoading: any,
-  setIsJoinSuccess: (val: boolean | null) => void,
-  setIsNewPeserta: any
-
-) {
-  const body = {
-    userId: userId,
-    eventId: eventId,
-  };
-
-  const userLoginId = userId;
-
-  try {
-    setLoading(true);
-    const res = await Event_funJoinEvent(body as any);
-    if (res.status === 200) {
-      const resPeserta = await Event_getListPesertaById(eventId);
-      setIsNewPeserta(true);
-
-      const resTotal = await Event_countTotalPesertaById(eventId);
-      setTotal(resTotal);
-
-      if (userLoginId !== res.data?.Event?.authorId) {
-        const dataNotifikasi: IRealtimeData = {
-          appId: res?.data?.Event?.id as any,
-          status: "Peserta Event" as any,
-          userId: res.data?.Event?.authorId as any,
-          pesan: res.data?.Event?.title as any,
-          kategoriApp: "EVENT",
-          title: "Peserta baru event anda !",
-        };
-
-        const createNotifikasi = await notifikasiToUser_funCreate({
-          data: dataNotifikasi as any,
-        });
-
-        if (createNotifikasi.status === 201) {
-          WibuRealtime.setData({
-            type: "notification",
-            pushNotificationTo: "USER",
-            dataMessage: dataNotifikasi,
-          });
-        }
-      }
-      setIsJoinSuccess(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-    } else {
-      setLoading(false);
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  } catch (error) {
-    setLoading(false);
-    clientLogger.error("Error join event", error);
-  }
-}

src/app_modules/event/detail/peserta/index.tsx

@@ -1,21 +1,50 @@
-"use client"
+"use client";
 
-import { Stack } from '@mantine/core';
+import { Stack } from "@mantine/core";
-import ComponentEvent_ListPeserta from '../../component/detail/list_peserta';
+import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
-import { MODEL_EVENT_PESERTA } from '../../model/interface';
+import { MODEL_EVENT_PESERTA } from "../../model/interface";
-import { useParams } from 'next/navigation';
+import { useParams } from "next/navigation";
-import ComponentEvent_ListPesertaNew from '../../component/detail/list_peserta_new';
+import ComponentEvent_ListPesertaNew from "../../component/detail/list_peserta_new";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetEventPesertaById } from "../../_lib/api_event";
+import { useState } from "react";
+import { clientLogger } from "@/util/clientLogger";
 
 // function Event_DaftarPeserta({ totalPeserta, eventId, isNewPeserta }: {
 //   totalPeserta?: number;
 //   eventId?: string;
 //   isNewPeserta?: boolean | null;
 // }) {
-  function Event_DaftarPeserta() {
+function Event_DaftarPeserta() {
+  const params = useParams<{ id: string }>();
+
+  const [data, setData] = useState<MODEL_EVENT_PESERTA[] | null>(null);
+  const [activePage, setActivePage] = useState(1);
+
+  useShallowEffect(() => {
+    onLoadDataPeserta();
+  }, []);
+
+  async function onLoadDataPeserta() {
+    try {
+      const respone = await apiGetEventPesertaById({
+        id: params.id,
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        console.log(respone.data);
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data peserta:", error);
+    }
+  }
+
   return (
     <>
       <Stack>
-        <ComponentEvent_ListPesertaNew/>
+        <ComponentEvent_ListPesertaNew />
         {/* <ComponentEvent_ListPeserta eventId={params.id} total={totalPeserta as any} isNewPeserta={isNewPeserta} /> */}
       </Stack>
     </>

src/app_modules/event/detail/riwayat/index.tsx

@@ -1,25 +1,25 @@
 "use client";
 
 import { Stack } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
 
 export default function Event_DetailRiwayat({
   totalPeserta,
-  eventId,
 }: {
   totalPeserta: number;
-  eventId: string;
 }) {
+  const params = useParams<{ id: string }>();
+  const eventId = params.id;
   const router = useRouter();
   const [total, setTotal] = useState(totalPeserta);
 
   return (
     <>
       <Stack spacing={"lg"} py={"md"}>
-        <ComponentEvent_DetailMainData eventId={eventId} />
+        <ComponentEvent_DetailMainData />
         <ComponentEvent_ListPeserta eventId={eventId} total={total} />
       </Stack>
     </>