fix ui event

This commit is contained in:
2025-03-12 15:15:55 +08:00
parent 8993ecb846
commit 84b1339fb0
22 changed files with 648 additions and 380 deletions

View File

@@ -1,28 +1,30 @@
"use client";
import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
import { RouterEvent } from "@/lib/router_hipmi/router_event";
import { MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
} from "@/app_modules/_global/notif_global";
import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
import UI_NewLayoutTamplate, {
UI_NewChildren,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
import { RouterEvent } from "@/lib/router_hipmi/router_event";
import { clientLogger } from "@/util/clientLogger";
import { Button, Center, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import moment from "moment";
import "moment/locale/id";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { apiGetEventDetailById } from "../_lib/api_event";
import { MODEL_EVENT } from "../_lib/interface";
import { event_funUpdateKehadiran } from "../fun";
import { Event_funJoinAndConfirmEvent } from "../fun/create/fun_join_and_confirm";
import { gs_event_hotMenu } from "../global_state";
import { MODEL_EVENT } from "../_lib/interface";
import { Event_funJoinEvent } from "../fun/create/fun_join_event";
import "moment/locale/id";
import { apiGetEventDetailById } from "../_lib/api_event";
import { clientLogger } from "@/util/clientLogger";
import { gs_event_hotMenu } from "../global_state";
export default function Ui_Konfirmasi({
userLoginId,
@@ -83,15 +85,17 @@ export default function Ui_Konfirmasi({
const data = await res.json();
setIsPresent(data);
}
console.log("Peserta >", isPresent)
// =========== CEK KEHADIRAN ===========//
// Jika data kosong
if (data == null && isPresent == null) {
if (!data && !isPresent) {
return <SkeletonIsDataNull />;
}
// Jika data tidak ada
if (data == null) {
if (!data) {
return (
<>
<DataNotFound />
@@ -173,32 +177,34 @@ function DataNotFound() {
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack>
<Text fw={"bold"} align="center">
Data Event Tidak Ditemukan
</Text>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack>
<Text fw={"bold"} align="center">
Data Event Tidak Ditemukan
</Text>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Kembali Ke Beranda
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Kembali Ke Beranda
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}
@@ -206,20 +212,22 @@ function DataNotFound() {
function SkeletonIsDataNull() {
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack>
<Skeleton height={20} width={"100%"} radius={"xl"} />{" "}
<Skeleton height={20} width={"100%"} radius={"xl"} />{" "}
<Skeleton height={20} width={"100%"} radius={"xl"} />
<Center>
<Skeleton height={40} width={"40%"} radius={"sm"} />
</Center>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack>
<Skeleton height={20} width={"100%"} radius={"xl"} />{" "}
<Skeleton height={20} width={"100%"} radius={"xl"} />{" "}
<Skeleton height={20} width={"100%"} radius={"xl"} />
<Center>
<Skeleton height={40} width={"40%"} radius={"sm"} />
</Center>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}
@@ -231,41 +239,44 @@ function UserJoinTrue({ title, tanggal }: { title: string; tanggal: Date }) {
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Terima kasih, Bapak/Ibu, Anda telah berhasil bergabung dalam
acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
. Mohon ditunggu hingga tanggal{" "}
<Text inherit span fw={"bold"}>
{moment(tanggal).format("DD-MM-YYYY")}
</Text>{" "}
untuk melakukan konfirmasi kehadiran melalui aplikasi HIPMI APP.
</Text>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Terima kasih, Bapak/Ibu, Anda telah berhasil bergabung dalam
acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
. Mohon ditunggu hingga tanggal{" "}
<Text inherit span fw={"bold"}>
{moment(tanggal).format("DD-MM-YYYY")}
</Text>{" "}
untuk melakukan konfirmasi kehadiran melalui aplikasi HIPMI
APP.
</Text>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Beranda
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Beranda
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}
@@ -306,50 +317,52 @@ function UserAllowToJoin({
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Halo, Bapak/Ibu. Kami dengan senang hati mengundang Anda untuk
bergabung dalam acara
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
yang akan diselenggarakan pada{" "}
<Text inherit span fw={"bold"}>
{moment(tanggal).format("LL")}
</Text>{" "}
pukul
<Text inherit span fw={"bold"}>
{moment(tanggal).format("LT")}
</Text>{" "}
di
<Text inherit span fw={"bold"}>
{lokasi}
</Text>{" "}
. Pastikan Anda sudah melakukan registrasi melalui aplikasi
[Nama Aplikasi] agar dapat berpartisipasi. Kami sangat
menantikan kehadiran Anda. Sampai jumpa di acara ini.
</Text>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Halo, Bapak/Ibu. Kami dengan senang hati mengundang Anda untuk
bergabung dalam acara
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
yang akan diselenggarakan pada{" "}
<Text inherit span fw={"bold"}>
{moment(tanggal).format("LL")}
</Text>{" "}
pukul
<Text inherit span fw={"bold"}>
{moment(tanggal).format("LT")}
</Text>{" "}
di
<Text inherit span fw={"bold"}>
{lokasi}
</Text>{" "}
. Pastikan Anda sudah melakukan registrasi melalui aplikasi
[Nama Aplikasi] agar dapat berpartisipasi. Kami sangat
menantikan kehadiran Anda. Sampai jumpa di acara ini.
</Text>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xs"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
onJoinEvent();
}}
>
Join Event
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xs"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
onJoinEvent();
}}
>
Join Event
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}
@@ -385,42 +398,45 @@ function UserNotJoinAndEventReady({
}
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Halo, Bapak/Ibu. Kami mencatat bahwa Anda belum melakukan
registrasi melalui aplikasi untuk mengikuti acara{" "}
<Text inherit span fw={"bold"}>
{title}.
</Text>{" "}
Mohon segera lakukan registrasi melalui Event App agar dapat
mengikuti acara ini. Jika membutuhkan bantuan, jangan ragu untuk
menghubungi tim kami. Terima kasih Terima kasih atas kehadiran
Anda di acara pada hari ini. Mohon untuk mengonfirmasi kehadiran
Anda dengan menekan tombol {"Join & Konfirmasi"}
atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
selamat menikmati acara.
</Text>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Halo, Bapak/Ibu. Kami mencatat bahwa Anda belum melakukan
registrasi melalui aplikasi untuk mengikuti acara{" "}
<Text inherit span fw={"bold"}>
{title}.
</Text>{" "}
Mohon segera lakukan registrasi melalui Event App agar dapat
mengikuti acara ini. Jika membutuhkan bantuan, jangan ragu
untuk menghubungi tim kami. Terima kasih Terima kasih atas
kehadiran Anda di acara pada hari ini. Mohon untuk
mengonfirmasi kehadiran Anda dengan menekan tombol{" "}
{"Join & Konfirmasi"}
atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
selamat menikmati acara.
</Text>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xs"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
onJoinAndKonfirmasi();
}}
>
Join & Konfirmasi
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xs"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
onJoinAndKonfirmasi();
}}
>
Join & Konfirmasi
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}
@@ -439,56 +455,58 @@ function EventAlreadyDone({
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Kami mohon maaf, Bapak/Ibu, acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
telah selesai, sehingga konfirmasi kehadiran sudah tidak dapat
dilakukan. Terima kasih atas perhatian dan minat Anda. Kami
berharap dapat bertemu di acara kami berikutnya. Terima kasih,
Bapak/Ibu, kehadiran Anda di acara.
</Text>
</Stack>
<Group grow mt={"lg"}>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Beranda
</Button>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Kami mohon maaf, Bapak/Ibu, acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
telah selesai, sehingga konfirmasi kehadiran sudah tidak dapat
dilakukan. Terima kasih atas perhatian dan minat Anda. Kami
berharap dapat bertemu di acara kami berikutnya. Terima kasih,
Bapak/Ibu, kehadiran Anda di acara.
</Text>
</Stack>
<Group grow mt={"lg"}>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Beranda
</Button>
<Button
loading={isLoadingDetail}
loaderPosition="center"
radius={"xl"}
c={"black"}
onClick={() => {
setHotMenu(3);
setLoadingDetail(true);
router.push(RouterEvent.detail_riwayat + eventId, {
scroll: false,
});
}}
>
Riwayat Event
</Button>
</Group>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<Button
loading={isLoadingDetail}
loaderPosition="center"
radius={"xl"}
c={"black"}
onClick={() => {
setHotMenu(3);
setLoadingDetail(true);
router.push(RouterEvent.detail_riwayat + eventId, {
scroll: false,
});
}}
>
Riwayat Event
</Button>
</Group>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}
@@ -521,41 +539,43 @@ function UserNotConfirm({
}
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Terima kasih atas kehadiran Anda di acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
pada hari ini. Mohon untuk mengonfirmasi kehadiran Anda dengan
menekan tombol{" "}
<Text inherit span fw={"bold"}>
Konfirmasi Kehadiran
</Text>{" "}
atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
selamat menikmati acara.
</Text>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Terima kasih atas kehadiran Anda di acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
pada hari ini. Mohon untuk mengonfirmasi kehadiran Anda dengan
menekan tombol{" "}
<Text inherit span fw={"bold"}>
Konfirmasi Kehadiran
</Text>{" "}
atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
selamat menikmati acara.
</Text>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xs"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
onUpdateKonfirmasi();
}}
>
Konfirmasi Kehadiran
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xs"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
onUpdateKonfirmasi();
}}
>
Konfirmasi Kehadiran
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}
@@ -567,38 +587,40 @@ function UserAlreadyConfirm({ title }: { title: string }) {
return (
<>
<UIGlobal_LayoutDefault>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Terima kasih, Bapak/Ibu, kehadiran Anda di acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
telah berhasil dikonfirmasi. Kami senang menyambut Anda dan
semoga acara ini memberikan manfaat yang maksimal. Selamat
mengikuti kegiatan.
</Text>
<UI_NewLayoutTamplate>
<UI_NewChildren>
<Stack h={"100vh"} justify="center">
<ComponentGlobal_CardStyles>
<Stack align="center" justify="center">
<Text align="center">
Terima kasih, Bapak/Ibu, kehadiran Anda di acara{" "}
<Text inherit span fw={"bold"}>
{title}
</Text>{" "}
telah berhasil dikonfirmasi. Kami senang menyambut Anda dan
semoga acara ini memberikan manfaat yang maksimal. Selamat
mengikuti kegiatan.
</Text>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Beranda
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UIGlobal_LayoutDefault>
<Button
loading={isLoading}
loaderPosition="center"
radius={"xl"}
color="green"
c={"black"}
onClick={() => {
setHotMenu(0);
setLoading(true);
router.push(RouterEvent.beranda, { scroll: false });
}}
>
Beranda
</Button>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>
);
}