fix ( event )

deskripsi:
- fix tampilan sponsor event

package.json

@@ -69,6 +69,7 @@
     "next": "^13.5.4-canary.8",
     "next-dev": "^1.1.9",
     "next-scroll-loader": "^1.0.9",
+    "p-limit": "^6.2.0",
     "pdfjs-dist": "^4.6.82",
     "postcss": "8.4.27",
     "prisma": "^5.19.1",

prisma/schema.prisma

@@ -972,8 +972,8 @@ model EventSponsor {
   fileExt    String?
   fileId     String
 
-  Author   User?   @relation(fields: [auhtorId], references: [id])
-  auhtorId String?
+  Author   User?   @relation(fields: [authorId], references: [id])
+  authorId String?
 
   Event   Event?  @relation(fields: [eventId], references: [id])
   eventId String?

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

@@ -1,6 +1,7 @@
 import { prisma } from "@/app/lib";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { IEventSponsor } from "@/app_modules/event/_lib/interface";
+import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
 export async function POST(
@@ -36,18 +37,70 @@ export async function POST(
         fileName: req.fileName as string,
         fileExt: req.fileExt as string,
         fileId: req.fileId as string,
-        auhtorId: userLoginId,
+        authorId: userLoginId,
       },
     });
 
+    await prisma.$disconnect();
     return NextResponse.json({
       success: true,
       message: "Success create sponsor",
     });
   } catch (error) {
+    await prisma.$disconnect();
+    backendLogger.error("Error create sponsor event", error);
     return NextResponse.json(
       { success: false, message: "Failed create sponsor" },
       { status: 500 }
     );
   }
 }
