Merge pull request #341 from bipproduction/bagas/27-feb-25

fix api dan button

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.2.66](https://github.com/bipproduction/hipmi/compare/v1.2.65...v1.2.66) (2025-02-27)
+
 ## [1.2.65](https://github.com/bipproduction/hipmi/compare/v1.2.64...v1.2.65) (2025-02-27)
 
 ## [1.2.64](https://github.com/bipproduction/hipmi/compare/v1.2.63...v1.2.64) (2025-02-26)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.2.65",
+  "version": "1.2.66",
   "private": true,
   "type": "module",
   "prisma": {

src/app/api/admin/event/status/[name]/route.ts

@@ -8,8 +8,6 @@ export async function GET(
   request: Request,
   { params }: { params: { name: string } }
 ) {
-
-
   const { name } = params;
   const { searchParams } = new URL(request.url);
   const search = searchParams.get("search");
@@ -21,35 +19,7 @@ export async function GET(
     let fixData;
     const fixStatus = _.startCase(name);
 
-    if (!page && !search) {
+    if (!page) {
-      fixData = await prisma.event.findMany({
-        orderBy: {
-          updatedAt: "desc",
-        },
-        where: {
-          active: true,
-          isArsip: false,
-          EventMaster_Status: {
-            name: fixStatus,
-          },
-        },
-        include: {
-          Author: {
-            select: {
-              id: true,
-              username: true,
-              Profile: {
-                select: {
-                  name: true,
-                },
-              },
-            },
-          },
-          EventMaster_Status: true,
-          EventMaster_TipeAcara: true,
-        },
-      });
-    } else if (!page && search) {
       fixData = await prisma.event.findMany({
         orderBy: {
           updatedAt: "desc",
@@ -61,7 +31,7 @@ export async function GET(
             name: fixStatus,
           },
           title: {
-            contains: search,
+            contains: search ? search : "",
             mode: "insensitive",
           },
         },
@@ -81,7 +51,7 @@ export async function GET(
           EventMaster_TipeAcara: true,
         },
       });
-    } else if (page && !search) {
+    } else {
       if (fixStatus === "Publish") {
         const getAllData = await prisma.event.findMany({
           where: {
@@ -111,77 +81,7 @@ export async function GET(
         take: takeData,
         skip: skipData,
         orderBy: {
-          updatedAt: "desc",
+          tanggal: "asc",
-        },
-        where: {
-          active: true,
-          isArsip: false,
-          EventMaster_Status: {
-            name: fixStatus,
-          },
-        },
-        include: {
-          Author: {
-            select: {
-              id: true,
-              username: true,
-              Profile: {
-                select: {
-                  name: true,
-                },
-              },
-            },
-          },
-          EventMaster_Status: true,
-          EventMaster_TipeAcara: true,
-        },
-      });
-
-      const nCount = await prisma.event.count({
-        where: {
-          EventMaster_Status: {
-            name: fixStatus,
-          },
-          active: true,
-          isArsip: false,
-        },
-      });
-
-      fixData = {
-        data: data,
-        nPage: _.ceil(nCount / takeData),
-      };
-    } else if (page && search) {
-      if (fixStatus === "Publish") {
-        const getAllData = await prisma.event.findMany({
-          where: {
-            active: true,
-            EventMaster_Status: {
-              name: fixStatus,
-            },
-            isArsip: false,
-          },
-        });
-
-        for (let i of getAllData) {
-          if (moment(i.tanggalSelesai).diff(moment(), "minutes") < 0) {
-            await prisma.event.update({
-              where: {
-                id: i.id,
-              },
-              data: {
-                isArsip: true,
-              },
-            });
-          }
-        }
-      }
-
-      const data = await prisma.event.findMany({
-        take: takeData,
-        skip: skipData,
-        orderBy: {
-          updatedAt: "desc",
         },
         where: {
           active: true,
@@ -190,7 +90,7 @@ export async function GET(
             name: fixStatus,
           },
           title: {
-            contains: search,
+            contains: search ? search : "",
             mode: "insensitive",
           },
         },
@@ -215,8 +115,11 @@ export async function GET(
         where: {
           active: true,
           isArsip: false,
+          EventMaster_Status: {
+            name: fixStatus,
+          },
           title: {
-            contains: search,
+            contains: search ? search : "",
             mode: "insensitive",
           },
         },
@@ -228,11 +131,12 @@ export async function GET(
       };
     }
 
-    return NextResponse.json({
+    return NextResponse.json(
-      success: true,
+      {
-      message: `Success get data table event ${name}`,
+        success: true,
-      data: fixData,
+        message: `Success get data table event ${name}`,
-    },
+        data: fixData,
+      },
       { status: 200 }
     );
   } catch (error) {

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

@@ -1,10 +1,7 @@
 import { Event_DetailDraft } from "@/app_modules/event";
-import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  const eventId = params.id;
-  const dataEvent = await event_getOneById(eventId);
   return (
-    <Event_DetailDraft eventId={eventId as any} dataEvent={dataEvent as any} />
+    <Event_DetailDraft />
   );
 }

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

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

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

@@ -1,12 +1,6 @@
 import Event_DaftarPeserta from '@/app_modules/event/detail/peserta';
-import { Event_countTotalPesertaById } from '@/app_modules/event/fun/count/count_total_peserta_by_id';
-import { event_getOneById } from '@/app_modules/event/fun/get/get_one_by_id';
-import React from 'react';
 
 export default async function Page() { 
-  // const dataEvent = await event_getOneById(eventId);
-  // const totalPeserta = await Event_countTotalPesertaById(eventId);
-
   return (
     <Event_DaftarPeserta />
   )

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

@@ -1,19 +1,5 @@
 import { Event_DetailPublish } from "@/app_modules/event";
-import { Event_countTotalPesertaById } from "@/app_modules/event/fun/count/count_total_peserta_by_id";
-import { Event_getListPesertaById } from "@/app_modules/event/fun/get/get_list_peserta_by_id";
-import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let eventId = params.id;
+  return <Event_DetailPublish />;
-  const dataEvent = await event_getOneById(eventId);
-  const totalPeserta = await Event_countTotalPesertaById(eventId);
-
-
-  return (
-    <Event_DetailPublish
-      dataEvent={dataEvent as any}
-      totalPeserta={totalPeserta}
-      eventId={eventId}
-    />
-  );
 }

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

@@ -1,9 +1,5 @@
 import { Event_DetailReject } from "@/app_modules/event";
-import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
-export default async function Page({params}: {params: {id: string}}) {
+export default async function Page() {
-  let eventId = params.id
+  return <Event_DetailReject/>;
-  const dataEvent = await event_getOneById(eventId)
-
-  return <Event_DetailReject dataEvent={dataEvent as any}/>;
 }

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

@@ -1,10 +1,5 @@
 import { Event_DetailReview } from "@/app_modules/event";
-import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
-
+export default async function Page() {
-export default async function Page({params}: {params: {id: string}}) {
+  return <Event_DetailReview />;
-  let eventId = params.id
-  const dataEvent = await event_getOneById(eventId)
-
-  return <Event_DetailReview dataEvent={dataEvent as any}/>;
 }

src/app_modules/_global/component/comp_avatar_and_username.tsx

@@ -1,15 +1,15 @@
 "use client";
 
+import { apiGetOneProfileById } from "@/app_modules/katalog/profile/lib/api_fetch_profile";
+import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
 import { ActionIcon, Avatar, Grid, Stack, Text } from "@mantine/core";
 import { Prisma } from "@prisma/client";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
+import { MainColor } from "../color";
+import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
 import { ComponentGlobal_LoaderAvatar } from "./comp_load_avatar";
 import ComponentGlobal_Loader from "./loader";
-import { funGlobal_CheckProfile } from "../fun/get";
-import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
-import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
-import { MainColor } from "../color";
 
 type IFontSize = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_AvatarAndUsername({
@@ -27,13 +27,17 @@ export function ComponentGlobal_AvatarAndUsername({
   const [visible, setVisible] = useState(false);
 
   async function onCheckProfile() {
-    const res = await funGlobal_CheckProfile({ profileId: profile.id as any });
+    try {
+      const res = await apiGetOneProfileById({ id: profile.id as any });
 
-    if (res !== null) {
+      if (res && res.success) {
-      setVisible(true);
+        setVisible(true);
-      router.push(RouterProfile.katalog({ id: profile.id as any }));
+        router.push(RouterProfile.katalog({ id: profile.id as any }));
-    } else {
+      } else {
-      ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+        ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+      }
+    } catch (error) {
+      console.log(error);
     }
   }
 
@@ -47,7 +51,7 @@ export function ComponentGlobal_AvatarAndUsername({
             onClick={() => onCheckProfile()}
           >
             {visible ? (
-              <Avatar  radius={"xl"} size={40}>
+              <Avatar radius={"xl"} size={40}>
                 <ComponentGlobal_Loader />
               </Avatar>
             ) : (

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

@@ -1,25 +1,10 @@
-import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
 import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardStyles,
-  ComponentGlobal_LoaderAvatar,
 } from "@/app_modules/_global/component";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Badge, Group, Stack, Text } from "@mantine/core";
-import { funGlobal_CheckProfile } from "@/app_modules/_global/fun/get";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
-import {
-  Grid,
-  ActionIcon,
-  Avatar,
-  Stack,
-  Group,
-  Badge,
-  Text,
-} from "@mantine/core";
 import { Prisma } from "@prisma/client";
 import moment from "moment";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 
 type IFontSize = "xs" | "sm" | "md" | "lg" | "xl";
 
@@ -40,20 +25,6 @@ function ComponentEvent_AvatarAndUsername({
   tanggalSelesai?: Date;
   isPresent?: boolean;
 }) {
-  const router = useRouter();
-  const [visible, setVisible] = useState(false);
-
-  async function onCheckProfile() {
-    const res = await funGlobal_CheckProfile({ profileId: profile.id as any });
-
-    if (res !== null) {
-      setVisible(true);
-      router.push(RouterProfile.katalog({ id: profile.id as any }));
-    } else {
-      ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
-    }
-  }
-
   const tglMulai = moment(tanggalMulai).diff(moment(), "minutes") < 0;
 
   return (

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

@@ -1,91 +1,150 @@
 "use client";
 
-import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Grid, Stack, Text, Title } from "@mantine/core";
-import { MODEL_EVENT } from "../../_lib/interface";
 import { MainColor } from "@/app_modules/_global/color";
-import { Event_ComponentSkeletonDetailData } from "../skeleton/comp_skeleton_detail_data";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { MODEL_EVENT } from "../../_lib/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_DetailData({
-  data,
+  isDaftarPeserta,
+  isReport,
+  data
 }: {
-  data: MODEL_EVENT;
+  isDaftarPeserta?: boolean;
+  isReport?: boolean;
+  data: MODEL_EVENT | null
 }) {
+
   return (
     <>
-      <ComponentGlobal_CardStyles marginBottom={"16px"}>
+      {!data ? (
-        <Stack px={"sm"} spacing={"xl"}>
+        <Event_ComponentSkeletonDetail />
-          <Title color={MainColor.white} lineClamp={2} align="center" w={"100%"} order={4}>
+      ) : (
-            {data ? data?.title : null}
+        <Stack>
-          </Title>
+          {isReport && (
-          <Grid>
+            <ComponentGlobal_BoxInformation isReport informasi={data?.catatan} />
-            <Grid.Col span={4}>
+          )}
-              <Text c={MainColor.white} fw={"bold"}>Lokasi</Text>
-            </Grid.Col>
-            <Grid.Col span={1}>:</Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text c={MainColor.white}>{data ? data?.lokasi : null}</Text>
-            </Grid.Col>
-          </Grid>
-          <Grid>
-            <Grid.Col span={4}>
-              <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>
-            </Grid.Col>
-          </Grid>
-          <Stack spacing={"xs"}>
-            <Text c={MainColor.white} fw={"bold"}>Tanggal & Waktu</Text>
-            <Grid>
-              <Grid.Col span={4}>
-                <Text c={MainColor.white} fw={"bold"}>Mulai</Text>
-              </Grid.Col>
-              <Grid.Col span={1}>:</Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text c={MainColor.white}>
-                  {" "}
-                  {new Intl.DateTimeFormat("id-ID", {
-                    dateStyle: "full",
-                  }).format(data?.tanggal)}
-                  ,{" "}
-                  <Text span inherit c={MainColor.white}>
-                    {new Intl.DateTimeFormat("id-ID", {
-                      timeStyle: "short",
-                    }).format(data?.tanggal)}
-                  </Text>
-                </Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={4}>
-                <Text c={MainColor.white} fw={"bold"}>Selesai</Text>
-              </Grid.Col>
-              <Grid.Col span={1}>:</Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text c={MainColor.white}>
-                  {" "}
-                  {new Intl.DateTimeFormat("id-ID", {
-                    dateStyle: "full",
-                  }).format(data?.tanggalSelesai)}
-                  ,{" "}
-                  <Text span inherit c={MainColor.white}>
-                    {new Intl.DateTimeFormat("id-ID", {
-                      timeStyle: "short",
-                    }).format(data?.tanggalSelesai)}
-                  </Text>
-                </Text>
-              </Grid.Col>
-            </Grid>
-          </Stack>
 
-          <Stack spacing={2}>
+          <ComponentGlobal_CardStyles marginBottom={"16px"}>
-            <Text c={MainColor.white} fw={"bold"}>Deskripsi</Text>
+            <Stack>
-            <Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
+              <Stack px={"sm"} spacing={"xl"}>
-          </Stack>
+                <Title
+                  color={MainColor.white}
+                  lineClamp={2}
+                  align="center"
+                  w={"100%"}
+                  order={4}
+                >
+                  {data ? data?.title : null}
+                </Title>
+                <Grid>
+                  <Grid.Col span={4}>
+                    <Text c={MainColor.white} fw={"bold"}>
+                      Lokasi
+                    </Text>
+                  </Grid.Col>
+                  <Grid.Col span={1}>:</Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Text c={MainColor.white}>
+                      {data ? data?.lokasi : null}
+                    </Text>
+                  </Grid.Col>
+                </Grid>
+                <Grid>
+                  <Grid.Col span={4}>
+                    <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>
+                  </Grid.Col>
+                </Grid>
+                <Stack spacing={"xs"}>
+                  <Text c={MainColor.white} fw={"bold"}>
+                    Tanggal & Waktu
+                  </Text>
+                  <Grid>
+                    <Grid.Col span={4}>
+                      <Text c={MainColor.white} fw={"bold"}>
+                        Mulai
+                      </Text>
+                    </Grid.Col>
+                    <Grid.Col span={1}>:</Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text c={MainColor.white}>
+                        {" "}
+                        {new Intl.DateTimeFormat("id-ID", {
+                          dateStyle: "full",
+                        }).format(new Date(data?.tanggal))}
+                        ,{" "}
+                        <Text span inherit c={MainColor.white}>
+                          {new Intl.DateTimeFormat("id-ID", {
+                            timeStyle: "short",
+                          }).format(new Date(data?.tanggal))}
+                        </Text>
+                      </Text>
+                    </Grid.Col>
+                  </Grid>
+                  <Grid>
+                    <Grid.Col span={4}>
+                      <Text c={MainColor.white} fw={"bold"}>
+                        Selesai
+                      </Text>
+                    </Grid.Col>
+                    <Grid.Col span={1}>:</Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text c={MainColor.white}>
+                        {" "}
+                        {new Intl.DateTimeFormat("id-ID", {
+                          dateStyle: "full",
+                        }).format(new Date(data?.tanggalSelesai))}
+                        ,{" "}
+                        <Text span inherit c={MainColor.white}>
+                          {new Intl.DateTimeFormat("id-ID", {
+                            timeStyle: "short",
+                          }).format(new Date(data?.tanggalSelesai))}
+                        </Text>
+                      </Text>
+                    </Grid.Col>
+                  </Grid>
+                </Stack>
+
+                <Stack spacing={2}>
+                  <Text c={MainColor.white} fw={"bold"}>
+                    Deskripsi
+                  </Text>
+                  <Text c={MainColor.white}>
+                    {data ? data?.deskripsi : null}
+                  </Text>
+                </Stack>
+              </Stack>
+
+              {isDaftarPeserta && (
+                <SimpleGrid
+                  cols={2}
+                  breakpoints={[
+                    { maxWidth: "48rem", cols: 2, spacing: "sm" },
+                    { maxWidth: "36rem", cols: 1, spacing: "sm" },
+                  ]}
+                >
+                  <Event_ComponentBoxDaftarPeserta />
+                  <Event_ComponentBoxDaftarSponsor />
+                </SimpleGrid>
+              )}
+            </Stack>
+          </ComponentGlobal_CardStyles>
         </Stack>
-      </ComponentGlobal_CardStyles >
+      )}
     </>
   );
 }

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

@@ -6,13 +6,7 @@ import {
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
 import { clientLogger } from "@/util/clientLogger";
-import {
+import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
-  Grid,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title
-} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import moment from "moment";
 import "moment/locale/id";

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

@@ -8,33 +8,31 @@ import {
   Grid,
   Group,
   Loader,
-  Skeleton,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import _ from "lodash";
 
-import {
-  ComponentGlobal_AvatarAndUsername,
-  ComponentGlobal_CardStyles,
-  ComponentGlobal_LoaderAvatar,
-} from "@/app_modules/_global/component";
-import { useRouter } from "next/navigation";
-import { MODEL_EVENT_PESERTA } from "../../_lib/interface";
-import { Prisma } from "@prisma/client";
-import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { funGlobal_CheckProfile } from "@/app_modules/_global/fun/get";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
-import { useState } from "react";
-import moment from "moment";
-import { useShallowEffect } from "@mantine/hooks";
-import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
-import Event_ComponentSkeletonListPeserta from "../skeleton/comp_skeleton_list_peserta";
-import { ScrollOnly } from "next-scroll-loader";
-import { event_newGetListPesertaById } from "../../fun";
 import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoaderAvatar
+} from "@/app_modules/_global/component";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { apiGetOneProfileById } from "@/app_modules/katalog/profile/lib/api_fetch_profile";
+import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
+import { RouterProfile } from "@/lib/router_hipmi/router_katalog";
+import { useShallowEffect } from "@mantine/hooks";
+import { Prisma } from "@prisma/client";
+import moment from "moment";
+import { ScrollOnly } from "next-scroll-loader";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_EVENT_PESERTA } from "../../_lib/interface";
+import { event_newGetListPesertaById } from "../../fun";
+import Event_ComponentSkeletonListPeserta from "../skeleton/comp_skeleton_list_peserta";
 
 export default function ComponentEvent_ListPeserta({
   total,
@@ -75,7 +73,9 @@ export default function ComponentEvent_ListPeserta({
         <ComponentGlobal_CardStyles>
           <Stack spacing={"md"} px={"sm"}>
             <Center>
-              <Title color={MainColor.white} order={5}>Daftar Peserta ({total})</Title>
+              <Title color={MainColor.white} order={5}>
+                Daftar Peserta ({total})
+              </Title>
             </Center>
 
             {_.isEmpty(data) ? (
@@ -163,13 +163,17 @@ function ComponentEvent_AvatarAndUsername({
   const [visible, setVisible] = useState(false);
 
   async function onCheckProfile() {
-    const res = await funGlobal_CheckProfile({ profileId: profile.id as any });
+    try {
+      const res = await apiGetOneProfileById({ id: profile.id as any });
 
-    if (res !== null) {
+      if (res && res.success) {
-      setVisible(true);
+        setVisible(true);
-      router.push(RouterProfile.katalog({ id: profile.id as any }));
+        router.push(RouterProfile.katalog({ id: profile.id as any }));
-    } else {
+      } else {
-      ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+        ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+      }
+    } catch (error) {
+      console.log("Error >>r", error);
     }
   }
 

src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx

@@ -30,7 +30,7 @@ export function Event_ComponentSkeletonDetail() {
             <CustomSkeleton h={20} w={"100%"} />
             <CustomSkeleton h={20} w={"100%"} />
           </Stack>
-          <SimpleGrid
+          {/* <SimpleGrid
             cols={2}
             breakpoints={[
               { maxWidth: "48rem", cols: 2, spacing: "sm" },
@@ -39,7 +39,7 @@ export function Event_ComponentSkeletonDetail() {
           >
             <CustomSkeleton h={100} w={"100%"} />
             <CustomSkeleton h={100} w={"100%"} />
-          </SimpleGrid>
+          </SimpleGrid> */}
         </Stack>
       </ComponentGlobal_CardStyles>
     </>

src/app_modules/event/component/skeleton/comp_skeleton_detail_data.tsx

@@ -24,10 +24,10 @@ export function Event_ComponentSkeletonDetailData() {
             </Grid>
           ))}
 
-          <Stack spacing={"xs"}>
+          {/* <Stack spacing={"xs"}>
             <Skeleton radius={"xl"} h={20} w={200} />
             <Skeleton radius={"xl"} h={20} />
-          </Stack>
+          </Stack> */}
         </Stack>
       </ComponentGlobal_CardStyles>
     </>

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

@@ -1,157 +1,166 @@
 "use client";
 
-import { IRealtimeData } from "@/lib/global_state";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { RouterEvent } from "@/lib/router_hipmi/router_event";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { IRealtimeData } from "@/lib/global_state";
+import { RouterEvent } from "@/lib/router_hipmi/router_event";
+import { clientLogger } from "@/util/clientLogger";
 import { Button, Group, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import moment from "moment";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
-import { Event_ComponentSkeletonDetailData } from "../../component";
+import { apiGetEventDetailById } from "../../_lib/api_event";
+import { MODEL_EVENT } from "../../_lib/interface";
 import ComponentEvent_DetailData from "../../component/detail/detail_data";
 import { Event_funDeleteById } from "../../fun/delete/fun_delete";
 import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
-import { MODEL_EVENT } from "../../_lib/interface";
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { clientLogger } from "@/util/clientLogger";
 
-export default function Event_DetailDraft({
+export default function Event_DetailDraft() {
-  dataEvent,
+   const params = useParams<{ id: string }>();
-  eventId,
+   const eventId = params.id as string;
-}: {
+   const [data, setData] = useState<MODEL_EVENT | null>(null);
-  dataEvent: MODEL_EVENT;
-  eventId: string;
-}) {
-  const [data, setData] = useState<MODEL_EVENT | null>(dataEvent);
 
-  if (!data) {
+   useShallowEffect(() => {
-    return (
+     onLoadData();
-      <>
+   }, []);
-        <Event_ComponentSkeletonDetailData />
+
-      </>
+   async function onLoadData() {
-    );
+     try {
-  }
+       const respone = await apiGetEventDetailById({
+         id: eventId,
+       });
+
+       if (respone) {
+         setData(respone.data);
+       }
+     } catch (error) {
+       clientLogger.error("Error get data detail event", error);
+     }
+   }
 
   return (
     <>
-      {/* <pre>{JSON.stringify(dataEvent.tanggal)}</pre> */}
       <Stack spacing={"lg"}>
-        {data?.catatan ? (
+        <ComponentEvent_DetailData isReport data={data} />
-          <ComponentGlobal_BoxInformation isReport informasi={data?.catatan} />
+        <ButtonAction eventId={eventId} endDate={data?.tanggalSelesai} />
-        ) : (
-          ""
-        )}
-        <ComponentEvent_DetailData data={data} />
-        <ButtonAction eventId={data.id} tanggalSelesai={data.tanggalSelesai} />
       </Stack>
     </>
   );
 }
 
-function ButtonAction({
+function ButtonAction({ eventId, endDate }: { eventId: string; endDate: any }) {
-  eventId,
-  tanggalSelesai,
-}: {
-  eventId: string;
-  tanggalSelesai?: any;
-}) {
   const router = useRouter();
   const [isLoadingDelete, setLoadingDelete] = useState(false);
   const [isLoadingAjukan, setLoadingAjukan] = useState(false);
   const [openModal1, setOpenModal1] = useState(false);
   const [openModal2, setOpenModal2] = useState(false);
 
+
   async function onDelete() {
-    const res = await Event_funDeleteById(eventId);
     try {
-      setLoadingDelete(true);
+      const res = await Event_funDeleteById(eventId);
-      if (res.status === 200) {
+      try {
-        router.back();
+        setLoadingDelete(true);
-        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+        if (res.status === 200) {
-      } else {
+          router.back();
+          ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+        } else {
+          setLoadingDelete(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      } catch (error) {
         setLoadingDelete(false);
-        ComponentGlobal_NotifikasiGagal(res.message);
+        clientLogger.error("Error delete event", error);
       }
     } catch (error) {
+      console.log("Error delete event", error);
       setLoadingDelete(false);
-      clientLogger.error("Error delete event", error);
     }
   }
 
   async function onAjukan() {
-    if (
+    if (moment(endDate.toISOString().toString()).diff(moment(), "minutes") < 0)
-      moment(tanggalSelesai.toISOString().toString()).diff(
-        moment(),
-        "minutes"
-      ) < 0
-    )
       return ComponentGlobal_NotifikasiPeringatan("Waktu acara telah lewat");
 
-    const res = await Event_funEditStatusById("2", eventId);
+    try {
-    if (res.status === 200) {
-      const dataNotifikasi: IRealtimeData = {
-        appId: res.data?.id as any,
-        status: res.data?.EventMaster_Status?.name as any,
-        userId: res.data?.authorId as any,
-        pesan: res.data?.title as any,
-        kategoriApp: "EVENT",
-        title: "Mengajukan review",
-      };
-
-      const notif = await notifikasiToAdmin_funCreate({
-        data: dataNotifikasi as any,
-      });
-
-      if (notif.status === 201) {
-        WibuRealtime.setData({
-          type: "notification",
-          pushNotificationTo: "ADMIN",
-        });
-
-        WibuRealtime.setData({
-          type: "trigger",
-          pushNotificationTo: "ADMIN",
-          dataMessage: dataNotifikasi,
-        });
-      }
-      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
       setLoadingAjukan(true);
-      router.replace(RouterEvent.status({ id: "2" }));
+      const res = await Event_funEditStatusById("2", eventId);
-    } else {
+      if (res.status === 200) {
-      ComponentGlobal_NotifikasiGagal(res.message);
+        const dataNotifikasi: IRealtimeData = {
+          appId: res.data?.id as any,
+          status: res.data?.EventMaster_Status?.name as any,
+          userId: res.data?.authorId as any,
+          pesan: res.data?.title as any,
+          kategoriApp: "EVENT",
+          title: "Mengajukan review",
+        };
+
+        const notif = await notifikasiToAdmin_funCreate({
+          data: dataNotifikasi as any,
+        });
+
+        if (notif.status === 201) {
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "ADMIN",
+          });
+
+          WibuRealtime.setData({
+            type: "trigger",
+            pushNotificationTo: "ADMIN",
+            dataMessage: dataNotifikasi,
+          });
+        }
+        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+        router.replace(RouterEvent.status({ id: "2" }));
+      } else {
+        setLoadingAjukan(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoadingAjukan(false);
+      clientLogger.error("Error ajukan event", error);
     }
   }
 
   return (
     <>
-      <Group grow>
+      {!endDate ? (
-        <Button
+        <Group grow>
-          radius={"xl"}
+          <CustomSkeleton height={40} radius="xl" />
-          c={MainColor.darkblue}
+          <CustomSkeleton height={40} radius="xl" />
-          style={{ backgroundColor: AccentColor.yellow }}
+        </Group>
-          onClick={() => {
+      ) : (
-            setOpenModal1(true);
+        <Group grow>
-          }}
+          <Button
-        >
+            radius={"xl"}
-          Ajukan Review
+            c={MainColor.darkblue}
-        </Button>
+            style={{ backgroundColor: AccentColor.yellow }}
-        <Button
+            onClick={() => {
-          radius={"xl"}
+              setOpenModal1(true);
-          c={AccentColor.white}
+            }}
-          style={{ backgroundColor: MainColor.red }}
+          >
-          onClick={() => {
+            Ajukan Review
-            setOpenModal2(true);
+          </Button>
-          }}
+          <Button
-        >
+            radius={"xl"}
-          Hapus
+            c={AccentColor.white}
-        </Button>
+            style={{ backgroundColor: MainColor.red }}
-      </Group>
+            onClick={() => {
+              setOpenModal2(true);
+            }}
+          >
+            Hapus
+          </Button>
+        </Group>
+      )}
 
       {/* MODAL AJUKAN */}
       <UIGlobal_Modal
@@ -159,7 +168,12 @@ function ButtonAction({
         opened={openModal1}
         close={() => setOpenModal1(false)}
         buttonKiri={
-          <Button style={{ backgroundColor: AccentColor.blue}} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal1(false)}>
+          <Button
+            style={{ backgroundColor: AccentColor.blue }}
+            c={AccentColor.white}
+            radius={"xl"}
+            onClick={() => setOpenModal1(false)}
+          >
             Batal
           </Button>
         }
@@ -185,7 +199,12 @@ function ButtonAction({
         opened={openModal2}
         close={() => setOpenModal2(false)}
         buttonKiri={
-          <Button style={{ backgroundColor: AccentColor.blue}} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal2(false)}>
+          <Button
+            style={{ backgroundColor: AccentColor.blue }}
+            c={AccentColor.white}
+            radius={"xl"}
+            onClick={() => setOpenModal2(false)}
+          >
             Batal
           </Button>
         }

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

@@ -2,21 +2,13 @@
 
 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({
+export default function Event_DetailKontribusi() {
-  totalPeserta,
-}: {
-  totalPeserta: number;
-}) {
-  const params = useParams<{id: string}>()
-  const eventId = params.id
   return (
     <>
       <Stack spacing={"lg"} mb={"md"}>
-        <ComponentEvent_DetailMainData/>
+        <ComponentEvent_DetailMainData />
-        <ComponentEvent_ListPeserta eventId={eventId} total={totalPeserta} />
+        {/* <ComponentEvent_ListPeserta eventId={eventId} total={totalPeserta} /> */}
       </Stack>
     </>
   );

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

@@ -1,24 +1,18 @@
 "use client";
 
-import { Stack, Loader, Center } from "@mantine/core";
-import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
-import { MODEL_EVENT_PESERTA } from "../../_lib/interface";
-import { useParams } from "next/navigation";
-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";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
+import { Center, Loader, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { ScrollOnly } from "next-scroll-loader";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { apiGetEventPesertaById } from "../../_lib/api_event";
+import { MODEL_EVENT_PESERTA } from "../../_lib/interface";
 import ComponentEvent_AvatarAndUsername from "../../component/detail/comp_avatar_and_username_event";
-import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
+import _ from "lodash";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
-// function Event_DaftarPeserta({ totalPeserta, eventId, isNewPeserta }: {
-//   totalPeserta?: number;
-//   eventId?: string;
-//   isNewPeserta?: boolean | null;
-// }) {
 function Event_DaftarPeserta() {
   const params = useParams<{ id: string }>();
 
@@ -44,6 +38,25 @@ function Event_DaftarPeserta() {
     }
   }
 
+  const handleMoreData = async () => {
+    try {
+      const nextPage = activePage + 1;
+
+      const response = await apiGetEventPesertaById({
+        id: params.id,
+        page: `${nextPage}`,
+      });
+
+      if (response) {
+        setActivePage(nextPage);
+
+        return response.data;
+      }
+    } catch (error) {
+      clientLogger.error("Error fetching more data:", error);
+    }
+  };
+
   if (!data) {
     return (
       <>
@@ -57,47 +70,34 @@ function Event_DaftarPeserta() {
 
   return (
     <>
-      <Stack>
+      {_.isEmpty(data) ? (
-        <ScrollOnly
+        <ComponentGlobal_IsEmptyData />
-          height="90vh"
+      ) : (
-          renderLoading={() => (
+        <Stack>
-            <Center mt={"lg"}>
+          <ScrollOnly
-              <Loader color={"yellow"} />
+            height="90vh"
-            </Center>
+            renderLoading={() => (
-          )}
+              <Center mt={"lg"}>
-          data={data}
+                <Loader color={"yellow"} />
-          setData={setData as any}
+              </Center>
-          moreData={async () => {
+            )}
-            try {
+            data={data}
-              const respone = await apiGetEventPesertaById({
+            setData={setData as any}
-                id: params.id,
+            moreData={handleMoreData}
-                page: `${activePage + 1}`,
+          >
-              });
+            {(item) => (
-
+              <ComponentEvent_AvatarAndUsername
-              if (respone) {
+                profile={item?.User?.Profile as any}
-                setActivePage((val) => val + 1);
+                sizeAvatar={30}
-
+                fontSize={"sm"}
-                return respone.data;
+                tanggalMulai={item?.Event?.tanggal}
-              }
+                tanggalSelesai={item?.Event?.tanggalSelesai}
-            } catch (error) {
+                isPresent={item?.isPresent}
-              clientLogger.error("Error get data peserta:", error);
+              />
-            }
+            )}
-          }}
+          </ScrollOnly>
-        >
+        </Stack>
-          {(item) => (
+      )}
-            <ComponentEvent_AvatarAndUsername
-              profile={item?.User?.Profile as any}
-              sizeAvatar={30}
-              fontSize={"sm"}
-              tanggalMulai={item?.Event?.tanggal}
-              tanggalSelesai={item?.Event?.tanggalSelesai}
-              isPresent={item?.isPresent}
-            />
-          )}
-        </ScrollOnly>
-
-        {/* <ComponentEvent_ListPeserta eventId={params.id} total={totalPeserta as any} isNewPeserta={isNewPeserta} /> */}
-      </Stack>
     </>
   );
 }

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

@@ -4,7 +4,7 @@ import React from 'react';
 function LayoutEvent_Peserta({children}: {children: React.ReactNode}) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="DaftarPeserta" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Daftar Peserta" />}>
       {children}
       </UIGlobal_LayoutTamplate>
     </>

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

@@ -1,22 +1,39 @@
 "use client";
 
+import { useParams } from "next/navigation";
 import ComponentEvent_DetailData from "../../component/detail/detail_data";
-import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
+import { useState } from "react";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetEventDetailById } from "../../_lib/api_event";
 import { MODEL_EVENT } from "../../_lib/interface";
 
-export default function Event_DetailPublish({
+export default function Event_DetailPublish() {
-  dataEvent,
+  const params = useParams<{ id: string }>();
-  totalPeserta,
+  const eventId = params.id as string;
-  eventId,
+  const [data, setData] = useState<MODEL_EVENT | null>(null);
-}: {
+
-  dataEvent: MODEL_EVENT;
+  useShallowEffect(() => {
-  totalPeserta: number;
+    onLoadData();
-  eventId: string;
+  }, []);
-}) {
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetEventDetailById({
+        id: eventId,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail event", error);
+    }
+  }
+
   return (
     <>
-      <ComponentEvent_DetailData data={dataEvent} />
+      <ComponentEvent_DetailData isDaftarPeserta={true} data={data} />
-      <ComponentEvent_ListPeserta eventId={eventId} total={totalPeserta} />
     </>
   );
 }

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

@@ -1,51 +1,72 @@
 "use client";
 
-import { RouterEvent } from "@/lib/router_hipmi/router_event";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
-import { Button, SimpleGrid, Stack } from "@mantine/core";
+import { RouterEvent } from "@/lib/router_hipmi/router_event";
+import { clientLogger } from "@/util/clientLogger";
+import { Button, Group, SimpleGrid, Stack } from "@mantine/core";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentEvent_DetailData from "../../component/detail/detail_data";
 import { Event_funDeleteById } from "../../fun/delete/fun_delete";
 import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetEventDetailById } from "../../_lib/api_event";
 import { MODEL_EVENT } from "../../_lib/interface";
-import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { clientLogger } from "@/util/clientLogger";
+
+export default function Event_DetailReject() {
+   const params = useParams<{ id: string }>();
+   const eventId = params.id as string;
+   const [data, setData] = useState<MODEL_EVENT | null>(null);
+
+   useShallowEffect(() => {
+     onLoadData();
+   }, []);
+
+   async function onLoadData() {
+     try {
+       const respone = await apiGetEventDetailById({
+         id: eventId,
+       });
+
+       if (respone) {
+         setData(respone.data);
+       }
+     } catch (error) {
+       clientLogger.error("Error get data detail event", error);
+     }
+   }
+
 
-export default function Event_DetailReject({
-  dataEvent,
-}: {
-  dataEvent: MODEL_EVENT;
-}) {
-  const [data, setData] = useState(dataEvent);
-  
   return (
     <>
       <Stack spacing={"lg"}>
-        <ComponentGlobal_BoxInformation isReport informasi={data.catatan} />
+        <ComponentEvent_DetailData isReport data={data} />
-        <ComponentEvent_DetailData data={data} />
+        <ButtonAction eventId={eventId} data={data} />
-        <ButtonAction eventId={data.id} />
       </Stack>
     </>
   );
 }
 
-
+function ButtonAction({ eventId, data }: { eventId: string , data: MODEL_EVENT | null}) {
-function ButtonAction({ eventId,  }: { eventId: string }) {
   const router = useRouter();
   const [openModal1, setOpenModal1] = useState(false);
   const [openModal2, setOpenModal2] = useState(false);
   const [isLoading, setLoading] = useState(false);
   const [isLoading2, setLoading2] = useState(false);
 
-  async function onUpdate(router: AppRouterInstance, eventId: string, setLoading: any) {
+  async function onUpdate(
-    await Event_funEditStatusById("3", eventId).then((res) => {
+    router: AppRouterInstance,
-      try {
+    eventId: string,
-        setLoading(true);
+    setLoading: any
+  ) {
+    try {
+      setLoading(true);
+      await Event_funEditStatusById("3", eventId).then((res) => {
         if (res.status === 200) {
           ComponentGlobal_NotifikasiBerhasil(res.message);
           router.push(RouterEvent.status({ id: "3" }));
@@ -53,18 +74,21 @@ function ButtonAction({ eventId,  }: { eventId: string }) {
           setLoading(false);
           ComponentGlobal_NotifikasiGagal(res.message);
         }
-      } catch (error) {
+      });
-        setLoading(false);
+    } catch (error) {
-        clientLogger.error("Error update event", error);
+      setLoading(false);
-      }
+      clientLogger.error("Error update event", error);
-     
+    }
-    });
   }
-  
+
-  async function onDelete(router: AppRouterInstance, eventId: string, setLoading2: any) {
+  async function onDelete(
-    const res = await Event_funDeleteById(eventId);
+    router: AppRouterInstance,
+    eventId: string,
+    setLoading2: any
+  ) {
     try {
       setLoading2(true);
+      const res = await Event_funDeleteById(eventId);
       if (res.status === 200) {
         ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
         router.back();
@@ -77,31 +101,38 @@ function ButtonAction({ eventId,  }: { eventId: string }) {
       clientLogger.error("Error delete event", error);
     }
   }
-  
+
   return (
     <>
-      <SimpleGrid cols={2}>
+      {!data ? (
-        <Button
+        <Group grow>
-          style={{ backgroundColor: AccentColor.yellow }}
+          <CustomSkeleton height={40} radius="xl" />
-          w={"100%"}
+          <CustomSkeleton height={40} radius="xl" />
-          radius={"xl"}
+        </Group>
-          c={MainColor.darkblue}
+      ) : (
-          onClick={() => {
+        <SimpleGrid cols={2}>
-            setOpenModal1(true);
+          <Button
-          }}
+            style={{ backgroundColor: AccentColor.yellow }}
-        >
+            w={"100%"}
-          Edit Kembali
+            radius={"xl"}
-        </Button>
+            c={MainColor.darkblue}
-        <Button
+            onClick={() => {
-          style={{ backgroundColor: MainColor.red }}
+              setOpenModal1(true);
-          w={"100%"}
+            }}
-          radius={"xl"}
+          >
-          c={AccentColor.white}
+            Edit Kembali
-          onClick={() => setOpenModal2(true)}
+          </Button>
-        >
+          <Button
-          Hapus
+            style={{ backgroundColor: MainColor.red }}
-        </Button>
+            w={"100%"}
-      </SimpleGrid>
+            radius={"xl"}
+            c={AccentColor.white}
+            onClick={() => setOpenModal2(true)}
+          >
+            Hapus
+          </Button>
+        </SimpleGrid>
+      )}
 
       {/* MODAL EDIT */}
       <UIGlobal_Modal
@@ -109,7 +140,12 @@ function ButtonAction({ eventId,  }: { eventId: string }) {
         opened={openModal1}
         close={() => setOpenModal1(false)}
         buttonKiri={
-          <Button style={{ backgroundColor: AccentColor.blue}} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal1(false)}>
+          <Button
+            style={{ backgroundColor: AccentColor.blue }}
+            c={AccentColor.white}
+            radius={"xl"}
+            onClick={() => setOpenModal1(false)}
+          >
             Batal
           </Button>
         }
@@ -135,7 +171,12 @@ function ButtonAction({ eventId,  }: { eventId: string }) {
         opened={openModal2}
         close={() => setOpenModal2(false)}
         buttonKiri={
-          <Button style={{ backgroundColor: AccentColor.blue}} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal2(false)}>
+          <Button
+            style={{ backgroundColor: AccentColor.blue }}
+            c={AccentColor.white}
+            radius={"xl"}
+            onClick={() => setOpenModal2(false)}
+          >
             Batal
           </Button>
         }
@@ -157,4 +198,3 @@ function ButtonAction({ eventId,  }: { eventId: string }) {
     </>
   );
 }
-

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

@@ -8,7 +8,7 @@ import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/cre
 import mqtt_client from "@/util/mqtt_client";
 import { Button, Stack } from "@mantine/core";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentEvent_DetailData from "../../component/detail/detail_data";
 import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
@@ -18,17 +18,42 @@ import { WibuRealtime } from "wibu-pkg";
 import { event_checkStatus } from "../../fun/get/fun_check_status_by_id";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetEventDetailById } from "../../_lib/api_event";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function Event_DetailReview({
+export default function Event_DetailReview() {
-  dataEvent,
+  const params = useParams<{ id: string }>();
-}: {
+  const eventId = params.id as string;
-  dataEvent: MODEL_EVENT;
+  const [data, setData] = useState<MODEL_EVENT | null>(null);
-}) {
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetEventDetailById({
+        id: eventId,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail event", error);
+    }
+  }
   return (
     <>
       <Stack spacing={"xl"}>
-        <ComponentEvent_DetailData data={dataEvent} />
+        <ComponentEvent_DetailData data={data} />
-        <ButtonAction eventId={dataEvent?.id} />
+        {!data ? (
+          <CustomSkeleton radius={"xl"} height={40} />
+        ) : (
+          <ButtonAction eventId={eventId} />
+        )}
       </Stack>
     </>
   );
@@ -40,7 +65,12 @@ function ButtonAction({ eventId }: { eventId: string }) {
   const [openModal, setOpenModal] = useState(false);
   return (
     <>
-      <Button radius={"xl"} style={{ backgroundColor: MainColor.orange }} c={MainColor.darkblue} onClick={() => setOpenModal(true)}>
+      <Button
+        radius={"xl"}
+        style={{ backgroundColor: MainColor.orange }}
+        c={MainColor.darkblue}
+        onClick={() => setOpenModal(true)}
+      >
         Batalkan Review
       </Button>
 
@@ -49,13 +79,18 @@ function ButtonAction({ eventId }: { eventId: string }) {
         opened={openModal}
         close={() => setOpenModal(false)}
         buttonKiri={
-          <Button style={{ backgroundColor: AccentColor.blue}} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
+          <Button
+            style={{ backgroundColor: AccentColor.blue }}
+            c={AccentColor.white}
+            radius={"xl"}
+            onClick={() => setOpenModal(false)}
+          >
             Batal
           </Button>
         }
         buttonKanan={
           <Button
-          style={{ backgroundColor: AccentColor.yellow }}
+            style={{ backgroundColor: AccentColor.yellow }}
             loaderPosition="center"
             loading={isLoading}
             radius={"xl"}

src/app_modules/vote/_view/view_detail_kontributor_voting.tsx

@@ -3,25 +3,23 @@ import {
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Badge,
+  Box,
   Center,
   Group,
-  Stack,
-  Text,
   Loader,
-  Paper,
+  Text
-  Box,
 } from "@mantine/core";
-import _ from "lodash";
-import { MODEL_VOTE_KONTRIBUTOR } from "../model/interface";
 import { useShallowEffect } from "@mantine/hooks";
-import { apiGetKontributorById } from "../_lib/api_voting";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
 import { useParams } from "next/navigation";
 import { useState } from "react";
-import { clientLogger } from "@/util/clientLogger";
+import { apiGetKontributorById } from "../_lib/api_voting";
 import { Voting_ComponentSkeletonDaftarKontributor } from "../component/skeleton_view";
-import { ScrollOnly } from "next-scroll-loader";
+import { MODEL_VOTE_KONTRIBUTOR } from "../model/interface";
 
 export function Voting_ViewDetailKontributorVoting() {
   const params = useParams<{ id: string }>();
@@ -47,6 +45,23 @@ export function Voting_ViewDetailKontributorVoting() {
     }
   }
 
+  const handleMoreData = async () => {
+    try {
+      const nextPage = activePage + 1;
+      const respone = await apiGetKontributorById({
+        id: params.id,
+        page: `${nextPage}`,
+      });
+
+      if (respone) {
+        setActivePage(nextPage);
+        return respone.data;
+      }
+    } catch (error) {
+      clientLogger.error("Error get data kontributor", error);
+    }
+  };
+
   if (_.isNull(data)) {
     return <Voting_ComponentSkeletonDaftarKontributor />;
   }
@@ -66,16 +81,7 @@ export function Voting_ViewDetailKontributorVoting() {
             )}
             data={data}
             setData={setData as any}
-            moreData={async () => {
+            moreData={handleMoreData}
-              const respone = await apiGetKontributorById({
-                id: params.id,
-                page: `${activePage + 1}`,
-              });
-
-              setActivePage((val) => val + 1);
-
-              return respone.data;
-            }}
           >
             {(item) => (
               <ComponentGlobal_CardStyles>
@@ -102,25 +108,6 @@ export function Voting_ViewDetailKontributorVoting() {
               </ComponentGlobal_CardStyles>
             )}
           </ScrollOnly>
-
-          {/* {data?.map((e, i) => (
-              <ComponentGlobal_AvatarAndUsername
-                key={e.id}
-                profile={e.Author.Profile as any}
-                component={
-                  <Group position="right">
-                    <Badge w={130}>
-                      <Text
-                        lineClamp={1}
-                        fz={e.Voting_DaftarNamaVote.value.length > 10 ? 8 : 10}
-                      >
-                        {e.Voting_DaftarNamaVote.value}
-                      </Text>
-                    </Badge>
-                  </Group>
-                }
-              />
-            ))} */}
         </Box>
       )}
     </>

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { IRealtimeData } from "@/lib/global_state";
 import {
   AccentColor,
   MainColor,
@@ -14,6 +13,7 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_glo
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
+import { IRealtimeData } from "@/lib/global_state";
 import { clientLogger } from "@/util/clientLogger";
 import {
   Badge,
@@ -41,6 +41,7 @@ import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_votin
 import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
 import { Vote_funCreateHasil } from "../../fun/create/create_hasil";
 import { MODEL_VOTING } from "../../model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function Vote_MainDetail({
   userLoginId,
@@ -56,6 +57,8 @@ export default function Vote_MainDetail({
     null
   );
 
+  const [isLoading, setLoading] = useState(false);
+
   const [isKontributor, setIsKontributor] = useState<boolean | null>(null);
 
   useShallowEffect(() => {
@@ -128,6 +131,7 @@ export default function Vote_MainDetail({
 
   async function onVote() {
     try {
+      setLoading(true);
       const res = await Vote_funCreateHasil({
         pilihanVotingId: pilihanVotingId,
         votingId: params.id,
@@ -183,10 +187,12 @@ export default function Vote_MainDetail({
           }
         }
       } else {
+        setLoading(false);
         ComponentGlobal_NotifikasiPeringatan(res.message);
       }
     } catch (error) {
       clientLogger.error("Error vote", error);
+      setLoading(false);
       ComponentGlobal_NotifikasiGagal("Gagal melakukan voting");
     }
   }
@@ -247,6 +253,7 @@ export default function Vote_MainDetail({
                 </Stack>
               </Stack>
             </Stack>
+
             {isKontributor ? (
               <Stack
                 align="center"
@@ -258,7 +265,11 @@ export default function Vote_MainDetail({
                 <Text mb={"sm"} fw={"bold"} fz={"xs"}>
                   Pilihan anda:
                 </Text>
-                <Badge size="lg">{pilihanKontributor}</Badge>
+                {pilihanKontributor ? (
+                  <Badge size="lg">{pilihanKontributor}</Badge>
+                ) : (
+                  <CustomSkeleton height={30} width={70} radius="xl" />
+                )}
               </Stack>
             ) : (
               <Stack
@@ -308,6 +319,8 @@ export default function Vote_MainDetail({
 
                 <Center>
                   <Button
+                    loading={isLoading}
+                    loaderPosition="center"
                     style={{
                       transition: "all 0.3s ease-in-out",
                     }}
@@ -330,4 +343,4 @@ export default function Vote_MainDetail({
       </Stack>
     </>
   );
-}
+}