From db3994142fc147ae0f88b640121b49d4618e4e1b Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Tue, 25 Mar 2025 15:05:33 +0800 Subject: [PATCH] fix admin event - detail event publish --- src/app/api/admin/event/[id]/route.ts | 92 ++++++++++--------- src/app/dev/admin/event/[id]/page.tsx | 11 +++ .../event/_component/comp_detail_data.tsx | 74 +++++++++++++++ .../event/_component/comp_detail_publish.tsx | 67 ++++++++++++++ .../event/_component/detail_data_author.tsx | 74 --------------- .../admin/event/_ui/ui_new_detail.tsx | 68 ++++++++++++++ .../admin/event/_view/view_detail_peserta.tsx | 8 -- .../admin/event/_view/view_detail_publish.tsx | 48 ++++++++++ .../admin/event/detail/view_detail_data.tsx | 59 ------------ .../event/table_status/detail_publish.tsx | 18 ++-- .../event/table_status/table_publish.tsx | 89 +++++++++--------- src/lib/router_admin/router_admin_event.ts | 8 +- 12 files changed, 376 insertions(+), 240 deletions(-) create mode 100644 src/app/dev/admin/event/[id]/page.tsx create mode 100644 src/app_modules/admin/event/_component/comp_detail_data.tsx create mode 100644 src/app_modules/admin/event/_component/comp_detail_publish.tsx delete mode 100644 src/app_modules/admin/event/_component/detail_data_author.tsx create mode 100644 src/app_modules/admin/event/_ui/ui_new_detail.tsx create mode 100644 src/app_modules/admin/event/_view/view_detail_publish.tsx delete mode 100644 src/app_modules/admin/event/detail/view_detail_data.tsx diff --git a/src/app/api/admin/event/[id]/route.ts b/src/app/api/admin/event/[id]/route.ts index 986a0131..8a72e174 100644 --- a/src/app/api/admin/event/[id]/route.ts +++ b/src/app/api/admin/event/[id]/route.ts @@ -2,50 +2,54 @@ import backendLogger from "@/util/backendLogger"; import { NextResponse } from "next/server"; import prisma from "@/lib/prisma"; -export async function GET(req: Request, - { params }: { params: { id: string } }) { - - try { - const { id } = params; - const data = await prisma.event.findUnique({ - where: { - id: id +export async function GET( + req: Request, + { params }: { params: { id: string } } +) { + try { + const { id } = params; + const data = await prisma.event.findUnique({ + where: { + id: id, + }, + include: { + Author: { + select: { + username: true, + nomor: true, + Profile: { + select: { + name: true, + alamat: true, + }, }, - include: { - Author: { - select: { - username: true, - nomor: true, - Profile: { - select: { - name: true, - alamat: true - } - } - } - }, - EventMaster_TipeAcara: { - select: { - name: true - } - } - } - }) - return NextResponse.json({ - success: true, - message: "Success get data event detail", - data: data, + }, }, - { status: 200 } - ) - } catch (error) { - backendLogger.error("Error get data event detail >>", error); - return NextResponse.json({ - success: false, - message: "Error get data event detail", - reason: (error as Error).message + EventMaster_TipeAcara: { + select: { + name: true, + }, }, - { status: 500 } - ) - } -} \ No newline at end of file + EventMaster_Status: true, + }, + }); + return NextResponse.json( + { + success: true, + message: "Success get data event detail", + data: data, + }, + { status: 200 } + ); + } catch (error) { + backendLogger.error("Error get data event detail >>", error); + return NextResponse.json( + { + success: false, + message: "Error get data event detail", + reason: (error as Error).message, + }, + { status: 500 } + ); + } +} diff --git a/src/app/dev/admin/event/[id]/page.tsx b/src/app/dev/admin/event/[id]/page.tsx new file mode 100644 index 00000000..40905d23 --- /dev/null +++ b/src/app/dev/admin/event/[id]/page.tsx @@ -0,0 +1,11 @@ +import { AdminEvent_UiNewDetail } from "@/app_modules/admin/event/_ui/ui_new_detail"; + +async function Page() { + return ( + <> + + + ); +} + +export default Page; diff --git a/src/app_modules/admin/event/_component/comp_detail_data.tsx b/src/app_modules/admin/event/_component/comp_detail_data.tsx new file mode 100644 index 00000000..2ee0af77 --- /dev/null +++ b/src/app_modules/admin/event/_component/comp_detail_data.tsx @@ -0,0 +1,74 @@ +import { MODEL_EVENT } from "@/app_modules/event/_lib/interface"; +import { Badge, Grid, Stack, Text } from "@mantine/core"; +import moment from "moment"; +import "moment/locale/id"; +import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle"; + +function AdminEvent_ComponentDetailData({ + data, +}: { + data: MODEL_EVENT | null; +}) { + const listData = [ + { + label: "Nama", + value: data?.Author.Profile.name, + }, + { + label: "Username", + value: data?.Author.username, + }, + { + label: "Nomor", + value: `+ ${data?.Author.nomor}`, + }, + { + label: "Status", + value: {data?.EventMaster_Status.name}, + }, + { + label: "Judul", + value: data?.title, + }, + { + label: "Lokasi", + value: data?.lokasi, + }, + { + label: "Tipe acara", + value: data?.EventMaster_TipeAcara.name, + }, + { + label: "Tanggal & Waktu mulai", + value: moment(data?.tanggal).format("LLLL"), + }, + { + label: "Tanggal & Waktu selesai", + value: moment(data?.tanggalSelesai).format("LLLL"), + }, + { + label: "Deskripsi", + value: data?.deskripsi, + }, + ]; + + return ( + <> + {listData.map((item, index) => ( + + + {item.label} + + + : + + + {item.value} + + + ))} + + ); +} + +export default AdminEvent_ComponentDetailData; diff --git a/src/app_modules/admin/event/_component/comp_detail_publish.tsx b/src/app_modules/admin/event/_component/comp_detail_publish.tsx new file mode 100644 index 00000000..1f5e17de --- /dev/null +++ b/src/app_modules/admin/event/_component/comp_detail_publish.tsx @@ -0,0 +1,67 @@ +import { MODEL_EVENT } from "@/app_modules/event/_lib/interface"; +import { Button, Grid, Stack, Text } from "@mantine/core"; +import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle"; +import AdminEvent_ComponentDetailData from "./comp_detail_data"; +import QRCode from "react-qr-code"; + +function AdminEvent_ComponentDetailPublish({ data }: { data: MODEL_EVENT }) { + const handleDownloadQR = () => { + const svg: any = document.getElementById(data.id); + const svgData = new XMLSerializer().serializeToString(svg); + const canvas = document.createElement("canvas"); + const ctx: any = canvas.getContext("2d"); + const img = new Image(); + img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0); + const pngFile = canvas.toDataURL("image/png"); + const downloadLink = document.createElement("a"); + downloadLink.download = `QRCode ${data.title}`; + downloadLink.href = `${pngFile}`; + downloadLink.click(); + }; + img.src = `data:image/svg+xml;base64,${btoa(svgData)}`; + }; + + const donwloadButton = () => { + return ( + <> + + + QR Code + + + : + + + {/* */} + + + + + ); + }; + + return ( + <> + + + + + + {donwloadButton()} + + + + + {/* */} + + ); +} + +export default AdminEvent_ComponentDetailPublish; diff --git a/src/app_modules/admin/event/_component/detail_data_author.tsx b/src/app_modules/admin/event/_component/detail_data_author.tsx deleted file mode 100644 index 555448dc..00000000 --- a/src/app_modules/admin/event/_component/detail_data_author.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { AdminColor } from '@/app_modules/_global/color/color_pallet'; -import CustomSkeleton from '@/app_modules/components/CustomSkeleton'; -import { MODEL_EVENT } from '@/app_modules/event/_lib/interface'; -import { Grid, Paper, Stack, Text, Title } from '@mantine/core'; -import React from 'react'; - -function ComponentEvent_DetailDataAuthor({ data }: { data: MODEL_EVENT | null }) { - return ( - <> - {/* {!data ? ( - - ) : ( - - )} */} - - - Data User - - - - Nama: - - - {data ? - {data?.Author?.Profile?.name} - : - - } - - - - - Username: - - - {data ? - {data?.Author?.username} - : - - } - - - - - Nomor: - - - {data ? - {data?.Author?.nomor} - : - - } - - - - - Alamat: - - - {data ? - {data?.Author?.Profile?.alamat} - : - - } - - - - - - - ); -} - -export default ComponentEvent_DetailDataAuthor; diff --git a/src/app_modules/admin/event/_ui/ui_new_detail.tsx b/src/app_modules/admin/event/_ui/ui_new_detail.tsx new file mode 100644 index 00000000..8613c126 --- /dev/null +++ b/src/app_modules/admin/event/_ui/ui_new_detail.tsx @@ -0,0 +1,68 @@ +"use client"; + +import { MODEL_EVENT } from "@/app_modules/event/_lib/interface"; +import { clientLogger } from "@/util/clientLogger"; +import { SimpleGrid, Stack } from "@mantine/core"; +import { useShallowEffect } from "@mantine/hooks"; +import { useParams } from "next/navigation"; +import { useState } from "react"; +import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button"; +import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate"; +import { apiGetAdminDetailEventById } from "../_lib/api_fecth_admin_event"; +import CustomSkeleton from "@/app_modules/components/CustomSkeleton"; +import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data"; +import { AdminEvent_ViewDetailPublish } from "../_view/view_detail_publish"; + +export function AdminEvent_UiNewDetail() { + const params = useParams<{ id: string }>(); + const [loading, setLoading] = useState(true); + const [data, setData] = useState(); + + useShallowEffect(() => { + getDetailData(); + }, []); + async function getDetailData() { + try { + setLoading(true); + const response = await apiGetAdminDetailEventById({ + id: params.id, + }); + + if (response?.success && response?.data) { + console.log("res >>", response.data); + setData(response.data); + } else { + console.error("Invalid data format received:", response); + setData(null); + } + } catch (error) { + clientLogger.error("Error get data table detail publish", error); + setData(null); + } + } + + return ( + <> + + + + + {data === undefined ? ( + + + + ) : !data ? ( + + ) : data.EventMaster_Status.name === "Publish" ? ( + + ) : data.EventMaster_Status.name === "Review" ? ( + "Detail Review" + ) : data.EventMaster_Status.name === "Reject" ? ( + "Detail Reject" + ) : ( + "" + )} + + + ); +} diff --git a/src/app_modules/admin/event/_view/view_detail_peserta.tsx b/src/app_modules/admin/event/_view/view_detail_peserta.tsx index eb634265..80b33ad4 100644 --- a/src/app_modules/admin/event/_view/view_detail_peserta.tsx +++ b/src/app_modules/admin/event/_view/view_detail_peserta.tsx @@ -158,14 +158,6 @@ export function AdminEvent_ViewDetailPeserta() { {renderTableBody()} - {_.isEmpty(data) ? ( - - ) : ( - "" - )}
diff --git a/src/app_modules/admin/event/_view/view_detail_publish.tsx b/src/app_modules/admin/event/_view/view_detail_publish.tsx new file mode 100644 index 00000000..74110f29 --- /dev/null +++ b/src/app_modules/admin/event/_view/view_detail_publish.tsx @@ -0,0 +1,48 @@ +import { MODEL_EVENT } from "@/app_modules/event/_lib/interface"; +import { IconCircleCheck } from "@tabler/icons-react"; +import { useAtom } from "jotai"; +import { gs_admin_event_menu_publish } from "../_lib/global_state"; +import { Stack, Group, Button } from "@mantine/core"; +import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button"; +import AdminEvent_ComponentDetailPublish from "../_component/comp_detail_publish"; +import { AdminEvent_ViewDetailPeserta } from "./view_detail_peserta"; + +export function AdminEvent_ViewDetailPublish({ data }: { data: MODEL_EVENT }) { + const [selectPage, setSelectPage] = useAtom(gs_admin_event_menu_publish); + const listPage = [ + { + id: "1", + name: "Detail Event", + icon: , + }, + { + id: "2", + name: "Daftar Peserta", + icon: , + }, + ]; + + return ( + <> + + + {listPage.map((e) => ( + + ))} + + {selectPage == "1" && } + {selectPage == "2" && } + + + ); +} diff --git a/src/app_modules/admin/event/detail/view_detail_data.tsx b/src/app_modules/admin/event/detail/view_detail_data.tsx deleted file mode 100644 index 18859c8a..00000000 --- a/src/app_modules/admin/event/detail/view_detail_data.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { SimpleGrid } from '@mantine/core'; -import React, { useState } from 'react'; -import ComponentEvent_DetailDataAuthor from '../_component/detail_data_author'; -import ComponentEvent_DetailDataEvent from '../_component/detail_data_event'; -import { useParams } from 'next/navigation'; -import { apiGetAdminDetailEventById } from '../_lib/api_fecth_admin_event'; -import { MODEL_EVENT } from '@/app_modules/event/_lib/interface'; -import { clientLogger } from '@/util/clientLogger'; -import { useShallowEffect } from '@mantine/hooks'; - -function AdminEvent_ViewDetailData({ }) { - const params = useParams<{ id: string }>(); - const [loading, setLoading] = useState(true); - const [data, setData] = useState(null); - - useShallowEffect(() => { - getDetailData(); - }, []) - async function getDetailData() { - try { - setLoading(true); - const response = await apiGetAdminDetailEventById({ - id: params.id, - }) - - if (response?.success && response?.data) { - setTimeout(() => { - setData(response.data); - }, 1000) - } else { - console.error("Invalid data format received:", response); - setData(null); - } - } catch (error) { - clientLogger.error("Error get data table detail publish", error); - setData(null); - } - } - return ( - <> - - {/* //Data Author */} - - - {/* Data Event */} - - - - - ); -} - -export default AdminEvent_ViewDetailData; diff --git a/src/app_modules/admin/event/table_status/detail_publish.tsx b/src/app_modules/admin/event/table_status/detail_publish.tsx index 2fd2e3eb..427b21b4 100644 --- a/src/app_modules/admin/event/table_status/detail_publish.tsx +++ b/src/app_modules/admin/event/table_status/detail_publish.tsx @@ -6,7 +6,7 @@ import { IconCircleCheck } from '@tabler/icons-react'; import { Button, Group, Stack } from '@mantine/core'; import AdminGlobal_ComponentBackButton from '../../_admin_global/back_button'; import { AdminEvent_ViewDetailPeserta } from '../_view'; -import AdminEvent_ViewDetailData from '../detail/view_detail_data'; +import AdminEvent_ComponentDetailPublish from '../_component/comp_detail_publish'; import AdminEvent_DetailDataSponsor from '../_component/detail_data_sponsor'; function AdminEvent_DetailPublish() { @@ -22,11 +22,11 @@ function AdminEvent_DetailPublish() { name: "Daftar Peserta", icon: , }, - { - id: "3", - name: "Daftar Sponsor", - icon: , - } + // { + // id: "3", + // name: "Daftar Sponsor", + // icon: , + // } ] return ( <> @@ -50,14 +50,14 @@ function AdminEvent_DetailPublish() { ))} {selectPage == "1" ? ( - + ) : null} {selectPage == "2" ? ( ) : null} - {selectPage == "3" ? ( + {/* {selectPage == "3" ? ( - ) : null} + ) : null} */} ); diff --git a/src/app_modules/admin/event/table_status/table_publish.tsx b/src/app_modules/admin/event/table_status/table_publish.tsx index a75ec0f1..15eba63d 100644 --- a/src/app_modules/admin/event/table_status/table_publish.tsx +++ b/src/app_modules/admin/event/table_status/table_publish.tsx @@ -6,6 +6,7 @@ import CustomSkeleton from "@/app_modules/components/CustomSkeleton"; import { MODEL_EVENT } from "@/app_modules/event/_lib/interface"; import { clientLogger } from "@/util/clientLogger"; import { + Box, Button, Center, Pagination, @@ -18,13 +19,14 @@ import { TextInput, } from "@mantine/core"; import { useShallowEffect } from "@mantine/hooks"; -import { IconEyeCheck, IconSearch } from "@tabler/icons-react"; +import { IconDownload, IconEyeCheck, IconSearch } from "@tabler/icons-react"; import { useRouter } from "next/navigation"; import { useState } from "react"; import QRCode from "react-qr-code"; import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component"; import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate"; import { AdminColor } from "@/app_modules/_global/color/color_pallet"; +import Admin_DetailButton from "../../_admin_global/_component/button/detail_button"; export default function AdminEvent_TablePublish() { return ( @@ -119,33 +121,31 @@ function TableStatus() { return data.map((e, i) => ( - -
+ {/* +
- + */} + -
- +
+ + {e?.Author?.username} dasdsasdasdsa sadasd +
-
- {e?.Author?.username} +
+ + {e.title} +
- -
- {e.title} -
- - + {/*
{e.lokasi}
@@ -154,10 +154,10 @@ function TableStatus() {
{e.EventMaster_TipeAcara?.name}
- + */} -
+
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full", @@ -172,7 +172,7 @@ function TableStatus() {
-
+
{new Intl.DateTimeFormat("id-ID", { dateStyle: "full", @@ -187,7 +187,7 @@ function TableStatus() {
- + {/*
- + */} - + {/* + */} + + +
+ +
+ + + +
+ +
)); @@ -241,40 +261,25 @@ function TableStatus() { ) : ( - +
- - - -
-
QR Code
- 		-
Download QR
-
Username
Judul
 -
Lokasi
- 		-
Tipe Acara
-
Tanggal & Waktu Mulai
 -
Tanggal & Waktu Selesai
+
+ Tanggal & Waktu Selesai +
-
Deskripsi
+
QR Code
Aksi
diff --git a/src/lib/router_admin/router_admin_event.ts b/src/lib/router_admin/router_admin_event.ts index 8056b233..c9a54d20 100644 --- a/src/lib/router_admin/router_admin_event.ts +++ b/src/lib/router_admin/router_admin_event.ts @@ -3,7 +3,10 @@ export const RouterAdminEvent = { // detail detail_peserta: "/dev/admin/event/detail/peserta/", - detail_publish: "/dev/admin/event/detail/publish/", + detail_publish: ({ id }: { id: string }) => + `/dev/admin/event/detail/publish/${id}`, + new_detail: ({ id }: { id: string }) => + `/dev/admin/event/${id}`, detail_sponsor: "/dev/admin/event/detail/detail_sponsor/", // child @@ -14,7 +17,4 @@ export const RouterAdminEvent = { table_review: "/dev/admin/event/table/review", table_publish: "/dev/admin/event/table/publish", table_reject: "/dev/admin/event/table/reject", - - - };