+
+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.eventSponsor.findUnique({
+      where: {
+        id: id,
+      },
+      include: {
+        Author: {
+          include: {
+            Profile: true,
+          },
+        },
+      },
+    });
+
+    await prisma.$disconnect();
+    return NextResponse.json({
+      success: true,
+      message: "Success create sponsor",
+      data: fixData,
+    });
+  } catch (error) {
+    backendLogger.error("Error get sponsor event", error);
+    await prisma.$disconnect();
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Failed create sponsor",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,79 @@
+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;
+
+    if (!page) {
+      fixData = await prisma.eventSponsor.findMany({
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          eventId: id,
+        },
+        include: {
+          Author: {
+            include: {
+              Profile: true,
+            },
+          },
+        },
+      });
+    } else {
+      fixData = await prisma.eventSponsor.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          eventId: id,
+        },
+        include: {
+          Author: {
+            include: {
+              Profile: true,
+            },
+          },
+        },
+      });
+    }
+
+    await prisma.$disconnect();
+    return NextResponse.json({
+      success: true,
+      message: "Success create sponsor",
+      data: fixData,
+    });
+  } catch (error) {
+    backendLogger.error("Error get sponsor event", error);
+    await prisma.$disconnect();
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Failed create sponsor",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/event/detail/detail_sponsor/[id]/layout.tsx

@@ -1,10 +1,14 @@
+import { funGetUserIdByToken } from '@/app_modules/_global/fun/get';
 import LayoutEvent_DetailSponsor from '@/app_modules/event/detail/detail_sponsor/layout';
 import React from 'react';
 
-function Layout({children} : {children: React.ReactNode}) {
+async function Layout({children} : {children: React.ReactNode}) {
+  const userLoginId = await funGetUserIdByToken()
   return (
     <>
-      <LayoutEvent_DetailSponsor>{children}</LayoutEvent_DetailSponsor>
+      <LayoutEvent_DetailSponsor userLoginId={userLoginId}>
+        {children}
+      </LayoutEvent_DetailSponsor>
     </>
   );
 }

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

@@ -1,10 +1,12 @@
+import { funGetUserIdByToken } from '@/app_modules/_global/fun/get';
 import DetailSponsor_Event from '@/app_modules/event/detail/detail_sponsor';
 import React from 'react';
 
-function Page() {
+async function Page() {
+  const userLoginId = await funGetUserIdByToken();
   return (
     <>
-      <DetailSponsor_Event/>
+      <DetailSponsor_Event userLoginId={userLoginId} />
     </>
   );
 }

src/app_modules/_global/fun/generete_seeder.back.txt

@@ -0,0 +1,465 @@
+import prisma from "@/app/lib/prisma";
+import bidangBisnis from "../../../bin/seeder/bidang_bisnis.json";
+import collaboration_industri from "../../../bin/seeder/colab/master_industri.json";
+import collaboration_status from "../../../bin/seeder/colab/master_status.json";
+import donasi_namaBank from "../../../bin/seeder/donasi/master_bank.json";
+import donasi_durasi from "../../../bin/seeder/donasi/master_durasi.json";
+import donasi_kategori from "../../../bin/seeder/donasi/master_kategori.json";
+import donasi_status from "../../../bin/seeder/donasi/master_status.json";
+import donasi_status_invoice from "../../../bin/seeder/donasi/master_status_invoice.json";
+import event_status from "../../../bin/seeder/event/master_status.json";
+import event_tipe_acara from "../../../bin/seeder/event/master_tipe_acara.json";
+import forum_kategori_report from "../../../bin/seeder/forum/master_report.json";
+import forum_status_posting from "../../../bin/seeder/forum/master_status.json";
+import jenisProgres from "../../../bin/seeder/investasi/master_progres.json";
+import pembagianDeviden from "../../../bin/seeder/investasi/pembagian_deviden.json";
+import pencarianInvestor from "../../../bin/seeder/investasi/pencarian_investor.json";
+import periodeDeviden from "../../../bin/seeder/investasi/periode_deviden.json";
+import statusInvestasi from "../../../bin/seeder/investasi/status_investasi.json";
+import statusTransaksiInvestasi from "../../../bin/seeder/investasi/status_transaksi_investasi.json";
+import master_status from "../../../bin/seeder/master_status.json";
+import nomor_admin from "../../../bin/seeder/nomor_admin.json";
+import userRole from "../../../bin/seeder/user_role.json";
+import userSeeder from "../../../bin/seeder/user_seeder.json";
+import voting_status from "../../../bin/seeder/voting/master_status.json";
+import { master_kategori_app } from "@/bin/seeder/master";
+import { new_status_transaksi_investasi } from "@/bin/seeder/investasi";
+import { master_nama_bank } from "@/bin/seeder/master";
+import pLimit from "p-limit";
+
+// PAKEK p-limit
+
+async function masterUserRole() {
+  for (let i of userRole) {
+    await prisma.masterUserRole.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+  await new Promise((resolve) => setTimeout(resolve, 10000));
+  console.log("masterUserRole success");
+}
+
+async function user() {
+  for (let i of userSeeder) {
+    await prisma.user.upsert({
+      where: {
+        nomor: i.nomor,
+      },
+      create: {
+        nomor: i.nomor,
+        username: i.name,
+        masterUserRoleId: i.masterUserRoleId,
+        active: i.active,
+      },
+      update: {
+        nomor: i.nomor,
+        username: i.name,
+        masterUserRoleId: i.masterUserRoleId,
+        active: i.active,
+      },
+    });
+  }
+  console.log("user success");
+}
+
+const listAntrean = [masterUserRole, user];
+const limit = pLimit(1);
+
+(async () => {
+  console.log("start generate seeder");
+  await Promise.all(listAntrean.map((fn) => limit(fn)));
+  console.log("success generate seeder");
+})();
+
+export async function generate_seeder() {
+  for (let i of bidangBisnis) {
+    await prisma.masterBidangBisnis.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of pencarianInvestor) {
+    await prisma.masterPencarianInvestor.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of pembagianDeviden) {
+    await prisma.masterPembagianDeviden.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of periodeDeviden) {
+    await prisma.masterPeriodeDeviden.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+      create: {
+        id: i.id.toString(),
+        name: i.name,
+      },
+    });
+  }
+
+  for (let i of statusInvestasi) {
+    await prisma.masterStatusInvestasi.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+      update: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+    });
+  }
+
+  for (let i of master_nama_bank) {
+    await prisma.masterBank.upsert({
+      where: {
+        id: i.id.toString(),
+      },
+      create: {
+        id: i.id.toString(),
+        namaBank: i.namaBank,
+        namaAkun: i.namaAkun,
+        norek: i.norek.toString(),
+      },
+      update: {
+        id: i.id.toString(),
+        namaBank: i.namaBank,
+        namaAkun: i.namaAkun,
+        norek: i.norek.toString(),
+      },
+    });
+  }
+
+  for (let i of statusTransaksiInvestasi) {
+    await prisma.masterStatusTransaksiInvestasi.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+      update: {
+        id: i.id,
+        name: i.name,
+        color: i.color,
+      },
+    });
+  }
+
+  for (let i of jenisProgres) {
+    await prisma.masterProgresInvestasi.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+      },
+      update: {
+        name: i.name,
+      },
+    });
+  }
+
+  for (let d of donasi_status) {
+    await prisma.donasiMaster_StatusDonasi.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let d of donasi_kategori) {
+    await prisma.donasiMaster_Kategori.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let d of donasi_durasi) {
+    await prisma.donasiMaster_Durasi.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let i of donasi_namaBank) {
+    await prisma.donasiMaster_Bank.upsert({
+      where: {
+        id: i.id,
+      },
+      create: {
+        id: i.id,
+        name: i.name,
+        norek: i.norek,
+      },
+      update: {
+        id: i.id,
+        name: i.name,
+        norek: i.norek,
+      },
+    });
+  }
+
+  for (let d of donasi_status_invoice) {
+    await prisma.donasiMaster_StatusInvoice.upsert({
+      where: {
+        id: d.id,
+      },
+      create: {
+        id: d.id,
+        name: d.name,
+      },
+      update: {
+        name: d.name,
+      },
+    });
+  }
+
+  for (let e of event_status) {
+    await prisma.eventMaster_Status.upsert({
+      where: {
+        id: e.id,
+      },
+      create: {
+        id: e.id,
+        name: e.name,
+      },
+      update: {
+        name: e.name,
+      },
+    });
+  }
+
+  for (let e of event_tipe_acara) {
+    await prisma.eventMaster_TipeAcara.upsert({
+      where: {
+        id: e.id,
+      },
+      create: {
+        id: e.id,
+        name: e.name,
+      },
+      update: {
+        name: e.name,
+      },
+    });
+  }
+
+  for (let v of voting_status) {
+    await prisma.voting_Status.upsert({
+      where: {
+        id: v.id,
+      },
+      create: {
+        id: v.id,
+        name: v.name,
+      },
+      update: {
+        name: v.name,
+      },
+    });
+  }
+
+  for (let m of master_status) {
+    await prisma.masterStatus.upsert({
+      where: {
+        id: m.id,
+      },
+      create: {
+        id: m.id,
+        name: m.name,
+      },
+      update: {
+        name: m.name,
+      },
+    });
+  }
+
+  for (let m of forum_kategori_report) {
+    await prisma.forumMaster_KategoriReport.upsert({
+      where: {
+        id: m.id as number,
+      },
+      create: {
+        title: m.title,
+        deskripsi: m.deskripsi,
+      },
+      update: {
+        title: m.title,
+        deskripsi: m.deskripsi,
+      },
+    });
+  }
+
+  for (let s of forum_status_posting) {
+    await prisma.forumMaster_StatusPosting.upsert({
+      where: {
+        id: s.id,
+      },
+      create: {
+        status: s.status,
+      },
+      update: {
+        status: s.status,
+      },
+    });
+  }
+
+  for (let p of collaboration_industri) {
+    await prisma.projectCollaborationMaster_Industri.upsert({
+      where: {
+        id: p.id,
+      },
+      create: {
+        name: p.name,
+      },
+      update: {
+        name: p.name,
+      },
+    });
+  }
+
+  for (let p of collaboration_status) {
+    await prisma.projectCollaborationMaster_Status.upsert({
+      where: {
+        id: p.id,
+      },
+      create: {
+        name: p.name,
+      },
+      update: {
+        name: p.name,
+      },
+    });
+  }
+
+  for (let a of nomor_admin) {
+    await prisma.nomorAdmin.upsert({
+      where: {
+        id: a.id,
+      },
+      create: {
+        id: a.id,
+        nomor: a.nomor,
+      },
+      update: {
+        id: a.id,
+        nomor: a.nomor,
+      },
+    });
+  }
+
+  for (let a of master_kategori_app) {
+    await prisma.masterKategoriApp.upsert({
+      where: {
+        id: a.id,
+      },
+      create: {
+        id: a.id,
+        name: a.name,
+      },
+      update: {
+        id: a.id,
+        name: a.name,
+      },
+    });
+  }
+
+  for (let a of new_status_transaksi_investasi) {
+    await prisma.investasiMaster_StatusInvoice.upsert({
+      where: {
+        id: a.id,
+      },
+      create: {
+        id: a.id,
+        name: a.name,
+      },
+      update: {
+        id: a.id,
+        name: a.name,
+      },
+    });
+  }
+
+  return { status: 200, success: true };
+}

