fix: event

- deskripsi:
- fix use server untuk pengambilan userid , sekarang menggunakan API

src/app/api/master/tipe-acara/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET(request: Request) {
+  try {
+    const data = await prisma.eventMaster_TipeAcara.findMany({
+      orderBy: {
+        id: "asc",
+      },
+      where: {
+        active: true,
+      },
+    });
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mendapatkan data",
+        data: data,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Error Get Master Tipe Acara ", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "API Error Get Data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/dev/(user)/event/create/page.tsx

@@ -1,15 +1,5 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Event_Create } from "@/app_modules/event";
-import { Event_getMasterTipeAcara } from "@/app_modules/event/fun/master/get_tipe_acara";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
+  return <Event_Create />;
-  const listTipeAcara = await Event_getMasterTipeAcara();
-
-  return (
-    <Event_Create
-      listTipeAcara={listTipeAcara as any}
-      authorId={userLoginId as string}
-    />
-  );
 }

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

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

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

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

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

@@ -1,14 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Event_DetailMain } from "@/app_modules/event";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
-
   return (
     <>
-      <Event_DetailMain
+      <Event_DetailMain />
-        userLoginId={userLoginId as string}
-      />
     </>
   );
 }

src/app/dev/(user)/event/edit/[id]/layout.tsx

@@ -1,8 +1,14 @@
 import { LayoutEvent_Edit } from "@/app_modules/event";
 import React from "react";
 
-export default async function Layout({children}: {children: React.ReactNode}) {
+export default async function Layout({
-    return <>
+  children,
-    <LayoutEvent_Edit>{children}</LayoutEvent_Edit>
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutEvent_Edit>{children}</LayoutEvent_Edit>
     </>
-}
+  );
+}

src/app/dev/(user)/event/edit/[id]/page.tsx

@@ -1,25 +1,9 @@
 import { Event_Edit } from "@/app_modules/event";
-import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
-import { Event_getMasterTipeAcara } from "@/app_modules/event/fun/master/get_tipe_acara";
-import _ from "lodash";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let eventId = params.id;
-  const data = await event_getOneById(eventId);
-  const dataEvent = _.omit(data, [
-    "Author",
-    "EventMaster_Status",
-    "Event_Peserta",
-    "createdAt",
-    "updatedAt",
-    "active",
-  ]);
-
-  const listTipeAcara = await Event_getMasterTipeAcara()
 
+export default async function Page() {
   return (
     <>
-      <Event_Edit dataEvent={dataEvent as any} listTipeAcara={listTipeAcara as any}/>
+      <Event_Edit />
     </>
   );
 }

src/app/dev/(user)/event/invoice/[id]/page.tsx

@@ -3,10 +3,10 @@ import Event_Invoice from '@/app_modules/event/detail/invoice';
 import React from 'react';
 
 async function Page() {
-  const userLoginId = await funGetUserIdByToken();
+  // const userLoginId = await funGetUserIdByToken();
   return (
     <>
-      <Event_Invoice userLoginId={userLoginId} />
+      <Event_Invoice userLoginId={""} />
     </>
   );
 }

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

@@ -1,13 +1,10 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import UiEvent_V2_Konfirmasi from "@/app_modules/event/_ui/V2_konfirmasi";
 
 export default async function Page() {
-  const userLoginId = await funGetUserIdByToken();
-
   return (
     <>
       {/* <Ui_Konfirmasi userLoginId={userLoginId as string} /> */}
-      <UiEvent_V2_Konfirmasi userLoginId={userLoginId as string} />
+      <UiEvent_V2_Konfirmasi />
     </>
   );
 }

src/app/dev/(user)/event/main/status/[id]/page.tsx

@@ -1,18 +1,6 @@
 import { Event_StatusPage } from "@/app_modules/event";
