fix ui event

.gitignore

@@ -65,3 +65,4 @@ certificates/
 *.swn
 .DS_Store
 Thumbs.db
+.qodo

src/app/dev/event/main/layout.tsx

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

src/app/zCoba/home/v2_view.tsx

@@ -3,6 +3,7 @@
 
 import {
   Badge,
+  Box,
   Button,
   Card,
   Group,
@@ -26,10 +27,16 @@ export default function ViewV2() {
           Aplikasi dengan layout yang dioptimalkan untuk tampilan mobile
         </Text>
 
-
         <Stack spacing="md">
           {[...Array(5)].map((_, index) => (
-            <Card  opacity={0.3} key={index} shadow="sm" padding="md" radius="md" withBorder>
+            <Card
+              opacity={0.3}
+              key={index}
+              shadow="sm"
+              padding="md"
+              radius="md"
+              withBorder
+            >
               <Card.Section>
                 <Image
                   src={`/api/placeholder/400/200`}
@@ -63,6 +70,26 @@ export default function ViewV2() {
           ))}
         </Stack>
 
+        <Stack spacing="md">
+          {[...Array(5)].map((_, index) => (
+            <Box key={index} mb="xl" h="100px" bg={"gray"}>
+              Test
+            </Box>
+          ))}
+        </Stack>
+
+        {[...Array(5)].map((_, index) => (
+          <div
+            key={index}
+            style={{
+              backgroundColor: "gray",
+              marginBottom: "15px",
+              height: "100px",
+            }}
+          >
+            Test
+          </div>
+        ))}
 
         <Paper
           shadow="md"
@@ -84,7 +111,6 @@ export default function ViewV2() {
             Klaim Sekarang
           </Button>
         </Paper>
-        
       </Stack>
     </ClientLayout>
   );

src/app_modules/_global/component/new/component_header.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { ActionIcon, Box, Group, Title, Loader } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -41,7 +43,6 @@ export function Component_Header({
         w={"100%"}
         h={"100%"}
         position={posotion ? posotion : "apart"}
-        px={"md"}
       >
         {hideButtonLeft ? (
           <ActionIcon disabled variant="transparent"></ActionIcon>

src/app_modules/_global/ui/ui_header_tamplate.tsx

@@ -49,12 +49,11 @@ export default function UIGlobal_LayoutHeaderTamplate({
     <>
       <Box
         h={"8vh"}
-        // w={"100%"}
+        style={{
-        // pos={"sticky"}
+          borderBottom: `1px solid ${AccentColor.blue}`,
-        // top={0}
+          borderBottomLeftRadius: "10px",
-        // style={{
+          borderBottomRightRadius: "10px",
-        //   zIndex: 10,
+        }}
-        // }}
         sx={{
           borderStyle: "none",
         }}
@@ -86,13 +85,8 @@ export default function UIGlobal_LayoutHeaderTamplate({
                 <IconChevronLeft />
               )} */}
 
-
               {/* GA PAKE LOADING SAAT KLIK BACK */}
-              {iconLeft ? (
+              {iconLeft ? iconLeft : <IconChevronLeft />}
-                iconLeft
-              ) : (
-                <IconChevronLeft />
-              )}
             </ActionIcon>
           )}
 

src/app_modules/_global/ui/ui_layout_tamplate.tsx

@@ -32,17 +32,17 @@ export default function UIGlobal_LayoutTamplate({
         }}
       >
         <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
-          <BackgroundImage
+          {/* <BackgroundImage
             src={"/aset/global/main_background.png"}
             h={"100vh"}
             style={{ position: "relative" }}
-          >
+          > */}
             <UIHeader header={header} />
 
             <UIChildren footer={footer}>{children}</UIChildren>
 
             <UIFooter footer={footer} />
-          </BackgroundImage>
+          {/* </BackgroundImage> */}
         </Container>
       </Box>
     </>
@@ -78,7 +78,7 @@ export function UIChildren({
   return (
     <>
       <Box style={{ zIndex: 0 }} h={footer ? "82vh" : "92vh"} pos={"static"}>
-        <ScrollArea h={"100%"} px={"md"}>
+        <ScrollArea h={"100%"} px={"md"} pt={"sm"}>
           {children}
         </ScrollArea>
       </Box>

src/app_modules/event/_ui/konfirmasi.tsx

@@ -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 { gs_event_hotMenu } from "../global_state";
-import { apiGetEventDetailById } from "../_lib/api_event";
-import { clientLogger } from "@/util/clientLogger";
 
 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,7 +177,8 @@ function DataNotFound() {
 
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack>
@@ -198,7 +203,8 @@ function DataNotFound() {
               </Stack>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
@@ -206,7 +212,8 @@ function DataNotFound() {
 function SkeletonIsDataNull() {
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack>
@@ -219,7 +226,8 @@ function SkeletonIsDataNull() {
               </Stack>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
@@ -231,7 +239,8 @@ function UserJoinTrue({ title, tanggal }: { title: string; tanggal: Date }) {
 
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack align="center" justify="center">
@@ -245,7 +254,8 @@ function UserJoinTrue({ title, tanggal }: { title: string; tanggal: Date }) {
                   <Text inherit span fw={"bold"}>
                     {moment(tanggal).format("DD-MM-YYYY")}
                   </Text>{" "}
-                untuk melakukan konfirmasi kehadiran melalui aplikasi HIPMI APP.
+                  untuk melakukan konfirmasi kehadiran melalui aplikasi HIPMI
+                  APP.
                 </Text>
 
                 <Button
@@ -265,7 +275,8 @@ function UserJoinTrue({ title, tanggal }: { title: string; tanggal: Date }) {
               </Stack>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
@@ -306,7 +317,8 @@ function UserAllowToJoin({
 
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack align="center" justify="center">
@@ -349,7 +361,8 @@ function UserAllowToJoin({
               </Stack>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
@@ -385,7 +398,8 @@ function UserNotJoinAndEventReady({
   }
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack align="center" justify="center">
@@ -396,10 +410,11 @@ function UserNotJoinAndEventReady({
                     {title}.
                   </Text>{" "}
                   Mohon segera lakukan registrasi melalui Event App agar dapat
-                mengikuti acara ini. Jika membutuhkan bantuan, jangan ragu untuk
+                  mengikuti acara ini. Jika membutuhkan bantuan, jangan ragu
-                menghubungi tim kami. Terima kasih Terima kasih atas kehadiran
+                  untuk menghubungi tim kami. Terima kasih Terima kasih atas
-                Anda di acara pada hari ini. Mohon untuk mengonfirmasi kehadiran
+                  kehadiran Anda di acara pada hari ini. Mohon untuk
-                Anda dengan menekan tombol {"Join & Konfirmasi"}
+                  mengonfirmasi kehadiran Anda dengan menekan tombol{" "}
+                  {"Join & Konfirmasi"}
                   atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
                   selamat menikmati acara.
                 </Text>
@@ -420,7 +435,8 @@ function UserNotJoinAndEventReady({
               </Stack>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
@@ -439,7 +455,8 @@ function EventAlreadyDone({
 
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack align="center" justify="center">
@@ -488,7 +505,8 @@ function EventAlreadyDone({
               </Group>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
@@ -521,7 +539,8 @@ function UserNotConfirm({
   }
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack align="center" justify="center">
@@ -555,7 +574,8 @@ function UserNotConfirm({
               </Stack>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
@@ -567,7 +587,8 @@ function UserAlreadyConfirm({ title }: { title: string }) {
 
   return (
     <>
-      <UIGlobal_LayoutDefault>
+      <UI_NewLayoutTamplate>
+        <UI_NewChildren>
           <Stack h={"100vh"} justify="center">
             <ComponentGlobal_CardStyles>
               <Stack align="center" justify="center">
@@ -598,7 +619,8 @@ function UserAlreadyConfirm({ title }: { title: string }) {
               </Stack>
             </ComponentGlobal_CardStyles>
           </Stack>
-      </UIGlobal_LayoutDefault>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -14,13 +14,12 @@ import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
 export default function ComponentEvent_DetailData({
   isDaftarPeserta,
   isReport,
-  data
+  data,
 }: {
   isDaftarPeserta?: boolean;
   isReport?: boolean;
-  data: MODEL_EVENT | null
+  data: MODEL_EVENT | null;
 }) {
-
   return (
     <>
       {!data ? (
@@ -28,7 +27,10 @@ export default function ComponentEvent_DetailData({
       ) : (
         <Stack>
           {isReport && (
-            <ComponentGlobal_BoxInformation isReport informasi={data?.catatan} />
+            <ComponentGlobal_BoxInformation
+              isReport
+              informasi={data?.catatan}
+            />
           )}
 
           <ComponentGlobal_CardStyles marginBottom={"16px"}>

src/app_modules/event/component/new_footer.tsx

@@ -0,0 +1,75 @@
+import { RouterEvent } from "@/lib/router_hipmi/router_event";
+import {
+  IconHome,
+  IconReservedLine,
+  IconCalendarEvent,
+  IconHistory,
+} from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_event_hotMenu } from "../global_state";
+import { MainColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
+
+export function Event_ComponentNewFooter() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
+
+  const listFooter = [
+    {
+      id: "1",
+      name: "Beranda",
+      path: RouterEvent.beranda,
+      icon: <IconHome />,
+    },
+
+    {
+      id: "2",
+      name: "Status",
+      path: RouterEvent.status({ id: "1" }),
+      icon: <IconReservedLine />,
+    },
+    {
+      id: "3",
+      name: "Kontribusi",
+      path: RouterEvent.kontribusi,
+      icon: <IconCalendarEvent />,
+    },
+    {
+      id: "4",
+      name: "Riwayat",
+      path: RouterEvent.riwayat({ id: "1" }),
+      icon: <IconHistory />,
+    },
+  ];
+  return (
+    <>
+      <SimpleGrid cols={4} h={"9vh"} mx={"xs"} w={"100%"}>
+        {listFooter.map((e, i) => (
+          <Stack key={i} align="center" justify="center" spacing={0}>
+            <ActionIcon
+              // disabled={e.path === "" ? true : false}
+              variant="transparent"
+              c={hotMenu === i ? MainColor.yellow : MainColor.white}
+              onClick={() =>
+                e.path === ""
+                  ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                  : (router.replace(e.path), setHotMenu(i))
+              }
+            >
+              {e.icon}
+            </ActionIcon>
+            <Text
+              c={hotMenu === i ? MainColor.yellow : MainColor.white}
+              fz={"xs"}
+              lineClamp={1}
+            >
+              {e.name}
+            </Text>
+          </Stack>
+        ))}
+      </SimpleGrid>
+    </>
+  );
+}

src/app_modules/event/create/layout.tsx

@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutEvent_Create({
@@ -11,9 +14,16 @@ export default function LayoutEvent_Create({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Event" />}>
+      {/* <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Event" />}>
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Tambah Event" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -1,9 +1,12 @@
 "use client";
 
-import { RouterEvent } from "@/lib/router_hipmi/router_event";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
 import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UI_NewLayoutTamplate, {
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
+import { RouterEvent } from "@/lib/router_hipmi/router_event";
 import { ActionIcon } from "@mantine/core";
 import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -30,7 +33,24 @@ export default function LayoutEvent_DetailDraft({
 
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header
+            title="Detail Draft"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
+
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
@@ -46,7 +66,7 @@ export default function LayoutEvent_DetailDraft({
         }
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
 
       <UIGlobal_Drawer
         opened={openDrawer}

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

@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutEvent_DetailKontribusi({
@@ -11,11 +14,18 @@ export default function LayoutEvent_DetailKontribusi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Detail Kontibutor" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Detail Kontibutor" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -1,7 +1,11 @@
 "use client";
 
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutEvent_DetailMain({
@@ -11,11 +15,13 @@ export default function LayoutEvent_DetailMain({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      <UI_NewLayoutTamplate>
-        header={<UIGlobal_LayoutHeaderTamplate title="Detail Event" />}
+        <UI_NewHeader>
-      >
+          <Component_Header
-        {children}
+           title="Detail Event" />
-      </UIGlobal_LayoutTamplate>
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -1,12 +1,23 @@
-import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import React from 'react';
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
+import React from "react";
 
-function LayoutEvent_Peserta({children}: {children: React.ReactNode}) {
+function LayoutEvent_Peserta({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Daftar Peserta" />}>
+      {/* <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Daftar Peserta" />}>
       {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Daftar Peserta" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutEvent_DetailPublish({
@@ -11,11 +14,18 @@ export default function LayoutEvent_DetailPublish({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Detail Publish" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Detail Publish" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -4,19 +4,19 @@ import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { RouterEvent } from "@/lib/router_hipmi/router_event";
 import { clientLogger } from "@/util/clientLogger";
 import { Button, Group, SimpleGrid, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
+import { apiGetEventDetailById } from "../../_lib/api_event";
+import { MODEL_EVENT } from "../../_lib/interface";
 import ComponentEvent_DetailData from "../../component/detail/detail_data";
 import { Event_funDeleteById } from "../../fun/delete/fun_delete";
 import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
-import { useShallowEffect } from "@mantine/hooks";
-import { apiGetEventDetailById } from "../../_lib/api_event";
-import { MODEL_EVENT } from "../../_lib/interface";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function Event_DetailReject() {
   const params = useParams<{ id: string }>();
@@ -41,7 +41,6 @@ export default function Event_DetailReject() {
     }
   }
 
-
   return (
     <>
       <Stack spacing={"lg"}>
@@ -52,7 +51,13 @@ export default function Event_DetailReject() {
   );
 }
 
-function ButtonAction({ eventId, data }: { eventId: string , data: MODEL_EVENT | null}) {
+function ButtonAction({
+  eventId,
+  data,
+}: {
+  eventId: string;
+  data: MODEL_EVENT | null;
+}) {
   const router = useRouter();
   const [openModal1, setOpenModal1] = useState(false);
   const [openModal2, setOpenModal2] = useState(false);
@@ -134,6 +139,8 @@ function ButtonAction({ eventId, data }: { eventId: string , data: MODEL_EVENT |
         </SimpleGrid>
       )}
 
+    
+
       {/* MODAL EDIT */}
       <UIGlobal_Modal
         title={"Anda yakin ingin mengedit kembali event ini ?"}

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

@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutEvent_DetailReject({
@@ -11,11 +14,18 @@ export default function LayoutEvent_DetailReject({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Detail Reject" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutEvent_DetailReview({
@@ -11,11 +14,18 @@ export default function LayoutEvent_DetailReview({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Detail Review" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

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

@@ -1,9 +1,8 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, { UI_NewChildren, UI_NewHeader } from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
-
 export default function LayoutEvent_DetailRiwayat({
   children,
 }: {
@@ -11,9 +10,16 @@ export default function LayoutEvent_DetailRiwayat({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}>
+      {/* <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}>
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Detail Riwayat" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

src/app_modules/event/edit/layout.tsx

@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutEvent_Edit({
@@ -11,9 +14,16 @@ export default function LayoutEvent_Edit({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Event" />}>
+      {/* <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Event" />}>
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Edit Event" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

src/app_modules/event/main/new_layout_event.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewFooter,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
+import { RouterHome } from "@/lib/router_hipmi/router_home";
+import React from "react";
+import { Event_ComponentNewFooter } from "../component/new_footer";
+
+export default function NewLayout_Event({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Event" routerLeft={RouterHome.main_home} />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+        <UI_NewFooter>
+          <Event_ComponentNewFooter />
+        </UI_NewFooter>
+      </UI_NewLayoutTamplate>
+    </>
+  );
+}

src/app_modules/job/main/beranda/view_beranda.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { gs_jobTiggerBeranda } from "@/lib/global_state";
-import { RouterJob } from "@/lib/router_hipmi/router_job";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { ActionIcon, Box, Center, Loader, Stack, TextInput } from "@mantine/core";
+import { gs_jobTiggerBeranda } from "@/lib/global_state";
+import { RouterJob } from "@/lib/router_hipmi/router_job";
+import { clientLogger } from "@/util/clientLogger";
+import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconPlus, IconSearch } from "@tabler/icons-react";
+import { IconSearch } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
@@ -15,11 +16,9 @@ import {
   Job_ComponentButtonUpdateBeranda,
   Job_ComponentSkeletonBeranda,
 } from "../../component";
+import { apiGetJob } from "../../component/api_fetch_job";
 import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
 import { MODEL_JOB } from "../../model/interface";
-import { apiGetJob } from "../../component/api_fetch_job";
-import { clientLogger } from "@/util/clientLogger";
-import Component_NewCreateButton from "@/app_modules/_global/component/new/new_button_create";
 
 export default function Job_ViewBeranda() {
   const [data, setData] = useState<MODEL_JOB[]>([]);