src/app_modules/event/_lib/api_event.ts

@@ -88,3 +88,43 @@ export const apiGetEventCreateSponsor = async ({
 
   return await response.json().catch(() => null);
 };
+
+export const apiGetEventSponsorListById = 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 isPage = page ? `?page=${page}` : "";
+
+  const response = await fetch(`/api/event/sponsor/list/${id}${isPage}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return await response.json().catch(() => null);
+};
+
+export const apiGetOneSponsorEventById = 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/sponsor/${id}`, {
+    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/_lib/interface.ts

@@ -40,6 +40,7 @@ export interface IEventSponsor {
   createdAt?: Date;
   updatedAt?: Date;
   name?: string;
+  isTransfer?: boolean;
   fileName?: string;
   fileExt?: string;
   fileId?: string;

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

@@ -1,51 +1,99 @@
-'use client'
-import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
-import { AccentColor, MainColor } from '@/app_modules/_global/color';
-import { Avatar, Box, Card, Flex, Group, Image, Text } from '@mantine/core';
-import { useParams, useRouter } from 'next/navigation';
+"use client";
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import {
+  Box,
+  Divider,
+  Grid,
+  Stack,
+  Title
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
-function ComponentEvent_ListSponsor({ backgroundColor, border, marginBottom, height, color,  }:
-    {
-        backgroundColor?: string;
-        border?: string;
-        marginBottom?: string | number;
-        height?: string | number;
-        color?: string;
-    })
-    {
-    const router = useRouter();
-    const params = useParams<{ id: string }>();
-    return (
-        <>
-            <Box>
-                <Card
-                    style={{
-                        backgroundColor: backgroundColor
-                            ? backgroundColor
-                            : AccentColor.darkblue,
-                        border: `2px solid ${border ? border : AccentColor.blue}`,
-                        paddingInline: "16px",
-                        paddingBlock: "16px",
-                        borderRadius: "10px",
-                        color: color ? color : MainColor.white,
-                        height: height ? height : "auto",
-                        marginBottom: marginBottom ? marginBottom : "15px",                       
-                    }}
-                    onClick={() => router.push(RouterEvent.detail_sponsor({id: params.id}))}
-                >
-                    <Flex gap={"md"} align={"center"} justify={"space-between"}>
-                        <Group>
-                            <Avatar radius={"xl"} size={40}>
-                                <Image src={"https://images.app.goo.gl/C7WDoF9X52HC5SJX9"} alt='' />
-                            </Avatar>
-                            <Text fz={"md"}>INACO</Text>
-                        </Group>
-                        <Text style={{color: 'white'}}>Rp. 100.000</Text>
-                    </Flex>
-                </Card>
-            </Box>
-        </>
-    );
+function ComponentEvent_ListSponsor({
+  backgroundColor,
+  border,
+  marginBottom,
+  height,
+  color,
+  profile,
+  data,
+}: {
+  backgroundColor?: string;
+  border?: string;
+  marginBottom?: string | number;
+  height?: string | number;
+  color?: string;
+  profile: any;
+  data: any;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <ComponentGlobal_CardStyles>
+        <Stack>
+          <Grid>
+            <Grid.Col span={"auto"}>
+              <ComponentGlobal_AvatarAndUsername profile={profile} />
+            </Grid.Col>
+          </Grid>
+          <Divider />
+
+          <Box
+            p={"md"}
+            onClick={() => {
+              router.push(RouterEvent.detail_sponsor({ id: data.id }));
+              setVisible(true);
+            }}
+          >
+            <Title align="center" order={2}>
+              {data?.name}
+            </Title>
+          </Box>
+        </Stack>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
+      </ComponentGlobal_CardStyles>
+      {/* <Box>
+        <Card
+          style={{
+            backgroundColor: backgroundColor
+              ? backgroundColor
+              : AccentColor.darkblue,
+            border: `2px solid ${border ? border : AccentColor.blue}`,
+            paddingInline: "16px",
+            paddingBlock: "16px",
+            borderRadius: "10px",
+            color: color ? color : MainColor.white,
+            height: height ? height : "auto",
+            marginBottom: marginBottom ? marginBottom : "15px",
+          }}
+          onClick={() =>
+            router.push(RouterEvent.detail_sponsor({ id: params.id }))
+          }
+        >
+          <Flex gap={"md"} align={"center"} justify={"space-between"}>
+            <Group>
+              <Avatar radius={"xl"} size={40}>
+                <Image
+                  src={"https://images.app.goo.gl/C7WDoF9X52HC5SJX9"}
+                  alt=""
+                />
+              </Avatar>
+              <Text fz={"md"}>INACO</Text>
+            </Group>
+            <Text style={{ color: "white" }}>Rp. 100.000</Text>
+          </Flex>
+        </Card>
+      </Box> */}
+    </>
+  );
 }
 
 export default ComponentEvent_ListSponsor;

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

@@ -1,16 +1,69 @@
-'use client';
-import { AccentColor, MainColor } from '@/app_modules/_global/color';
-import { ComponentGlobal_CardStyles } from '@/app_modules/_global/component';
-import { Box, Flex, Image, Stack, Text, Title } from '@mantine/core';
-import { IconBrandWhatsapp } from '@tabler/icons-react';
-import React from 'react';
-import { TfiFacebook } from 'react-icons/tfi';
+"use client";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import {
+  Box,
+  Button,
+  Center,
+  Divider,
+  Flex,
+  Grid,
+  Image,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconBrandWhatsapp } from "@tabler/icons-react";
+import React, { useState } from "react";
+import { TfiFacebook } from "react-icons/tfi";
+import { apiGetOneSponsorEventById } from "../../_lib/api_event";
+import { useParams, useRouter } from "next/navigation";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { IEventSponsor } from "../../_lib/interface";
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+
+function DetailSponsor_Event({ userLoginId }: { userLoginId: string }) {
+  const params = useParams<{ id: string }>();
+  const router = useRouter();
+  const [data, setData] = useState<IEventSponsor | null>(null);
+  const [isLoadingTransfer, setIsLoadingTransfer] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneSponsorEventById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data sponsor", error);
+    }
+  }
+
+  if (!data) {
+    return (
+      <>
+        <CustomSkeleton height={200} width={"100%"} />
+      </>
+    );
+  }
 
-function DetailSponsor_Event() {
   return (
     <>
-      <Stack pb={"lg"}>
-        <Stack
+      <Stack spacing={"lg"}>
+        {/* <Stack
           spacing={0}
           style={{
             padding: "15px",
@@ -25,27 +78,82 @@ function DetailSponsor_Event() {
           <Title order={4} c={MainColor.yellow}>
             Rp. 100.000
           </Title>
-        </Stack>
-        <ComponentGlobal_CardStyles>
+        </Stack> */}
+
+        {/* <ComponentGlobal_CardStyles>
           <Stack>
-            <Image src={"https://job-portal.niramasutama.com/images/Banner-INACO.png"} alt='' />
-            <Flex justify={"space-between"} >
+            <Image
+              src={
+                "https://job-portal.niramasutama.com/images/Banner-INACO.png"
+              }
+              alt=""
+            />
+            <Flex justify={"space-between"}>
               <Box>
                 <Title order={4}>INACO</Title>
               </Box>
               <Box>
                 <Title order={4}>Sosial Media:</Title>
                 <Flex align={"center"} gap={"sm"}>
-                  <TfiFacebook size={10}/>
+                  <TfiFacebook size={10} />
                   <Text fz={"sm"}>InacoJellyku</Text>
                 </Flex>
                 <Flex align={"center"} gap={"sm"}>
-                  <IconBrandWhatsapp size={10}/>
+                  <IconBrandWhatsapp size={10} />
                   <Text fz={"sm"}>+6289647038426</Text>
                 </Flex>
               </Box>
             </Flex>
           </Stack>
+        </ComponentGlobal_CardStyles> */}
+
+        <ComponentGlobal_CardStyles>
+          <Stack>
+            <ComponentGlobal_AvatarAndUsername
+              profile={data?.Author?.Profile as any}
+            />
+
+            <Divider />
+
+            <Grid>
+              <Grid.Col span={4} fw={"bold"}>
+                Nama Sponsor
+              </Grid.Col>
+              <Grid.Col span={1}>:</Grid.Col>
+              <Grid.Col span={7}>{data.name}</Grid.Col>
+            </Grid>
+
+            <Grid>
+              <Grid.Col span={4} fw={"bold"}>
+                Nominal
+              </Grid.Col>
+              <Grid.Col span={1}>:</Grid.Col>
+              <Grid.Col span={7}> Rp. {data.isTransfer ? 0 : "-"} </Grid.Col>
+            </Grid>
+
+            {userLoginId == data.authorId && (
+              <SimpleGrid cols={2} mt={"xl"}>
+                <Button
+                  loaderPosition="center"
+                  loading={isLoadingTransfer}
+                  radius={"xl"}
+                  onClick={() => {
+                    try {
+                      setIsLoadingTransfer(true);
+                      router.push(
+                        RouterEvent.nominal_sponsor({ id: params.id })
+                      );
+                    } catch (error) {
+                      console.log(error);
+                    }
+                  }}
+                >
+                  Selesaikan Transaksi
+                </Button>
+                <Button radius={"xl"}>Tampilkan Logo</Button>
+              </SimpleGrid>
+            )}
+          </Stack>
         </ComponentGlobal_CardStyles>
       </Stack>
     </>

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

@@ -1,21 +1,83 @@
-'use client';
-import { AccentColor, MainColor } from '@/app_modules/_global/color';
-import { UIGlobal_DrawerCustom, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate, UIGlobal_Modal } from '@/app_modules/_global/ui';
-import { ActionIcon, Box, Button, Center, Flex, Stack, Text } from '@mantine/core';
-import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';
-import React, { useState } from 'react';
+"use client";
 
-function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode }) {
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import {
+  UIGlobal_DrawerCustom,
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+  UIGlobal_Modal,
+} from "@/app_modules/_global/ui";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Center,
+  Flex,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
+import React, { useState } from "react";
+import { apiGetOneSponsorEventById } from "../../_lib/api_event";
+import { useParams } from "next/navigation";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+
+function LayoutEvent_DetailSponsor({
+  children,
+  userLoginId,
+}: {
+  children: React.ReactNode;
+  userLoginId: string;
+}) {
+  const params = useParams<{ id: string }>();
+  const [authorId, setAuthorId] = useState<string | null>(null);
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openModal, setOpenModal] = useState(false);
   const [isLoading, setLoading] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneSponsorEventById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setAuthorId(respone.data.authorId);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data sponsor", error);
+    }
+  }
+
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Sponsor"
-        customButtonRight={
-          <ActionIcon variant='transparent' onClick={() => setOpenDrawer(true)}>
-            <IconDotsVertical color='white' />
-          </ActionIcon>} />}>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Sponsor"
+            customButtonRight={
+              !authorId ? (
+                <CustomSkeleton circle height={30} width={30} />
+              ) : authorId == userLoginId ? (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => setOpenDrawer(true)}
+                >
+                  <IconDotsVertical color="white" />
+                </ActionIcon>
+              ) : (
+                ""
+              )
+            }
+          />
+        }
+      >
         {children}
       </UIGlobal_LayoutTamplate>
       <UIGlobal_DrawerCustom
@@ -25,12 +87,8 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
           <Stack align="center" spacing={"xs"}>
             <Flex gap={200} justify={"space-between"}>
               <Box>
-                <ActionIcon
-                  variant="transparent"
-                  c={MainColor.white}
-                >
+                <ActionIcon variant="transparent" c={MainColor.white}>
                   <IconEdit />
-
                 </ActionIcon>
                 <Text fz={"sm"} align="center" color={MainColor.white}>
                   Edit
@@ -44,7 +102,6 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
                     onClick={() => setOpenModal(true)}
                   >
                     <IconTrash />
-
                   </ActionIcon>
                 </Center>
                 <Text fz={"sm"} ta={"center"} color={MainColor.white}>
@@ -60,7 +117,12 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
         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>
         }