-import {
-  event_getAllByStatusId,
-  event_getMasterStatus,
-} from "@/app_modules/event/fun";
 
 async function Page({ params }: { params: { id: string } }) {
-  // let statusId = params.id;
-  // const listStatus = await event_getMasterStatus();
-
-  // const dataStatus = await event_getAllByStatusId({
-  //   page: 1,
-  //   statusId: statusId,
-  // });
-
   return (
     <>
       <Event_StatusPage />

src/app_modules/event/_lib/api_event.ts

@@ -1,19 +1,41 @@
 import { IEventSponsor } from "./interface";
 
 export const apiGetEventDetailById = async ({ id }: { id: string }) => {
-  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  try {
-  if (!token) return await token.json().catch(() => null);
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
 
-  const response = await fetch(`/api/event/${id}`, {
+    const response = await fetch(`/api/event/${id}`, {
-    headers: {
+      headers: {
-      "Content-Type": "application/json",
+        "Content-Type": "application/json",
-      Accept: "application/json",
+        Accept: "application/json",
-      "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Origin": "*",
-      Authorization: `Bearer ${token}`,
+        Authorization: `Bearer ${token}`,
-    },
+      },
-  });
+    });
 
-  return await response.json().catch(() => null);
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get event detail",
+        response.statusText,
+        errorData
+      );
+      throw new Error(errorData?.message || "Failed to get event detail");
+    }
+
+    // Return the JSON response
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get event detail", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
 };
 
 export const apiGetEventCekPeserta = async ({
@@ -129,7 +151,13 @@ export const apiGetOneSponsorEventById = async ({ id }: { id: string }) => {
   return await response.json().catch(() => null);
 };
 
-export const apiGetEventKonfirmasiById = async ({ id, userId }: { id: string; userId: string }) => {
+export const apiGetEventKonfirmasiById = async ({
+  id,
+  userId,
+}: {
+  id: string;
+  userId: string;
+}) => {
   try {
     // Fetch token from cookie
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
@@ -138,7 +166,46 @@ export const apiGetEventKonfirmasiById = async ({ id, userId }: { id: string; us
       return null;
     }
 
-    const response = await fetch(`/api/event/${id}/konfirmasi?userId=${userId}`, {
+    const response = await fetch(
+      `/api/event/${id}/konfirmasi?userId=${userId}`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get event konfirmasi",
+        response.statusText,
+        errorData
+      );
+      throw new Error(errorData?.message || "Failed to get event konfirmasi");
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error get event konfirmasi", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};
+
+export const apiGetMasterTipeAcara = async () => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/master/tipe-acara`, {
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
@@ -149,14 +216,18 @@ export const apiGetEventKonfirmasiById = async ({ id, userId }: { id: string; us
     // Check if the response is OK
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
-      console.error("Failed to get event konfirmasi", response.statusText, errorData);
+      console.error(
-      throw new Error(errorData?.message || "Failed to get event konfirmasi");
+        "Failed to get master tipe acara",
+        response.statusText,
+        errorData
+      );
+      throw new Error(errorData?.message || "Failed to get master tipe acara");
     }
 
     // Return the JSON response
     return await response.json();
   } catch (error) {
-    console.error("Error get event konfirmasi", error);
+    console.error("Error get master tipe acara", error);
     throw error; // Re-throw the error to handle it in the calling function
   }
-};
+};

src/app_modules/event/_ui/V2_konfirmasi.tsx

@@ -29,6 +29,7 @@ import { Event_funJoinAndConfirmEvent } from "../fun/create/fun_join_and_confirm
 import { Event_funJoinEvent } from "../fun/create/fun_join_event";
 import { gs_event_hotMenu } from "../global_state";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 
 interface IKonfirmasiProps {
   dataEvent: {
@@ -50,11 +51,7 @@ interface IKonfirmasiProps {
   kehadiran: boolean | null;
 }
 
-export default function UiEvent_V2_Konfirmasi({
+export default function UiEvent_V2_Konfirmasi() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const params = useParams<{ id: string }>();
   const eventId = params.id;
 
@@ -63,6 +60,7 @@ export default function UiEvent_V2_Konfirmasi({
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
 
   // Load Data
   useShallowEffect(() => {
@@ -71,15 +69,19 @@ export default function UiEvent_V2_Konfirmasi({
 
   async function onLoadData() {
     try {
-      const response = await apiGetEventKonfirmasiById({
+      const responseUser = await apiNewGetUserIdByToken();
-        id: eventId,
+      if (responseUser.success) {
-        userId: userLoginId,
+        setUserLoginId(responseUser.userId);
-      });
+        const response = await apiGetEventKonfirmasiById({
+          id: eventId,
+          userId: responseUser.userId,
+        });
 
-      if (response.res) {
+        if (response.res) {
-        setData(response.res);
+          setData(response.res);
-      } else {
+        } else {
-        setData(null);
+          setData(null);
+        }
       }
     } catch (error) {
       setData(null);
@@ -87,8 +89,10 @@ export default function UiEvent_V2_Konfirmasi({
     }
   }
 
+ 
+
   // Jika data kosong
-  if (data === undefined) {
+  if (data === undefined || !userLoginId) {
     return <SkeletonIsDataNull />;
   }
 

src/app_modules/event/component/button/button_create_event.tsx

@@ -1,4 +1,6 @@
 import { MainColor } from "@/app_modules/_global/color";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
@@ -6,6 +8,7 @@ import {
 import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
 import { IRealtimeData } from "@/lib/global_state";
 import { RouterEvent } from "@/lib/router_hipmi/router_event";
+import { clientLogger } from "@/util/clientLogger";
 import { Button } from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
@@ -13,9 +16,6 @@ import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
 import { Event_funCreate } from "../../fun/create/fun_create";
 import { gs_event_hotMenu } from "../../global_state";
-import { clientLogger } from "@/util/clientLogger";
-import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
-import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 
 export default function Event_ComponentCreateButton({
   value,

src/app_modules/event/create/create.tsx

@@ -1,40 +1,31 @@
 "use client";
 
+import { MainColor } from "@/app_modules/_global/color";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
+import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
+import { baseStylesTextInput } from "@/app_modules/_global/lib/base_style_text_input";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
-import {
+import { Select, Stack, TextInput } from "@mantine/core";
-  Button,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Textarea,
-} from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
 import moment from "moment";
 import { useState } from "react";
+import { apiGetMasterTipeAcara } from "../_lib/api_event";
 import { Event_ComponentCreateButton } from "../component";
 import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
-import { MainColor } from "@/app_modules/_global/color";
-import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
-import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
-import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
-import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
-
-export default function Event_Create({
-  listTipeAcara,
-  authorId,
-}: {
-  listTipeAcara: MODEL_DEFAULT_MASTER_OLD[];
-  authorId: string;
-}) {
-  const [listTipe, setListTipe] = useState(listTipeAcara);
 
+export default function Event_Create() {
+  const [listTipe, setListTipe] = useState<MODEL_DEFAULT_MASTER_OLD[] | null>();
   const [isTimeStart, setIsTimeStart] = useState(false);
   const [diffTimeStart, setDiffTimeStart] = useState(0);
   const [isTimeEnd, setIsTimeEnd] = useState(false);
   const [diffTimeEnd, setDiffTimeEnd] = useState(0);
-
   const [value, setValue] = useState({
     title: "",
     lokasi: "",
@@ -42,24 +33,61 @@ export default function Event_Create({
     tanggal: Date.toString(),
     tanggalSelesai: Date.toString(),
     eventMaster_TipeAcaraId: 0,
-    authorId: authorId,
+    authorId: "",
   });
 
+  useShallowEffect(() => {
+    handleGetUserLoginId();
+  }, []);
+
+  async function handleGetUserLoginId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setValue({
+          ...value,
+          authorId: response.userId,
+        });
+      }
+    } catch (error) {
+      setValue({
+        ...value,
+        authorId: "",
+      });
+    }
+  }
+
+  useShallowEffect(() => {
+    handleGetMasterTipeAcara();
+  }, []);
+
+  async function handleGetMasterTipeAcara() {
+    try {
+      const response = await apiGetMasterTipeAcara();
+      if (response.success) {
+        setListTipe(response.data);
+      } else {
+        setListTipe([]);
+      }
+    } catch (error) {
+      setListTipe([]);
+    }
+  }
+
+  if (!listTipe || !value.authorId) {
+    return <CustomSkeleton height={400} />;
+  }
+
   return (
     <>
       {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
-      <Stack px={"xl"}>
+      <Stack px={"sm"}>
         <TextInput
           styles={{
-            label: {
+            ...baseStylesTextInput,
-              color: MainColor.white,
-            },
             required: {
               color: MainColor.red,
             },
-            input: {
-              backgroundColor: MainColor.white,
-            },
           }}
           label="Judul"
           placeholder="Masukan judul"
@@ -74,15 +102,10 @@ export default function Event_Create({
         />
         <Select
           styles={{
-            label: {
+            ...baseStylesTextInput,
-              color: MainColor.white,
-            },
             required: {
               color: MainColor.red,
             },
-            input: {
-              backgroundColor: MainColor.white,
-            },
             dropdown: {
               backgroundColor: MainColor.white,
             },
@@ -90,10 +113,14 @@ export default function Event_Create({
           withAsterisk
           label="Tipe Acara"
           placeholder="Pilih Tipe Acara"
-          data={listTipe.map((e) => ({
+          data={
-            value: e.id,
+            _.isEmpty(listTipe)
-            label: e.name,
+              ? []
-          }))}
+              : listTipe.map((e) => ({
+                  value: e.id,
+                  label: e.name,
+                }))
+          }
           onChange={(val: any) =>
             setValue({
               ...value,
@@ -104,15 +131,10 @@ export default function Event_Create({
 
         <TextInput
           styles={{
-            label: {
+            ...baseStylesTextInput,
-              color: MainColor.white,
-            },
             required: {
               color: MainColor.red,
             },
-            input: {
-              backgroundColor: MainColor.white,
-            },
           }}
           label="Lokasi"
           placeholder="Masukan lokasi acara"
@@ -128,15 +150,10 @@ export default function Event_Create({
 
         <DateTimePicker
           styles={{
-            label: {
+            ...baseStylesTextInput,
-              color: MainColor.white,
-            },
             required: {
               color: MainColor.red,
             },
-            input: {
-              backgroundColor: MainColor.white,
-            },
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -174,15 +191,10 @@ export default function Event_Create({
 
         <DateTimePicker
           styles={{
-            label: {
+            ...baseStylesTextInput,
-              color: MainColor.white,
-            },
             required: {
               color: MainColor.red,
             },
-            input: {
-              backgroundColor: MainColor.white,
-            },
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -239,37 +251,6 @@ export default function Event_Create({
           />
         </Stack>
 
-        {/* <Stack spacing={5}>
-          <Textarea
-            styles={{
-              label: {
-                color: MainColor.white,
-              },
-              required: {
-                color: MainColor.red,
-              },
-              input: {
-                backgroundColor: MainColor.white,
-              },
-            }}
-            label="Deskripsi"
-            placeholder="Deskripsikan acara yang akan di selenggarakan"
-            withAsterisk
-            autosize
-            maxLength={300}
-            onChange={(val) => {
-              setValue({
-                ...value,
-                deskripsi: val.target.value,
-              });
-            }}
-          />
-          <ComponentGlobal_InputCountDown
-            lengthInput={value.deskripsi.length}
-            maxInput={300}
-          />
-        </Stack> */}
-
         <Event_ComponentCreateButton
           value={value}
           diffTimeStart={diffTimeStart}

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

@@ -15,37 +15,61 @@ import { WibuRealtime } from "wibu-pkg";
 import { apiGetEventCekPeserta } from "../../_lib/api_event";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
 
-export default function Event_DetailMain({
+export default function Event_DetailMain() {
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
   const params = useParams<{ id: string }>();
   const eventId = params.id;
   const [isLoading, setLoading] = useState(false);
   const [isJoinSuccess, setIsJoinSuccess] = useState<boolean | null>(null);
   // const [isNewPeserta, setIsNewPeserta] = useState<boolean | null>(null);
 
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
   useShallowEffect(() => {
-    onCheckPeserta();
+    handleGetUserLoginId();
   }, []);
 
-  async function onCheckPeserta() {
+  async function handleGetUserLoginId() {
     try {
-      const respone = await apiGetEventCekPeserta({
+      const response = await apiNewGetUserIdByToken();
-        userId: userLoginId,
+      if (response.success) {
-        eventId: eventId,
+        setUserLoginId(response.userId);
-      });
+        const responseData = await apiGetEventCekPeserta({
+          userId: response.userId,
+          eventId: eventId,
+        });
 
-      if (respone) {
+        if (responseData) {
-        setIsJoinSuccess(respone.data);
+          setIsJoinSuccess(responseData.data);
+        }
+      } else {
+        setUserLoginId(null);
       }
     } catch (error) {
-      clientLogger.error("Error check peserta", error);
+      setUserLoginId(null);
     }
   }
 
+  // useShallowEffect(() => {
+  //   onCheckPeserta();
+  // }, []);
+
+  // async function onCheckPeserta() {
+  //   try {
+  //     const respone = await apiGetEventCekPeserta({
+  //       userId: userLoginId,
+  //       eventId: eventId,
+  //     });
+
+  //     if (respone) {
+  //       setIsJoinSuccess(respone.data);
+  //     }
+  //   } catch (error) {
+  //     clientLogger.error("Error check peserta", error);
+  //   }
+  // }
+
   // [ON JOIN BUTTON]
   async function onJoin() {
     const body = {
@@ -97,7 +121,7 @@ export default function Event_DetailMain({
       <Stack spacing={"lg"} pb={"md"}>
         <ComponentEvent_DetailMainData />
 
-        {isJoinSuccess == null ? (
+        {isJoinSuccess == null || !userLoginId ? (
           <CustomSkeleton radius={"xl"} h={40} />
         ) : isJoinSuccess ? (
           <Button disabled radius={"xl"} color="green">

src/app_modules/event/edit/index.tsx

@@ -3,50 +3,100 @@
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
 import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
 import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
 import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 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 CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
 import { clientLogger } from "@/util/clientLogger";
-import {
+import { Button, Select, Stack, TextInput } from "@mantine/core";
-  Button,
-  Select,
-  Stack,
-  Text,
-  TextInput
-} from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import moment from "moment";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import {
+  apiGetEventDetailById,
+  apiGetMasterTipeAcara,
+} from "../_lib/api_event";
 import { MODEL_EVENT } from "../_lib/interface";
 import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
 import { Event_funEditById } from "../fun/edit/fun_edit_by_id";
-import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
+import { useParams } from "next/navigation";
+import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
+import { baseStylesTextInput } from "@/app_modules/_global/lib/base_style_text_input";
 
-export default function Event_Edit({
+export default function Event_Edit() {
-  dataEvent,
-  listTipeAcara,
-}: {
-  dataEvent: MODEL_EVENT;
-  listTipeAcara: MODEL_DEFAULT_MASTER_OLD[];
-}) {
   const router = useRouter();
+  const { id } = useParams();
   const [isLoading, setLoading] = useState(false);
 
-  const [value, setValue] = useState(dataEvent);
+  const [data, setData] = useState<MODEL_EVENT | null | any>();
-  const [tipe, setTipe] = useState(listTipeAcara);
+  const [listTipeAcara, setListTipeAcara] = useState<
+    MODEL_DEFAULT_MASTER_OLD[]
+  >([]);
 
   const [isTimeStart, setIsTimeStart] = useState(false);
   const [diffTimeStart, setDiffTimeStart] = useState(0);
   const [isTimeEnd, setIsTimeEnd] = useState(false);
   const [diffTimeEnd, setDiffTimeEnd] = useState(0);
 
+  useShallowEffect(() => {
+    handleGetMasterTipeAcara();
+  }, []);
+
+  async function handleGetMasterTipeAcara() {
+    try {
+      const response = await apiGetMasterTipeAcara();
+      if (response.success) {
+        setListTipeAcara(response.data);
+      } else {
+        setListTipeAcara([]);
+      }
+    } catch (error) {
+      setListTipeAcara([]);
+    }
+  }
+
+  useShallowEffect(() => {
+    handleGetDetailEvent();
+  }, []);
+
+  async function handleGetDetailEvent() {
+    try {
+      const response = await apiGetEventDetailById({ id: id as string });
+      if (response.success) {
+        const fixData = _.omit(response.data, [
+          "Author",
+          "EventMaster_Status",
+          "Event_Peserta",
+          "createdAt",
+          "updatedAt",
+          "active",
+        ]);
+        setData(fixData as any);
+      } else {
+        setData(null);
+      }
+    } catch (error) {
+      setData(null);
+    }
+  }
+
+  if (!listTipeAcara.length || !data) {
+    return <CustomSkeleton height={400} />;
+  }
+
+  if (data === undefined) {
+    return <ComponentGlobal_BoxInformation informasi="Data Tidak Ditemukan" />;
+  }
+
   return (
     <>
       {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
@@ -66,18 +116,18 @@ export default function Event_Edit({
           label="Judul"
           placeholder="judul"
           withAsterisk
-          value={value.title}
+          value={data?.title}
           maxLength={100}
           error={
-            value.title === "" ? (
+            data?.title === "" ? (
               <ComponentGlobal_ErrorInput text="Masukan judul" />
             ) : (
               ""
             )
           }
           onChange={(val) => {
-            setValue({
+            setData({
-              ...value,
+              ...(data as any),
               title: val.target.value,
             });
           }}
@@ -101,14 +151,14 @@ export default function Event_Edit({
           withAsterisk
           label="Tipe Acara"
           placeholder="Pilih Tipe Acara"
-          data={tipe.map((e) => ({
+          data={listTipeAcara.map((e) => ({
             value: e.id,
             label: e.name,
           }))}
-          value={value.EventMaster_TipeAcara.id}
+          value={data.EventMaster_TipeAcara.id}
           onChange={(val) => {
-            setValue({
+            setData({
-              ...(value as any),
+              ...(data as any),
               EventMaster_TipeAcara: {
                 id: val,
               },
@@ -131,41 +181,26 @@ export default function Event_Edit({
           label="Lokasi"
           placeholder="lokasi acara"
           withAsterisk
-          value={value.lokasi}
+          value={data.lokasi}
           maxLength={100}
           error={
-            value.lokasi === "" ? (
+            data.lokasi === "" ? (
               <ComponentGlobal_ErrorInput text="Masukan lokasi" />
             ) : (
               ""
             )
           }
           onChange={(val) => {
-            setValue({
+            setData({
-              ...value,
+              ...data,
               lokasi: val.target.value,
             });
           }}
         />
 
-        {/* <Text c={"green"}>{JSON.stringify(diffTimeStart, null, 2)}</Text>
-        <Text c={"red"}>{JSON.stringify(diffTimeEnd, null, 2)}</Text>
-        <Text c={"yellow"}>
-          {JSON.stringify(
-            moment(value.tanggal.toISOString().toString()),
-            null,
-            2
-          )}
-        </Text> */}
-
         <DateTimePicker
           styles={{
-            label: {
+            ...baseStylesTextInput,
-              color: MainColor.white,
-            },
-            input: {
-              backgroundColor: MainColor.white,
-            },
             required: {
               color: MainColor.red,
             },
@@ -176,7 +211,7 @@ export default function Event_Edit({
           withAsterisk
           label="Tanggal & Waktu Mulai"
           placeholder="Masukan tangal dan waktu"
-          value={value.tanggal}
+          value={moment(data.tanggal).toDate()}
           error={
             isTimeStart ? (
               <ComponentEvent_ErrorMaximalInput text="Invalid Time !" />
@@ -195,8 +230,8 @@ export default function Event_Edit({
               ? setIsTimeStart(true)
               : setIsTimeStart(false);
 
-            setValue({
+            setData({
-              ...(value as any),
+              ...data,
               tanggal: val,
             });
           }}
@@ -204,12 +239,7 @@ export default function Event_Edit({
 
         <DateTimePicker
           styles={{
-            label: {
+            ...baseStylesTextInput,
-              color: MainColor.white,
-            },
-            input: {
-              backgroundColor: MainColor.white,
-            },
             required: {
               color: MainColor.red,
             },
@@ -220,12 +250,11 @@ export default function Event_Edit({
           withAsterisk
           label="Tanggal & Waktu Berakhir"
           placeholder="Masukan tangal dan waktu"
-          value={value.tanggalSelesai}
+          value={moment(data.tanggalSelesai).toDate()}
           error={
             isTimeEnd ? (
               <ComponentEvent_ErrorMaximalInput text="Invalid Time !" />
-            ) : moment(value.tanggalSelesai?.toISOString().toString()) <
+            ) : moment(data.tanggalSelesai) < moment(data.tanggal) ? (
-              moment(value.tanggal.toISOString().toString()) ? (
               <ComponentGlobal_ErrorInput text="Invalid Time !" />
             ) : (
               ""
@@ -242,8 +271,8 @@ export default function Event_Edit({
               ? setIsTimeEnd(true)
               : setIsTimeEnd(false);
 
-            setValue({
+            setData({
-              ...(value as any),
+              ...data,
               tanggalSelesai: val,
             });
           }}
@@ -253,82 +282,43 @@ export default function Event_Edit({
           <Component_V3_Label_TextInput text="Deskripsi" />
 
           <Component_V3_TextEditor
-            data={value.deskripsi}
+            data={data.deskripsi}
             onSetData={(val) => {
-              setValue({
+              setData({
-                ...value,
+                ...data,
                 deskripsi: val.trim(),
               });
             }}
           />
 
-          {funReplaceHtml({ html: value.deskripsi }).length === 0 && (
+          {funReplaceHtml({ html: data.deskripsi }).length === 0 && (
             <ComponentGlobal_ErrorInput text="Masukan deskripsi" />
           )}
 
           <ComponentGlobal_InputCountDown
-            lengthInput={funReplaceHtml({ html: value.deskripsi }).length}
+            lengthInput={funReplaceHtml({ html: data.deskripsi }).length}
             maxInput={maxInputLength}
           />
         </Stack>
 
-        {/* <Stack spacing={5}>
-          <Textarea
-            styles={{
-              label: {
-                color: MainColor.white,
-              },
-              input: {
-                backgroundColor: MainColor.white,
-              },
-              required: {
-                color: MainColor.red,
-              },
-            }}
-            label="Deskripsi"
-            placeholder="Deskripsikan acara yang akan di selenggarakan"
-            withAsterisk
-            autosize
-            value={value.deskripsi}
-            maxLength={300}
-            error={
-              value.deskripsi === "" ? (
-                <ComponentGlobal_ErrorInput text="Masukan deskripsi" />
-              ) : (
-                ""
-              )
-            }
-            onChange={(val) => {
-              setValue({
-                ...value,
-                deskripsi: val.target.value,
-              });
-            }}
-          />
-          <ComponentGlobal_InputCountDown
-            maxInput={300}
-            lengthInput={value.deskripsi.length}
-          />
-        </Stack> */}
-
         <Button
           style={{
             transition: "0.5s",
           }}
-          disabled={
+          // disabled={
-            value.title === "" ||
+          //   data.title === "" ||
-            value.lokasi === "" ||
+          //   data.lokasi === "" ||
-            value.eventMaster_TipeAcaraId === 0 ||
+          //   data.eventMaster_TipeAcaraId === 0 ||
-            moment(value.tanggalSelesai?.toISOString().toString()) <
+          //   moment(data.tanggalSelesai?.toISOString().toString()) <
-              moment(value.tanggal.toISOString().toString()) ||
+          //     moment(data.tanggal.toISOString().toString()) ||
-            funReplaceHtml({ html: value.deskripsi }).length > maxInputLength ||
+          //   funReplaceHtml({ html: data.deskripsi }).length > maxInputLength ||
-            funReplaceHtml({ html: value.deskripsi }).length === 0
+          //   funReplaceHtml({ html: data.deskripsi }).length === 0
-          }
+          // }
           loaderPosition="center"
           loading={isLoading ? true : false}
           radius={"xl"}
           mt={"xl"}
-          onClick={() => onUpdate(router, value, setLoading)}
+          onClick={() => onUpdate(router, data, setLoading)}
           bg={MainColor.yellow}
           color="yellow"
           c={MainColor.darkblue}