@@ -71,7 +133,6 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
             loading={isLoading ? true : false}
             radius={"xl"}
             c={AccentColor.white}
-
           >
             Hapus
           </Button>

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

@@ -1,10 +1,97 @@
-'use client';
-import ComponentEvent_ListSponsor from '../../component/detail/list_sponsor';
+"use client";
+import { useParams } from "next/navigation";
+import ComponentEvent_ListSponsor from "../../component/detail/list_sponsor";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetEventSponsorListById } from "../../_lib/api_event";
+import { IEventSponsor, MODEL_EVENT } from "../../_lib/interface";
+import { Component, useState } from "react";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentDonasi_CardInvoice } from "@/app_modules/donasi/component/card_view/card_invoice";
+import { donasi_funGetAllInvoiceByAuthorId } from "@/app_modules/donasi/fun/get/get_all_invoice_by_author_id";
+import { Box, Center, Stack } from "@mantine/core";
+import _ from "lodash";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 function Event_DaftarSponsor() {
+  const params = useParams<{ id: string }>();
+  const eventId = params.id;
+  const [data, setData] = useState<IEventSponsor[] | null>(null);
+  const [activePage, setActivePage] = useState(1);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetEventSponsorListById({
+        id: eventId,
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data sponsor", error);
+    }
+  }
+
+  if (!data) {
+    return (
+      <>
+        <Stack spacing={0}>
+          <CustomSkeleton height={100} width={"100%"} />;
+          <CustomSkeleton height={100} width={"100%"} />;
+        </Stack>
+      </>
+    );
+  }
+
   return (
     <>
-      <ComponentEvent_ListSponsor/>
+      {/* <ComponentEvent_ListSponsor /> */}
+      <Box>
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          <ScrollOnly
+            height="82vh"
+            renderLoading={() => (
+              <Center>
+                <ComponentGlobal_Loader size={25} />
+              </Center>
+            )}
+            data={data}
+            setData={setData as any}
+            moreData={async () => {
+              try {
+                const respone = await apiGetEventSponsorListById({
+                  id: eventId,
+                  page: `${activePage + 1}`,
+                });
+
+                if (respone) {
+                  setActivePage((val) => val + 1);
+                  return respone.data;
+                }
+              } catch (error) {
+                clientLogger.error("Error get data sponsor", error);
+              }
+            }}
+          >
+            {(item) => (
+              <ComponentEvent_ListSponsor
+                profile={item?.Author?.Profile}
+                data={item}
+              />
+            )}
+          </ScrollOnly>
+        )}
+      </Box>
     </>
   );
 }

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

@@ -5,16 +5,43 @@ import {
   UIGlobal_LayoutHeaderTamplate,
   UIGlobal_LayoutTamplate,
 } from "@/app_modules/_global/ui";
+import { clientLogger } from "@/util/clientLogger";
 import { ActionIcon } from "@mantine/core";
-import { IconDotsVertical } from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCirclePlus, IconDotsVertical } from "@tabler/icons-react";
 import { useParams } from "next/navigation";
 import React, { useState } from "react";
-import { TfiCup } from "react-icons/tfi";
+import { apiGetEventDetailById } from "../../_lib/api_event";
+import { MODEL_EVENT } from "../../_lib/interface";
+import moment from "moment";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 function LayoutEvent_Sponsor({ children }: { children: React.ReactNode }) {
   const params = useParams<{ id: string }>();
-
+  const eventId = params.id as string;
+  const [data, setData] = useState<MODEL_EVENT | null>(null);
   const [openDrawer, setOpenDrawer] = useState(false);
+
+  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);
+    }
+  }
+
+  const isExpired = moment(data?.tanggalSelesai).diff(moment(), "minutes") < 0;
+
   return (
     <>
       <UIGlobal_LayoutTamplate
@@ -22,12 +49,18 @@ function LayoutEvent_Sponsor({ children }: { children: React.ReactNode }) {
           <UIGlobal_LayoutHeaderTamplate
             title="Daftar Sponsor"
             customButtonRight={
-              <ActionIcon
-                variant="transparent"
-                onClick={() => setOpenDrawer(true)}
-              >
-                <IconDotsVertical color="white" />
-              </ActionIcon>
+              !data ? (
+                <CustomSkeleton height={30} width={30} circle />
+              ) : !isExpired ? (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => setOpenDrawer(true)}
+                >
+                  <IconDotsVertical color="white" />
+                </ActionIcon>
+              ) : (
+                ""
+              )
             }
           />
         }
@@ -41,7 +74,7 @@ function LayoutEvent_Sponsor({ children }: { children: React.ReactNode }) {
           {
             id: 1,
             name: "Tambah Sponsor",
-            icon: <TfiCup />,
+            icon: <IconCirclePlus />,
             path: RouterEvent.tambah_sponsor({ id: params.id }),
           },
         ]}