#style:

- UI Event
- Perbaiki create button ke beberapa app
## No Issuee

src/app/dev/event/create/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/detail/draft/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/detail/kontribusi/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/detail/main/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/detail/reject/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/detail/review/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/detail/riwayat/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/edit/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/main/beranda/page.tsx

@@ -1,8 +1,8 @@
 import { Event_Beranda } from "@/app_modules/event";
-import { Event_getListAllPublish } from "@/app_modules/event/fun/get/get_list_all_publish";
+import { event_getListAllPublish } from "@/app_modules/event/fun/get/get_list_all_publish";
 
 export default async function Page() {
-  const dataEvent = await Event_getListAllPublish();
+  const dataEvent = await event_getListAllPublish({page: 1});
 
   return (
     <>

src/app/dev/event/main/kontribusi/page.tsx

@@ -1,10 +1,9 @@
 import { Event_Kontribusi } from "@/app_modules/event";
-import { Event_getListKontibusiByUserId } from "@/app_modules/event/fun/get/get_list_kontribusi_by_user_id";
+import { event_getListKontibusiByUserId } from "@/app_modules/event/fun/get/get_list_kontribusi_by_user_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page() {
-  const userLoginId = await user_getOneUserId();
+  const listKontribusi = await event_getListKontibusiByUserId({page: 1})
-  const listKontribusi = await Event_getListKontibusiByUserId(userLoginId)
 
   return (
     <>

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

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/event/main/riwayat/page.tsx

@@ -1,14 +1,12 @@
 import { Event_Riwayat } from "@/app_modules/event";
-import { Event_getListRiwayatSaya } from "@/app_modules/event/fun/get/get_list_riwayat_saya";
+import { event_getListRiwayatSaya } from "@/app_modules/event/fun/get/get_list_riwayat_saya";
-import { Event_getListSemuaRiwayat } from "@/app_modules/event/fun/get/get_list_semua_riwayat";
+import { event_getListSemuaRiwayat } from "@/app_modules/event/fun/get/riwayat/get_list_semua_riwayat";
-import { Event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let eventId = params.id;
-  const authorId = await user_getOneUserId();
+  const dataSemuaRiwayat = await event_getListSemuaRiwayat({ page: 1 });
-  const dataSemuaRiwayat = await Event_getListSemuaRiwayat();
+  const dataRiwayatSaya = await event_getListRiwayatSaya({ page: 1 });
-  const dataRiwayatSaya = await Event_getListRiwayatSaya(authorId);
 
   return (
     <Event_Riwayat

src/app/dev/event/main/status_page/page.tsx

@@ -1,13 +1,16 @@
 import { Event_StatusPage } from "@/app_modules/event";
 import { Event_getListByStatusId } from "@/app_modules/event/fun/get/get_list_event_by_status_id";
+import { event_getAllDraft } from "@/app_modules/event/fun/get/status/get_all_draft";
+import { event_getAllReject } from "@/app_modules/event/fun/get/status/get_all_reject";
+import { event_getAllReview } from "@/app_modules/event/fun/get/status/get_all_review";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page() {
   const authorId = await user_getOneUserId();
   const listPublish = await Event_getListByStatusId("1", authorId);
-  const listReview = await Event_getListByStatusId("2", authorId);
+  const listReview = await event_getAllReview({page: 1});
-  const listDraft = await Event_getListByStatusId("3", authorId);
+  const listDraft = await event_getAllDraft({ page: 1 });
-  const listReject = await Event_getListByStatusId("4", authorId);
+  const listReject = await event_getAllReject({page: 1});
 
   return (
     <Event_StatusPage

src/app/dev/event/splash/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app_modules/_global/color/color_pallet.ts

@@ -8,6 +8,7 @@ export const AccentColor = {
   blackgray: "#333533",
   darkblue: "#002E59",
   blue: "#00447D",
+  softblue: "#007CBA",
   skyblue: "#00BFFF",
   yellow: "#FFD60A",
 };

src/app_modules/_global/component/button_create.tsx

@@ -1,20 +1,28 @@
 "use client";
 
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { ActionIcon, Loader } from "@mantine/core";
 import { IconPencilPlus } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function ComponentGlobal_CreateButton({ path }: { path: string }) {
+export default function ComponentGlobal_CreateButton({
+  path,
+}: {
+  path: string;
+}) {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
 
   return (
     <>
       <ActionIcon
-        variant="transparent"
+        // bg={"blue"}
+        // variant="light"
         radius={"xl"}
         size={"xl"}
         style={{
@@ -24,7 +32,7 @@ export default function ComponentGlobal_CreateButton({ path }: { path: string })
           right: 30,
           transition: "0.5s",
           border: `1px solid ${AccentColor.skyblue}`,
-          backgroundColor: AccentColor.blue,
+          backgroundColor: AccentColor.softblue,
           padding: 3,
         }}
         onClick={() => {
@@ -33,7 +41,7 @@ export default function ComponentGlobal_CreateButton({ path }: { path: string })
         }}
       >
         {isLoading ? (
-          <Loader color={AccentColor.yellow} size={25} />
+          <Loader color={AccentColor.blue} size={25} />
         ) : (
           <IconPencilPlus color="white" />
         )}

src/app_modules/admin/event/table_status/table_publish.tsx

@@ -79,8 +79,8 @@ function TableStatus({ listPublish }: { listPublish: MODEL_EVENT[] }) {
       <td>{e?.tanggal.toLocaleString("id-ID", { dateStyle: "full" })}</td>
       <td>
         {e.tanggal.toLocaleTimeString([], {
-          hour: "2-digit",
+          timeStyle: "short",
-          minute: "2-digit",
+          hourCycle: "h24",
         })}
       </td>
       <td>

src/app_modules/admin/event/table_status/table_reject.tsx

@@ -88,8 +88,8 @@ function TableStatus({ listReject }: { listReject: MODEL_EVENT[] }) {
       <td>
         <Box w={100}>
           {e.tanggal.toLocaleTimeString([], {
-            hour: "2-digit",
+            timeStyle: "short",
-            minute: "2-digit",
+            hourCycle: "h24",
           })}
         </Box>
       </td>

src/app_modules/admin/event/table_status/table_review.tsx

@@ -73,8 +73,8 @@ function TableStatus({ listReview }: { listReview: MODEL_EVENT[] }) {
       <td>{e.tanggal.toLocaleString("id-ID", { dateStyle: "full" })}</td>
       <td>
         {e.tanggal.toLocaleTimeString([], {
-          hour: "2-digit",
+          timeStyle: "short",
-          minute: "2-digit",
+          hourCycle: "h24",
         })}
       </td>
       <td>
@@ -134,7 +134,7 @@ function TableStatus({ listReview }: { listReview: MODEL_EVENT[] }) {
             <Button
               radius={"xl"}
               onClick={() => {
-                onReject(eventId, catatan, setData, close)
+                onReject(eventId, catatan, setData, close);
               }}
             >
               Simpan

src/app_modules/event/component/box_list_status.tsx

@@ -7,6 +7,7 @@ import { MODEL_EVENT } from "../model/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_BoxListStatus({
   data,
@@ -22,11 +23,14 @@ export default function ComponentEvent_BoxListStatus({
   return (
     <>
       <Card
-        shadow="lg"
+        style={{
-        radius={"md"}
+          padding: "15px",
-        p={"md"}
+          backgroundColor: AccentColor.darkblue,
-        withBorder
+          borderRadius: "10px",
-        mb={"sm"}
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
         onClick={() => {
           setEventId(data?.id);
           setVisible(true);
@@ -34,18 +38,16 @@ export default function ComponentEvent_BoxListStatus({
         }}
       >
         <Stack>
-          <Grid>
+          <Group w={"100%"} position="apart">
-            <Grid.Col span={8}>
+            <Title order={5} lineClamp={1} w={"70%"}>
-              <Title order={6} truncate>
+              {data.title}
-                {data.title}
+            </Title>
-              </Title>
+            <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
-            </Grid.Col>
+              {new Intl.DateTimeFormat("id-ID", {
-            <Grid.Col span={4}>
+                dateStyle: "medium",
-              <Text fz={"sm"} truncate>
+              }).format(data.tanggal)}
-                {moment(data.tanggal).format("ll")}
+            </Text>
-              </Text>
+          </Group>
-            </Grid.Col>
-          </Grid>
 
           <Text fz={"sm"} lineClamp={2}>
             {data.deskripsi}

src/app_modules/event/component/card_view/card_beranda.tsx

@@ -0,0 +1,69 @@
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { Card, Grid, Group, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentEvent_CardBeranda({ data }: { data: any }) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  const [eventId, setEventId] = useState("");
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Card
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
+        <Card.Section px={"sm"} pt={"sm"}>
+          <ComponentGlobal_AuthorNameOnHeader
+            profileId={data.Author?.Profile?.id}
+            imagesId={data.Author?.Profile?.imagesId}
+            authorName={data.Author?.Profile?.name}
+            isPembatas={true}
+          />
+        </Card.Section>
+        <Card.Section
+          p={"sm"}
+          onClick={() => {
+            setEventId(data?.id);
+            setVisible(true);
+            router.push(RouterEvent.detail_main + data?.id);
+          }}
+        >
+          <Stack>
+            <Group w={"100%"} position="apart">
+              <Title order={5} lineClamp={1} w={"70%"}>
+                {data.title}
+              </Title>
+              <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+                {new Intl.DateTimeFormat("id-ID", {
+                  dateStyle: "medium",
+                }).format(data.tanggal)}
+              </Text>
+            </Group>
+
+            <Text fz={"sm"} lineClamp={2}>
+              {data.deskripsi}
+            </Text>
+          </Stack>
+        </Card.Section>
+        {visible && data?.id === eventId ? (
+          <ComponentGlobal_CardLoadingOverlay />
+        ) : (
+          ""
+        )}
+      </Card>
+    </>
+  );
+}

src/app_modules/event/component/card_view/card_kontributor.tsx

@@ -0,0 +1,78 @@
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { Avatar, Box, Card, Grid, Group, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_EVENT_PESERTA } from "../../model/interface";
+
+export function ComponentEvent_CardKontributor({data}: {data: MODEL_EVENT_PESERTA}) {
+    const router = useRouter();
+    const [eventId, setEventId] = useState("");
+    const [visible, setVisible] = useState(false);
+    
+    return (
+      <>
+        <Card
+          style={{
+            border: `2px solid ${AccentColor.blue}`,
+            backgroundColor: AccentColor.darkblue,
+            color: "white",
+            borderRadius: "10px",
+            marginBottom: "20px",
+            padding: "15px",
+          }}
+        >
+          <Card.Section px={"sm"} pt={"sm"}>
+            <ComponentGlobal_AuthorNameOnHeader
+              profileId={data?.Event.Author.Profile.id}
+              imagesId={data?.Event.Author.Profile.imagesId}
+              authorName={data?.Event.Author.Profile.name}
+              isPembatas
+            />
+          </Card.Section>
+          <Card.Section
+            p={"sm"}
+            onClick={() => {
+              setEventId(data?.id), setVisible(true);
+              router.push(RouterEvent.detail_kontribusi + data.Event.id);
+            }}
+          >
+            <Stack>
+              <Title align="center" order={5} lineClamp={1}>
+                {data?.Event.title}
+              </Title>
+
+              {/* <Text fz={"sm"} lineClamp={2}>
+                {data?.Event.deskripsi}
+              </Text> */}
+
+              <Group position="center">
+                {data?.Event.Event_Peserta.map((val, i) => (
+                  <Box key={i}>
+                    <Avatar
+                      size={"lg"}
+                      radius={"xl"}
+                      sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                      src={
+                        RouterProfile.api_foto_profile +
+                        val?.User?.Profile.imagesId
+                      }
+                    />
+                  </Box>
+                ))}
+              </Group>
+            </Stack>
+          </Card.Section>
+          {visible && eventId === data?.id ? (
+            <ComponentGlobal_CardLoadingOverlay />
+          ) : (
+            ""
+          )}
+        </Card>
+      </>
+    );
+}

src/app_modules/event/component/card_view/card_riwayat.tsx

@@ -0,0 +1,54 @@
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Card, Stack, Grid, Title, Text, Group } from "@mantine/core";
+import moment from "moment";
+import router from "next/router";
+import { MODEL_EVENT } from "../../model/interface";
+
+export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
+  return (
+    <>
+      <Card
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
+        <Card.Section px={"sm"} pt={"sm"}>
+          <ComponentGlobal_AuthorNameOnHeader
+            profileId={data.Author?.Profile?.id}
+            imagesId={data.Author?.Profile?.imagesId}
+            authorName={data.Author?.Profile?.name}
+            isPembatas={true}
+          />
+        </Card.Section>
+        <Card.Section
+          p={"sm"}
+          onClick={() => router.push(RouterEvent.detail_riwayat + data.id)}
+        >
+          <Stack>
+            <Group w={"100%"} position="apart">
+              <Title order={5} lineClamp={1} w={"70%"}>
+                {data.title}
+              </Title>
+              <Text align="right" fz={"sm"} lineClamp={1} w={"20%"}>
+                {new Intl.DateTimeFormat("id-ID", {
+                  dateStyle: "medium",
+                }).format(data.tanggal)}
+              </Text>
+            </Group>
+
+            <Text fz={"sm"} lineClamp={2}>
+              {data.deskripsi}
+            </Text>
+          </Stack>
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

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

@@ -3,6 +3,10 @@
 import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
 import moment from "moment";
 import { MODEL_EVENT } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_DetailData({
   data,
@@ -13,16 +17,25 @@ export default function ComponentEvent_DetailData({
   const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
 
   const jam = tgl.toLocaleTimeString([], {
-    hour: "2-digit",
+    timeStyle: "short",
-    minute: "2-digit",
+    hourCycle: "h24",
   });
 
   return (
     <>
       {/* <pre>{JSON.stringify(jam)}</pre> */}
-      <Paper withBorder p={"md"} shadow="lg">
+      <Paper
-        <Stack px={"sm"}>
+        p={"md"}
-          <Title w={"100%"} order={4}>{data ? data?.title : null}</Title>
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
+        <Stack px={"sm"} spacing={"lg"}>
+          <Title lineClamp={2} align="center" w={"100%"} order={4}>
+            {data ? data?.title : null}
+          </Title>
           <Grid>
             <Grid.Col span={4}>
               <Text fw={"bold"} fz={"sm"}>
@@ -67,13 +80,7 @@ export default function ComponentEvent_DetailData({
             <Text fw={"bold"} fz={"sm"}>
               Deskripsi
             </Text>
-            <Spoiler
+            <Text>{data ? data?.deskripsi : null}</Text>
-              hideLabel="Lihat sedikit"
-              maxHeight={50}
-              showLabel="Lihat banyak"
-            >
-              {data ? data?.deskripsi : null}
-            </Spoiler>
           </Stack>
         </Stack>
       </Paper>

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

@@ -4,6 +4,7 @@ import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
 import moment from "moment";
 import { MODEL_EVENT } from "../../model/interface";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_DetailMainData({
   data,
@@ -13,14 +14,21 @@ export default function ComponentEvent_DetailMainData({
   const tgl = data.tanggal;
   const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
 
-  const jam = tgl.toLocaleTimeString([], {
+ const jam = tgl.toLocaleTimeString([], {
-    hour: "2-digit",
+   timeStyle: "short",
-    minute: "2-digit",
+   hourCycle: "h24",
-  });
+ });
 
   return (
     <>
-      <Paper withBorder p={"md"} shadow="lg">
+      <Paper
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
         <Stack>
           <ComponentGlobal_AuthorNameOnHeader
             authorName={data.Author.Profile.name}
@@ -28,7 +36,7 @@ export default function ComponentEvent_DetailMainData({
             profileId={data.Author.Profile.id}
           />
           <Stack px={"sm"}>
-            <Title order={4}>{data ? data.title : null}</Title>
+            <Title align="center" order={4}>{data ? data.title : null}</Title>
             <Grid>
               <Grid.Col span={4}>
                 <Text fw={"bold"} fz={"sm"}>
@@ -73,13 +81,7 @@ export default function ComponentEvent_DetailMainData({
               <Text fw={"bold"} fz={"sm"}>
                 Deskripsi
               </Text>
-              <Spoiler
+              <Text>{data ? data?.deskripsi : null}</Text>
-                hideLabel="Lihat sedikit"
-                maxHeight={50}
-                showLabel="Lihat banyak"
-              >
-                {data ? data.deskripsi : null}
-              </Spoiler>
             </Stack>
           </Stack>
         </Stack>

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

@@ -16,6 +16,7 @@ import _ from "lodash";
 import peserta from "../../main/kontribusi/peserta";
 import { MODEL_EVENT_PESERTA } from "../../model/interface";
 import { useRouter } from "next/navigation";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_ListPeserta({
   listPeserta,
@@ -24,10 +25,18 @@ export default function ComponentEvent_ListPeserta({
   listPeserta: MODEL_EVENT_PESERTA[];
   total: number;
 }) {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <>
-      <Paper withBorder mt={"lg"}>
+      <Paper
+        mt={"lg"}
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
         <Stack spacing={"md"} p={"md"}>
           <Center>
             <Title order={5}>Daftar Peserta ({total})</Title>

src/app_modules/event/create/create.tsx

@@ -5,13 +5,7 @@ import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/inpu
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
-import {
+import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
-  Button,
-  Select,
-  Stack,
-  TextInput,
-  Textarea
-} from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
 import { useAtom } from "jotai";
 import moment from "moment";
@@ -21,6 +15,7 @@ import { useState } from "react";
 import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
 import { Event_funCreate } from "../fun/create/fun_create";
 import { gs_event_hotMenu, gs_event_status } from "../global_state";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Event_Create({
   listTipeAcara,
@@ -50,6 +45,11 @@ export default function Event_Create({
       {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
       <Stack px={"sm"}>
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul"
           placeholder="Masukan judul"
           withAsterisk
@@ -62,6 +62,11 @@ export default function Event_Create({
           }}
         />
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Tipe Acara"
           placeholder="Pilih Tipe Acara"
@@ -78,6 +83,11 @@ export default function Event_Create({
         />
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Lokasi"
           placeholder="Masukan lokasi acara"
           withAsterisk
@@ -90,6 +100,11 @@ export default function Event_Create({
           }}
         />
         <DateTimePicker
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
           }}
@@ -120,6 +135,11 @@ export default function Event_Create({
 
         <Stack spacing={5}>
           <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Deskripsi"
             placeholder="Deskripsikan acara yang akan di selenggarakan"
             withAsterisk
@@ -154,9 +174,11 @@ export default function Event_Create({
           loading={isLoading ? true : false}
           radius={"xl"}
           mt={"xl"}
-          onClick={() =>
+          onClick={() => {
             onSave(router, setTabsStatus, value, setHotMenu, setLoading)
-          }
+          }}
+          bg={MainColor.yellow}
+          color="yellow"
         >
           Simpan
         </Button>

src/app_modules/event/create/layout.tsx

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentEvent_HeaderTamplate from "../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutEvent_Create({
   children,
@@ -12,9 +14,9 @@ export default function LayoutEvent_Create({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentEvent_HeaderTamplate title="Tambah Event" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Event" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -17,6 +17,8 @@ import moment from "moment";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { Event_funDeleteById } from "../../fun/delete/fun_delete";
 import { useDisclosure } from "@mantine/hooks";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 
 export default function Event_DetailDraft({
   dataEvent,
@@ -28,7 +30,10 @@ export default function Event_DetailDraft({
       {/* <pre>{JSON.stringify(dataEvent.catatan)}</pre> */}
       <Stack spacing={"lg"}>
         {dataEvent?.catatan ? (
-          <ComponentEvent_CatatanReject catatan={dataEvent?.catatan} />
+          <ComponentGlobal_BoxInformation
+            isReport
+            informasi={dataEvent?.catatan}
+          />
         ) : (
           ""
         )}
@@ -44,7 +49,8 @@ function ButtonAction({ eventId, tanggal }: { eventId: string; tanggal: any }) {
   const [isLoadingDelete, setLoadingDelete] = useState(false);
   const [isLoadingAjukan, setLoadingAjukan] = useState(false);
   const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
-  const [opened, { open, close }] = useDisclosure(false);
+  const [openModal1, setOpenModal1] = useState(false);
+  const [openModal2, setOpenModal2] = useState(false);
 
   async function onDelete() {
     await Event_funDeleteById(eventId).then((res) => {
@@ -78,36 +84,12 @@ function ButtonAction({ eventId, tanggal }: { eventId: string; tanggal: any }) {
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Stack>
-          <Title order={6}>Yakin akan menghapus event ini?</Title>
-          <Group position="center">
-            <Button radius={"xl"} onClick={close}>
-              Batal
-            </Button>
-            <Button
-              loaderPosition="center"
-              loading={isLoadingDelete ? true : false}
-              radius={"xl"}
-              onClick={() => {
-                onDelete();
-              }}
-              color="red"
-            >
-              Hapus
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
-
       <Group grow>
         <Button
-          loaderPosition="center"
-          loading={isLoadingAjukan ? true : false}
           radius={"xl"}
           color="yellow"
           onClick={() => {
-            onAjukan();
+            setOpenModal1(true);
           }}
         >
           Ajukan Review
@@ -116,12 +98,62 @@ function ButtonAction({ eventId, tanggal }: { eventId: string; tanggal: any }) {
           radius={"xl"}
           color="red"
           onClick={() => {
-            open();
+            setOpenModal2(true);
           }}
         >
           Hapus
         </Button>
       </Group>
+
+      {/* MODAL AJUKAN */}
+      <UIGlobal_Modal
+        title={"Anda yakin ingin mengajukan event ini?"}
+        opened={openModal1}
+        close={() => setOpenModal1(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal1(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            loading={isLoadingAjukan ? true : false}
+            radius={"xl"}
+            onClick={() => {
+              onAjukan();
+            }}
+            color="yellow"
+          >
+            Ajukan
+          </Button>
+        }
+      />
+
+      {/* MODAL HAPUS */}
+      <UIGlobal_Modal
+        title={"Anda yakin ingin menghapus event ini?"}
+        opened={openModal2}
+        close={() => setOpenModal2(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal2(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            loaderPosition="center"
+            loading={isLoadingDelete ? true : false}
+            radius={"xl"}
+            onClick={() => {
+              onDelete();
+            }}
+            color="red"
+          >
+            Hapus
+          </Button>
+        }
+      />
     </>
   );
 }

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

@@ -1,26 +1,58 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
-import React from "react";
-import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
-import { IconEdit } from "@tabler/icons-react";
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon } from "@mantine/core";
+import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
 
 export default function LayoutEvent_DetailDraft({
   children,
-  eventId
+  eventId,
 }: {
   children: React.ReactNode;
-  eventId: string
+  eventId: string;
 }) {
+  const router = useRouter();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Event",
+      icon: <IconEdit />,
+      path: RouterEvent.edit + eventId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentEvent_HeaderTamplate title="Detail Draft" icon={<IconEdit/>} route2={RouterEvent.edit + eventId}/>}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Draft"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
-  )
+  );
 }

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutEvent_DetailKontribusi({
   children,
@@ -12,11 +11,11 @@ export default function LayoutEvent_DetailKontribusi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentEvent_HeaderTamplate title="Detail Kontibutor" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Kontibutor" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,31 +1,19 @@
 "use client";
 
-import {
-  Avatar,
-  Box,
-  Button,
-  Center,
-  Divider,
-  Grid,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import ComponentEvent_DetailData from "../../component/detail/detail_data";
-import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
-import _ from "lodash";
-import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
-import { useState } from "react";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import {
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+  Button,
-import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
+  Stack
+} from "@mantine/core";
 import { useRouter } from "next/navigation";
-import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
+import { useState } from "react";
+import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
+import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
+import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
+import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
+import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function Event_DetailMain({
   dataEvent,
@@ -47,7 +35,7 @@ export default function Event_DetailMain({
 
   return (
     <>
-      <Stack spacing={"lg"}>
+      <Stack spacing={"lg"} py={"md"}>
         <ComponentEvent_DetailMainData data={dataEvent} />
         {isJoin ? (
           <Button disabled radius={"xl"} color="green">

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutEvent_DetailMain({
   children,
@@ -12,11 +11,11 @@ export default function LayoutEvent_DetailMain({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentEvent_HeaderTamplate title="Detail Event" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Event" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -24,36 +24,27 @@ import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import ComponentEvent_CatatanReject from "../../component/catatan_reject";
 import { Event_funDeleteById } from "../../fun/delete/fun_delete";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { useState } from "react";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 
 export default function Event_DetailReject({
   dataEvent,
 }: {
   dataEvent: MODEL_EVENT;
 }) {
-  const router = useRouter();
-  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
-  const [opened, { open, close }] = useDisclosure(false);
-
   return (
     <>
       <Stack spacing={"lg"}>
-        <ComponentEvent_CatatanReject catatan={dataEvent.catatan} />
+        <ComponentGlobal_BoxInformation
+          isReport
+          informasi={dataEvent.catatan}
+        />
         <ComponentEvent_DetailData data={dataEvent} />
-        <SimpleGrid cols={2}>
+        <ButtonAction eventId={dataEvent?.id} />
-          <Button
-            w={"100%"}
-            radius={"xl"}
-            color="yellow"
-            onClick={() => onUpdate(router, setTabsStatus, dataEvent.id)}
-          >
-            Edit Kembali
-          </Button>
-          <Button w={"100%"} radius={"xl"} color="red" onClick={() => open()}>
-            Hapus
-          </Button>
-        </SimpleGrid>
       </Stack>
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+
+      {/* <Modal opened={opened} onClose={close} centered withCloseButton={false}>
         <Stack>
           <Title order={6}>Yakin akan menghapus event ini?</Title>
           <Group position="center">
@@ -73,7 +64,88 @@ export default function Event_DetailReject({
             </Button>
           </Group>
         </Stack>
-      </Modal>
+      </Modal> */}
+    </>
+  );
+}
+
+function ButtonAction({ eventId }: { eventId: string }) {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+  const [openModal1, setOpenModal1] = useState(false);
+  const [openModal2, setOpenModal2] = useState(false);
+
+  return (
+    <>
+      <SimpleGrid cols={2}>
+        <Button
+          w={"100%"}
+          radius={"xl"}
+          color="yellow"
+          onClick={() => {
+            setOpenModal1(true);
+          }}
+        >
+          Edit Kembali
+        </Button>
+        <Button
+          w={"100%"}
+          radius={"xl"}
+          color="red"
+          onClick={() => setOpenModal2(true)}
+        >
+          Hapus
+        </Button>
+      </SimpleGrid>
+
+      {/* MODAL EDIT */}
+      <UIGlobal_Modal
+        title={"Anda yakin ingin mengedit kembali event ini ?"}
+        opened={openModal1}
+        close={() => setOpenModal1(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal1(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color={"yellow"}
+            onClick={() => {
+              onUpdate(router, setTabsStatus, eventId);
+              setOpenModal1(false);
+            }}
+          >
+            Edit
+          </Button>
+        }
+      />
+
+      {/* MODAL HAPUS */}
+      <UIGlobal_Modal
+        title={"Anda yakin ingin menghapus event ini?"}
+        opened={openModal2}
+        close={() => setOpenModal2(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal2(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color={"red"}
+            onClick={() => {
+              onDelete(router, eventId, close);
+              setOpenModal2(false);
+
+            }}
+          >
+            Hapus
+          </Button>
+        }
+      />
     </>
   );
 }

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutEvent_DetailReject({
   children,
@@ -12,11 +11,11 @@ export default function LayoutEvent_DetailReject({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentEvent_HeaderTamplate title="Detail Reject" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -12,36 +12,63 @@ import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import ComponentEvent_CatatanReject from "../../component/catatan_reject";
 import { useState } from "react";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 
 export default function Event_DetailReview({
   dataEvent,
 }: {
   dataEvent: MODEL_EVENT;
 }) {
-  const router = useRouter();
-  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
-  const [isLoading, setLoading] = useState(false);
-
   return (
     <>
       <Stack spacing={"xl"}>
         <ComponentEvent_DetailData data={dataEvent} />
-        <Button
+        <ButtonAction eventId={dataEvent?.id} />
-          loaderPosition="center"
-          loading={isLoading ? true : false}
-          radius={"xl"}
-          color={"orange"}
-          onClick={() =>
-            onClick(router, setTabsStatus, dataEvent.id, setLoading)
-          }
-        >
-          Batalkan Review
-        </Button>
       </Stack>
     </>
   );
 }
 
+function ButtonAction({ eventId }: { eventId: string }) {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+  const [isLoading, setLoading] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
+  return (
+    <>
+      <Button
+        loaderPosition="center"
+        loading={isLoading ? true : false}
+        radius={"xl"}
+        color={"orange"}
+        onClick={() => setOpenModal(true)}
+      >
+        Batalkan Review
+      </Button>
+
+      <UIGlobal_Modal
+        title={"Anda yakin ingin batalkan review?"}
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            color={"orange"}
+            onClick={() => onClick(router, setTabsStatus, eventId, setLoading)}
+          >
+            Simpan
+          </Button>
+        }
+      />
+    </>
+  );
+}
+
 async function onClick(
   router: AppRouterInstance,
   setTabsStatus: any,

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

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutEvent_DetailReview({
   children,
@@ -12,11 +14,11 @@ export default function LayoutEvent_DetailReview({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentEvent_HeaderTamplate title="Detail Review" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,31 +1,18 @@
 "use client";
 
-import {
-  Avatar,
-  Box,
-  Button,
-  Center,
-  Divider,
-  Grid,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import ComponentEvent_DetailData from "../../component/detail/detail_data";
-import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
-import _ from "lodash";
-import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
-import { useState } from "react";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import {
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+  Stack
-import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
+} from "@mantine/core";
 import { useRouter } from "next/navigation";
-import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
+import { useState } from "react";
+import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
+import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
+import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
+import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
+import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function Event_DetailRiwayat({
   dataEvent,
@@ -41,7 +28,7 @@ export default function Event_DetailRiwayat({
   const [peserta, setPeserta] = useState(listPeserta);
   return (
     <>
-      <Stack spacing={"lg"}>
+      <Stack spacing={"lg"} py={"md"}>
         <ComponentEvent_DetailMainData data={dataEvent} />
         <ComponentEvent_ListPeserta listPeserta={listPeserta} total={total} />
       </Stack>

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

@@ -1,9 +1,8 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutEvent_DetailRiwayat({
   children,
@@ -12,9 +11,9 @@ export default function LayoutEvent_DetailRiwayat({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentEvent_HeaderTamplate title="Detail Riwayat" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/event/edit/index.tsx

@@ -6,13 +6,7 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
-import {
+import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
-  Button,
-  Select,
-  Stack,
-  TextInput,
-  Textarea
-} from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
 import _ from "lodash";
 import moment from "moment";
@@ -21,6 +15,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Event_funEditById } from "../fun/edit/fun_edit_by_id";
 import { MODEL_EVENT } from "../model/interface";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Event_Edit({
   dataEvent,
@@ -44,6 +39,11 @@ export default function Event_Edit({
       {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
       <Stack px={"sm"}>
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul"
           placeholder="judul"
           withAsterisk
@@ -66,6 +66,11 @@ export default function Event_Edit({
         />
 
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           withAsterisk
           label="Tipe Acara"
           placeholder="Pilih Tipe Acara"
@@ -85,6 +90,11 @@ export default function Event_Edit({
         />
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Lokasi"
           placeholder="lokasi acara"
           withAsterisk
@@ -106,6 +116,11 @@ export default function Event_Edit({
           }}
         />
         <DateTimePicker
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
           }}
@@ -133,6 +148,11 @@ export default function Event_Edit({
 
         <Stack spacing={5}>
           <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             label="Deskripsi"
             placeholder="Deskripsikan acara yang akan di selenggarakan"
             withAsterisk
@@ -178,6 +198,8 @@ export default function Event_Edit({
           radius={"xl"}
           mt={"xl"}
           onClick={() => onUpdate(router, value, setLoading)}
+          bg={MainColor.yellow}
+          color="yellow"
         >
           Update
         </Button>

src/app_modules/event/edit/layout.tsx

@@ -4,6 +4,8 @@ import { AppShell } from "@mantine/core";
 import React from "react";
 import ComponentEvent_HeaderTamplate from "../component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutEvent_Edit({
   children,
@@ -12,9 +14,9 @@ export default function LayoutEvent_Edit({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentEvent_HeaderTamplate title="Edit Event" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Event" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/event/fun/get/get_list_all_publish.ts

@@ -3,8 +3,12 @@
 import prisma from "@/app/lib/prisma";
 import _ from "lodash";
 
-export async function Event_getListAllPublish() {
+export async function event_getListAllPublish({ page }: { page: number }) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
   const data = await prisma.event.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       tanggal: "desc",
     },

src/app_modules/event/fun/get/get_list_kontribusi_by_user_id.ts

@@ -1,11 +1,22 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function event_getListKontibusiByUserId({page}: {page: number}) {
+  const userLoginId = await user_getOneUserId();
+
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
 
-export async function Event_getListKontibusiByUserId(userId: string) {
   const data = await prisma.event_Peserta.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      createdAt: "desc",
+    },
     where: {
-      userId: userId,
+      userId: userLoginId,
     },
     select: {
       id: true,

src/app_modules/event/fun/get/get_list_riwayat_saya.ts

@@ -1,10 +1,19 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import _ from "lodash";
 
-export async function Event_getListRiwayatSaya(authorId: string) {
+export async function event_getListRiwayatSaya({page}: {page: number}) {
+  const authorId = await user_getOneUserId();
+
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+
   const data = await prisma.event.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       tanggal: "desc",
     },

src/app_modules/event/fun/get/riwayat/get_list_semua_riwayat.ts

@@ -3,8 +3,14 @@
 import prisma from "@/app/lib/prisma";
 import _ from "lodash";
 
-export async function Event_getListSemuaRiwayat() {
+export async function event_getListSemuaRiwayat({page}: {page: number}) {
+
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
   const data = await prisma.event.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       tanggal: "desc",
     },

src/app_modules/event/fun/get/status/get_all_draft.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function event_getAllDraft({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.event.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      active: true,
+      eventMaster_StatusId: "3",
+      authorId: authorId,
+    },
+    select: {
+      id: true,
+      title: true,
+      deskripsi: true,
+      tanggal: true,
+    },
+  });
+  return data;
+}

src/app_modules/event/fun/get/status/get_all_reject.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function event_getAllReject({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.event.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      active: true,
+      eventMaster_StatusId: "4",
+      authorId: authorId,
+    },
+    select: {
+      id: true,
+      title: true,
+      deskripsi: true,
+      tanggal: true,
+    },
+  });
+  return data;
+}

src/app_modules/event/fun/get/status/get_all_review.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function event_getAllReview({ page }: { page: number }) {
+  const authorId = await user_getOneUserId();
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.event.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      active: true,
+      eventMaster_StatusId: "2",
+      authorId: authorId,
+    },
+    select: {
+      id: true,
+      title: true,
+      deskripsi: true,
+      tanggal: true,
+    },
+  });
+  return data;
+}

src/app_modules/event/main/beranda.tsx

@@ -14,6 +14,7 @@ import {
   Grid,
   Group,
   Image,
+  Loader,
   Paper,
   Skeleton,
   Stack,
@@ -33,19 +34,22 @@ import { IconCirclePlus, IconPencilPlus } from "@tabler/icons-react";
 import ComponentEvent_IsEmptyData from "../component/is_empty_data";
 import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
 import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
-import { Event_getListAllPublish } from "../fun/get/get_list_all_publish";
+import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import ComponentVote_CardViewPublish from "@/app_modules/vote/component/card_view_publish";
+import { vote_getAllListPublish } from "@/app_modules/vote/fun/get/get_all_list_publish";
+import { ScrollOnly } from "next-scroll-loader";
+import { ComponentEvent_CardBeranda } from "../component/card_view/card_beranda";
 
 export default function Event_Beranda({
   dataEvent,
 }: {
   dataEvent: MODEL_EVENT[];
 }) {
-  const router = useRouter();
   const [data, setData] = useState(dataEvent);
-  const [isLoading, setLoading] = useState(false);
+  const [activePage, setActivePage] = useState(1);
-  const [scroll, scrollTo] = useWindowScroll();
-  const [eventId, setEventId] = useState("");
-  const [visible, setVisible] = useState(false);
 
   useShallowEffect(() => {
     onLoad({
@@ -56,79 +60,42 @@ export default function Event_Beranda({
   }, [setData]);
 
   async function onLoad({ onPublish }: { onPublish: (val: any) => void }) {
-    const loadData = await Event_getListAllPublish();
+    const loadData = await event_getListAllPublish({ page: 1 });
     onPublish(loadData);
   }
 
   return (
     <>
-      <Affix position={{ bottom: rem(150), right: rem(30) }} zIndex={99}>
+      <Box>
-        <ActionIcon
+        <ComponentGlobal_CreateButton path={RouterEvent.create} />
-          loading={isLoading ? true : false}
+        {_.isEmpty(data) ? (
-          opacity={scroll.y > 0 ? 0.5 : ""}
+          <ComponentGlobal_IsEmptyData />
-          style={{
+        ) : (
-            transition: "0.5s",
+          <Box>
-          }}
+            <ScrollOnly
-          size={"xl"}
+              height="82vh"
-          radius={"xl"}
+              renderLoading={() => (
-          variant="transparent"
+                <Center mt={"lg"}>
-          bg={"blue"}
+                  <Loader color={"yellow"} />
-          onClick={() => {
+                </Center>
-            setLoading(true);
+              )}
-            router.push(RouterEvent.create);
+              data={data}
-          }}
+              setData={setData}
-        >
+              moreData={async () => {
-          <IconPencilPlus color="white" />
+                const loadData = await event_getListAllPublish({
-        </ActionIcon>
+                  page: activePage + 1,
-      </Affix>
+                });
-      {_.isEmpty(data) ? (
+
-        <ComponentEvent_IsEmptyData text="Tidak ada data" />
+                setActivePage((val) => val + 1);
-      ) : (
+
-        data.map((e, i) => (
+                return loadData;
-          <Card key={i} shadow="lg" radius={"md"} withBorder mb={"sm"}>
-            <Card.Section px={"sm"} pt={"sm"}>
-              <ComponentGlobal_AuthorNameOnHeader
-                profileId={e?.Author?.Profile?.id}
-                imagesId={e?.Author?.Profile?.imagesId}
-                authorName={e?.Author?.Profile?.name}
-                isPembatas={true}
-              />
-            </Card.Section>
-            <Card.Section
-              p={"sm"}
-              onClick={() => {
-                setEventId(e?.id);
-                setVisible(true);
-                router.push(RouterEvent.detail_main + e?.id);
               }}
             >
-              <Stack>
+              {(item) => <ComponentEvent_CardBeranda data={item} />}
-                <Grid>
+            </ScrollOnly>
-                  <Grid.Col span={8}>
+          </Box>
-                    <Title order={6} truncate>
+        )}
-                      {e?.title}
+      </Box>
-                    </Title>
-                  </Grid.Col>
-                  <Grid.Col span={4}>
-                    <Text fz={"sm"} truncate>
-                      {moment(e?.tanggal).format("ll")}
-                    </Text>
-                  </Grid.Col>
-                </Grid>
-
-                <Text fz={"sm"} lineClamp={2}>
-                  {e?.deskripsi}
-                </Text>
-              </Stack>
-            </Card.Section>
-            {visible && e?.id === eventId ? (
-              <ComponentGlobal_CardLoadingOverlay />
-            ) : (
-              ""
-            )}
-          </Card>
-        ))
-      )}
     </>
   );
 }

src/app_modules/event/main/kontribusi/index.tsx

@@ -1,109 +1,56 @@
 "use client";
 
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import {
-  Avatar,
   Box,
-  Card,
+  Center
-  Center,
-  Flex,
-  Grid,
-  Group,
-  Stack,
-  Tabs,
-  Text,
-  Title,
 } from "@mantine/core";
-import { useState } from "react";
-import Event_KontribusiPanitia from "./panitia";
-import Event_KontribusiPeserta from "./peserta";
-import moment from "moment";
-import { useRouter } from "next/navigation";
-import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { MODEL_EVENT_PESERTA } from "../../model/interface";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import _ from "lodash";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentEvent_CardKontributor } from "../../component/card_view/card_kontributor";
+import { event_getListKontibusiByUserId } from "../../fun/get/get_list_kontribusi_by_user_id";
+import { MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function Event_Kontribusi({
   listKontribusi,
 }: {
   listKontribusi: MODEL_EVENT_PESERTA[];
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(listKontribusi);
-  const [eventId, setEventId] = useState("");
+  const [activePage, setActivePage] = useState(1);
-  const [visible, setVisible] = useState(false);
-
-  if (_.isEmpty(listKontribusi))
-    return (
-      <Center h={"80vh"}>
-        <Text fw={"bold"} fz={"sm"}>
-          Tidak Ada Kontribusi
-        </Text>
-      </Center>
-    );
 
   return (
-    <>
+    <Box>
-      {/* <pre>{JSON.stringify(listKontribusi, null,2)}</pre> */}
+      {_.isEmpty(data) ? (
-      {listKontribusi.map((e, i) => (
+        <ComponentGlobal_IsEmptyData />
-        <Card key={e.id} shadow="lg" radius={"md"} withBorder mb={"sm"}>
+      ) : (
-          <Card.Section px={"sm"} pt={"sm"}>
+        <Box>
-            <ComponentGlobal_AuthorNameOnHeader
+          <ScrollOnly
-              profileId={e.Event.Author.Profile.id}
+            height="82vh"
-              imagesId={e.Event.Author.Profile.imagesId}
+            renderLoading={() => (
-              authorName={e.Event.Author.Profile.name}
+              <Center mt={"lg"}>
-            />
+                <ComponentGlobal_Loader />
-          </Card.Section>
+              </Center>
-          <Card.Section
+            )}
-            p={"sm"}
+            data={data}
-            onClick={() => {
+            setData={setData}
-              setEventId(e?.id), setVisible(true);
+            moreData={async () => {
-              router.push(RouterEvent.detail_kontribusi + e.Event.id);
+              const loadData = await event_getListKontibusiByUserId({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
             }}
           >
-            <Stack>
+            {(item) => <ComponentEvent_CardKontributor data={item} />}
-              <Grid>
+          </ScrollOnly>
-                <Grid.Col span={8}>
+        </Box>
-                  <Title order={6} truncate>
+        // --- Main component --- //
-                    {e.Event.title}
+      )}
-                  </Title>
+    </Box>
-                </Grid.Col>
-                <Grid.Col span={4}>
-                  <Text fz={"sm"} truncate>
-                    {moment(e.Event.tanggal).format("ll")}
-                  </Text>
-                </Grid.Col>
-              </Grid>
-
-              {/* <Text fz={"sm"} lineClamp={2}>
-                {e.Event.deskripsi}
-              </Text> */}
-
-              <Group position="center">
-                {e.Event.Event_Peserta.map((val, i) => (
-                  <Box key={i}>
-                    <Avatar
-                      size={"lg"}
-                      radius={"xl"}
-                      sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
-                      src={
-                        RouterProfile.api_foto_profile +
-                        val?.User?.Profile?.imagesId
-                      }
-                    />
-                  </Box>
-                ))}
-              </Group>
-            </Stack>
-          </Card.Section>
-          {visible && eventId === e?.id ? (
-            <ComponentGlobal_CardLoadingOverlay />
-          ) : (
-            ""
-          )}
-        </Card>
-      ))}
-    </>
   );
 }

src/app_modules/event/main/layout.tsx

@@ -1,31 +1,27 @@
 "use client";
 
-import {
-  ActionIcon,
-  AppShell,
-  Center,
-  Footer,
-  Grid,
-  Group,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
-import ComponentEvent_HeaderTamplate from "../component/header_tamplate";
-import {
-  IconCalendarEvent,
-  IconCirclePlus,
-  IconHistory,
-  IconHome,
-  IconTimelineEvent,
-  IconTimelineEventText,
-} from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { gs_event_hotMenu, gs_event_status } from "../global_state";
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import {
+  ActionIcon,
+  SimpleGrid,
+  Stack,
+  Text
+} from "@mantine/core";
+import {
+  IconCalendarEvent,
+  IconHistory,
+  IconHome,
+  IconTimelineEventText
+} from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { gs_event_hotMenu } from "../global_state";
 
 export default function LayoutEvent_Main({
   children,
@@ -34,6 +30,7 @@ export default function LayoutEvent_Main({
 }) {
   const router = useRouter();
   const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
+
   const listFooter = [
     {
       id: "1",
@@ -63,53 +60,79 @@ export default function LayoutEvent_Main({
   ];
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentEvent_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Event"
-            route={RouterHome.main_home}
+            routerLeft={RouterHome.main_home}
           />
         }
         footer={
-          <Footer
+          <SimpleGrid cols={4} h={"9vh"} mx={"xs"}>
-            height={"10vh"}
+            {listFooter.map((e, i) => (
-            bg={"dark"}
+              <Stack key={i} align="center" justify="center" spacing={0}>
-            sx={{ borderTop: "px solid blue" }}
+                <ActionIcon
-          >
+                  // disabled={e.path === "" ? true : false}
-            <Stack justify="center" h={"100%"}>
+                  variant="transparent"
-              <Grid >
+                  c={hotMenu === i ? MainColor.yellow : "white"}
-                {listFooter.map((e, i) => (
+                  onClick={() =>
-                  <Grid.Col
+                    e.path === ""
-                    key={e.id}
+                      ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
-                    span={"auto"}
+                      : (router.replace(e.path), setHotMenu(i))
-                    pt={"md"}
+                  }
-                    onClick={() => {
+                >
-                      router.replace(e.path);
+                  {e.icon}
-                      setHotMenu(i);
+                </ActionIcon>
-                    }}
+                <Text
-                  >
+                  c={hotMenu === i ? MainColor.yellow : "white"}
-                    <Center>
+                  fz={"xs"}
-                      <Stack align="center" spacing={0}>
+                  lineClamp={1}
-                        <ActionIcon
+                >
-                          variant="transparent"
+                  {e.name}
-                          c={hotMenu === i ? "blue" : "white"}
+                </Text>
-                        >
+              </Stack>
-                          {e.icon}
+            ))}
-                        </ActionIcon>
+          </SimpleGrid>
-                        <Text fz={10} c={hotMenu === i ? "blue" : "white"}>
+
-                          {e.name}
+          // <Footer
-                        </Text>
+          //   height={"10vh"}
-                      </Stack>
+          //   bg={"dark"}
-                    </Center>
+          //   sx={{ borderTop: "px solid blue" }}
-                  </Grid.Col>
+          // >
-                ))}
+          //   <Stack justify="center" h={"100%"}>
-              </Grid>
+          //     <Grid >
-            </Stack>
+          //       {listFooter.map((e, i) => (
-          </Footer>
+          //         <Grid.Col
+          //           key={e.id}
+          //           span={"auto"}
+          //           pt={"md"}
+          //           onClick={() => {
+          //             router.replace(e.path);
+          //             setHotMenu(i);
+          //           }}
+          //         >
+          //           <Center>
+          //             <Stack align="center" spacing={0}>
+          //               <ActionIcon
+          //                 variant="transparent"
+          //                 c={hotMenu === i ? "blue" : "white"}
+          //               >
+          //                 {e.icon}
+          //               </ActionIcon>
+          //               <Text fz={10} c={hotMenu === i ? "blue" : "white"}>
+          //                 {e.name}
+          //               </Text>
+          //             </Stack>
+          //           </Center>
+          //         </Grid.Col>
+          //       ))}
+          //     </Grid>
+          //   </Stack>
+          // </Footer>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/event/main/riwayat/index.tsx

@@ -13,6 +13,7 @@ import Event_SemuaRiwayat from "./semua";
 import Event_RiwayatSaya from "./saya";
 import { useAtom } from "jotai";
 import { gs_event_riwayat } from "../../global_state";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Event_Riwayat({
   dataSemuaRiwayat,
@@ -29,13 +30,13 @@ export default function Event_Riwayat({
       id: 1,
       label: "Semua Riwayat",
       value: "Semua",
-      path: <Event_SemuaRiwayat data={dataSemuaRiwayat as any} />,
+      path: <Event_SemuaRiwayat listData={dataSemuaRiwayat as any} />,
     },
     {
       id: 2,
       label: "Riwayat Saya",
       value: "Saya",
-      path: <Event_RiwayatSaya data={dataRiwayatSaya as any}/>,
+      path: <Event_RiwayatSaya listData={dataRiwayatSaya as any} />,
     },
   ];
 
@@ -47,6 +48,14 @@ export default function Event_Riwayat({
         radius={"xl"}
         onTabChange={setTabsRiwayat}
         value={tabsRiwayat}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+        }}
       >
         <Stack>
           <Tabs.List grow>
@@ -54,8 +63,17 @@ export default function Event_Riwayat({
               <Tabs.Tab
                 key={e.id}
                 value={e.value}
-                bg={tabsRiwayat === e.value ? "blue" : "gray.1"}
+                fw={"bold"}
-                fw={tabsRiwayat === e.value ? "bold" : "normal"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    tabsRiwayat === e.value ? MainColor.yellow : "white",
+                  border:
+                    tabsRiwayat === e.value
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
               >
                 {e.label}
               </Tabs.Tab>
@@ -68,7 +86,6 @@ export default function Event_Riwayat({
           ))}
         </Stack>
       </Tabs>
-     
     </>
   );
 }

src/app_modules/event/main/riwayat/saya.tsx

@@ -1,61 +1,50 @@
 "use client";
 
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { Card, Stack, Grid, Title, Text, Center } from "@mantine/core";
+import { Box, Center, Loader } from "@mantine/core";
-import moment from "moment";
-import { MODEL_EVENT } from "../../model/interface";
-import { useRouter } from "next/navigation";
-import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { ComponentEvent_CardRiwayat } from "../../component/card_view/card_riwayat";
+import { event_getListSemuaRiwayat } from "../../fun/get/riwayat/get_list_semua_riwayat";
+import { MODEL_EVENT } from "../../model/interface";
+import { event_getListRiwayatSaya } from "../../fun/get/get_list_riwayat_saya";
 
-export default function Event_RiwayatSaya({ data }: { data: MODEL_EVENT[] }) {
+export default function Event_RiwayatSaya({ listData }: { listData: MODEL_EVENT[] }) {
   const router = useRouter();
-
+  const [data, setData] = useState(listData);
-  if (_.isEmpty(data))
+  const [activePage, setActivePage] = useState(1);
-    return (
-      <Center h={"80vh"}>
-        <Text fw={"bold"} fz={"sm"}>
-          Tidak Ada Event
-        </Text>
-      </Center>
-    );
 
   return (
     <>
-      {data.map((e, i) => (
+      {_.isEmpty(data) ? (
-        <Card key={e.id} shadow="lg" radius={"md"} withBorder mb={"sm"}>
+        <ComponentGlobal_IsEmptyData />
-          <Card.Section px={"sm"} pt={"sm"}>
+      ) : (
-            <ComponentGlobal_AuthorNameOnHeader
+        // --- Main component --- //
-              profileId={e.Author.Profile.id}
+        <Box>
-              imagesId={e.Author.Profile.imagesId}
+          <ScrollOnly
-              authorName={e.Author.Profile.name}
+            height="75vh"
-            />
+            renderLoading={() => (
-          </Card.Section>
+              <Center mt={"lg"}>
-          <Card.Section
+                <Loader color={"yellow"} />
-            p={"sm"}
+              </Center>
-            onClick={() => router.push(RouterEvent.detail_riwayat + e.id)}
+            )}
-          >
+            data={data}
-            <Stack>
+            setData={setData}
-              <Grid>
+            moreData={async () => {
-                <Grid.Col span={8}>
+              const loadData = await event_getListRiwayatSaya({
-                  <Title order={6} truncate>
+                page: activePage + 1,
-                    {e.title}
+              });
-                  </Title>
+              setActivePage((val) => val + 1);
-                </Grid.Col>
-                <Grid.Col span={4}>
-                  <Text fz={"sm"} truncate>
-                    {moment(e.tanggal).format("ll")}
-                  </Text>
-                </Grid.Col>
-              </Grid>
 
-              <Text fz={"sm"} lineClamp={2}>
+              return loadData;
-                {e.deskripsi}
+            }}
-              </Text>
+          >
-            </Stack>
+            {(item) => <ComponentEvent_CardRiwayat data={item} />}
-          </Card.Section>
+          </ScrollOnly>
-        </Card>
+        </Box>
-      ))}
+      )}
     </>
   );
 }

src/app_modules/event/main/riwayat/semua.tsx

@@ -2,61 +2,67 @@
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import { Card, Stack, Grid, Title, Text, Center } from "@mantine/core";
+import {
+  Card,
+  Stack,
+  Grid,
+  Title,
+  Text,
+  Center,
+  Box,
+  Loader,
+} from "@mantine/core";
 import moment from "moment";
 
 import { MODEL_EVENT } from "../../model/interface";
 import { useRouter } from "next/navigation";
 import _ from "lodash";
+import { useState } from "react";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentEvent_BoxListStatus from "../../component/box_list_status";
+import { event_getAllDraft } from "../../fun/get/status/get_all_draft";
+import { ComponentEvent_CardRiwayat } from "../../component/card_view/card_riwayat";
+import { event_getListSemuaRiwayat } from "../../fun/get/riwayat/get_list_semua_riwayat";
 
-export default function Event_SemuaRiwayat({ data }: { data: MODEL_EVENT[] }) {
+export default function Event_SemuaRiwayat({
+  listData,
+}: {
+  listData: MODEL_EVENT[];
+}) {
   const router = useRouter();
-
+  const [data, setData] = useState(listData);
-  if (_.isEmpty(data))
+  const [activePage, setActivePage] = useState(1);
-    return (
-      <Center h={"80vh"}>
-        <Text fw={"bold"} fz={"sm"}>
-          Tidak Ada Event
-        </Text>
-      </Center>
-    );
 
   return (
     <>
-      {data.map((e, i) => (
+      {_.isEmpty(data) ? (
-        <Card key={e.id} shadow="lg" radius={"md"} withBorder mb={"sm"}>
+        <ComponentGlobal_IsEmptyData />
-          <Card.Section px={"sm"} pt={"sm"}>
+      ) : (
-            <ComponentGlobal_AuthorNameOnHeader
+        // --- Main component --- //
-              profileId={e.Author.Profile.id}
+        <Box>
-              imagesId={e.Author.Profile.imagesId}
+          <ScrollOnly
-              authorName={e.Author.Profile.name}
+            height="75vh"
-            />
+            renderLoading={() => (
-          </Card.Section>
+              <Center mt={"lg"}>
-          <Card.Section
+                <Loader color={"yellow"} />
-            p={"sm"}
+              </Center>
-            onClick={() => router.push(RouterEvent.detail_riwayat + e.id)}
+            )}
-          >
+            data={data}
-            <Stack>
+            setData={setData}
-              <Grid>
+            moreData={async () => {
-                <Grid.Col span={8}>
+              const loadData = await event_getListSemuaRiwayat({
-                  <Title order={6} truncate>
+                page: activePage + 1,
-                    {e.title}
+              });
-                  </Title>
+              setActivePage((val) => val + 1);
-                </Grid.Col>
-                <Grid.Col span={4}>
-                  <Text fz={"sm"} truncate>
-                    {moment(e.tanggal).format("ll")}
-                  </Text>
-                </Grid.Col>
-              </Grid>
 
-              <Text fz={"sm"} lineClamp={2}>
+              return loadData;
-                {e.deskripsi}
+            }}
-              </Text>
+          >
-            </Stack>
+            {(item) => <ComponentEvent_CardRiwayat data={item} />}
-          </Card.Section>
+          </ScrollOnly>
-        </Card>
+        </Box>
-      ))}
+      )}
     </>
   );
 }

src/app_modules/event/main/status_page/draft.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { Box, Center, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { Box, Center, Group, Loader, Paper, Stack, Text, Title } from "@mantine/core";
 import moment from "moment";
 import { useRouter } from "next/navigation";
 import { MODEL_EVENT } from "../../model/interface";
@@ -9,24 +9,59 @@ import { useState } from "react";
 import ComponentEvent_BoxListStatus from "../../component/box_list_status";
 import _ from "lodash";
 import ComponentEvent_IsEmptyData from "../../component/is_empty_data";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import { event_getAllReview } from "../../fun/get/status/get_all_review";
+import { event_getAllDraft } from "../../fun/get/status/get_all_draft";
 
 export default function Event_StatusDraft({
   listDraft,
 }: {
   listDraft: MODEL_EVENT[];
 }) {
-  if (_.isEmpty(listDraft))
+   const [data, setData] = useState(listDraft);
-    return <ComponentEvent_IsEmptyData text="Tidak ada data" />;
+   const [activePage, setActivePage] = useState(1);
-  return (
+
-    <>
+
-      {listDraft.map((e, i) => (
+   return (
-        <Box key={e.id}>
+     <>
-          <ComponentEvent_BoxListStatus
+       {_.isEmpty(data) ? (
-            data={e}
+         <ComponentGlobal_IsEmptyData />
-            path={RouterEvent.detail_draft}
+       ) : (
-          />
+         // --- Main component --- //
-        </Box>
+         <Box>
-      ))}
+           <ScrollOnly
-    </>
+             height="75vh"
-  );
+             renderLoading={() => (
+               <Center mt={"lg"}>
+                 <Loader color={"yellow"} />
+               </Center>
+             )}
+             data={data}
+             setData={setData}
+             moreData={async () => {
+               const loadData = await event_getAllDraft({
+                 page: activePage + 1,
+               });
+               setActivePage((val) => val + 1);
+
+               return loadData;
+             }}
+           >
+             {(item) => (
+               <ComponentEvent_BoxListStatus
+                 data={item}
+                 path={RouterEvent.detail_draft}
+               />
+             )}
+           </ScrollOnly>
+         </Box>
+       )}
+     </>
+   );
+
+
+
+  
+
 }

src/app_modules/event/main/status_page/index.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { Stack, Tabs } from "@mantine/core";
-import { Affix, Button, Stack, Tabs, rem } from "@mantine/core";
-import { IconCirclePlus } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
 import { gs_event_status } from "../../global_state";
-import Event_StatusPublish from "./publish";
-import Event_StatusReview from "./review";
 import Event_StatusDraft from "./draft";
+import Event_StatusPublish from "./publish";
 import Event_StatusReject from "./reject";
-import { MODEL_EVENT } from "../../model/interface";
+import Event_StatusReview from "./review";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function Event_StatusPage({
   authorId,
@@ -20,7 +20,7 @@ export default function Event_StatusPage({
   listDraft,
   listReject,
 }: {
-  authorId: string
+  authorId: string;
   listPublish: any;
   listReview: any;
   listDraft: any;
@@ -36,7 +36,7 @@ export default function Event_StatusPage({
     },
     {
       id: 2,
-      path: <Event_StatusReview listReview={listReview} authorId={authorId} />,
+      path: <Event_StatusReview listReview={listReview} />,
       value: "Review",
     },
     {
@@ -52,15 +52,22 @@ export default function Event_StatusPage({
   ];
   return (
     <>
-      
-
       <Tabs
-        color="blue"
         variant="pills"
         radius="xl"
+        mt={1}
         defaultValue="Publish"
         value={tabsStatus}
         onTabChange={setTabsStatus}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+         
+        }}
       >
         <Stack>
           <Tabs.List grow>
@@ -68,8 +75,17 @@ export default function Event_StatusPage({
               <Tabs.Tab
                 key={e.id}
                 value={e.value}
-                bg={tabsStatus === e.value ? "blue" : "gray.1"}
+                fw={"bold"}
-                fw={tabsStatus === e.value ? "bold" : "normal"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    tabsStatus === e.value ? MainColor.yellow : "white",
+                  border:
+                    tabsStatus === e.value
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
               >
                 {e.value}
               </Tabs.Tab>

src/app_modules/event/main/status_page/reject.tsx

@@ -1,31 +1,70 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { Box, Center, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import {
+  Box,
+  Center,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import moment from "moment";
 import { useRouter } from "next/navigation";
 import { MODEL_EVENT } from "../../model/interface";
 import ComponentEvent_BoxListStatus from "../../component/box_list_status";
 import _ from "lodash";
 import ComponentEvent_IsEmptyData from "../../component/is_empty_data";
+import { event_getAllReject } from "../../fun/get/status/get_all_reject";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { event_getAllReview } from "../../fun/get/status/get_all_review";
 
 export default function Event_StatusReject({
   listReject,
 }: {
   listReject: MODEL_EVENT[];
 }) {
-  if (_.isEmpty(listReject))
+  const [data, setData] = useState(listReject);
-    return <ComponentEvent_IsEmptyData text="Tidak ada data" />;
+  const [activePage, setActivePage] = useState(1);
+
   return (
     <>
-      {listReject.map((e, i) => (
+      {_.isEmpty(data) ? (
-        <Box key={e.id}>
+        <ComponentGlobal_IsEmptyData />
-          <ComponentEvent_BoxListStatus
+      ) : (
-            data={e}
+        // --- Main component --- //
-            path={RouterEvent.detail_reject}
+        <Box>
-          />
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await event_getAllReject({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentEvent_BoxListStatus
+                data={item}
+                path={RouterEvent.detail_reject}
+              />
+            )}
+          </ScrollOnly>
         </Box>
-      ))}
+      )}
     </>
   );
 }

src/app_modules/event/main/status_page/review.tsx

@@ -1,39 +1,59 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { Box, Center, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import moment from "moment";
+import { Box, Center, Loader } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import _ from "lodash";
-import { MODEL_EVENT } from "../../model/interface";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import ComponentEvent_BoxListStatus from "../../component/box_list_status";
-import _ from "lodash";
+import { event_getAllReview } from "../../fun/get/status/get_all_review";
-import { useShallowEffect } from "@mantine/hooks";
+import { MODEL_EVENT } from "../../model/interface";
-import { Event_getListByStatusId } from "../../fun/get/get_list_event_by_status_id";
-import ComponentEvent_IsEmptyData from "../../component/is_empty_data";
 
 export default function Event_StatusReview({
   listReview,
-  authorId,
+
 }: {
   listReview: MODEL_EVENT[];
-  authorId: string;
+
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(listReview);
+  const [activePage, setActivePage] = useState(1);
 
-
- if (_.isEmpty(listReview))
-    return <ComponentEvent_IsEmptyData text="Tidak ada data"/>
   return (
     <>
-      {listReview.map((e, i) => (
+      {_.isEmpty(data) ? (
-        <Box key={e.id}>
+        <ComponentGlobal_IsEmptyData />
-          <ComponentEvent_BoxListStatus
+      ) : (
-            data={e}
+        // --- Main component --- //
-            path={RouterEvent.detail_review}
+        <Box>
-          />
+          <ScrollOnly
+            height="75vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await event_getAllReview({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentEvent_BoxListStatus
+                data={item}
+                path={RouterEvent.detail_review}
+              />
+            )}
+          </ScrollOnly>
         </Box>
-      ))}
+      )}
     </>
   );
 }

src/app_modules/event/splash/index.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { AspectRatio, Center, Image, Paper, Stack, Title } from "@mantine/core";
+import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
-import { useShallowEffect, useTimeout } from "@mantine/hooks";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconPresentation } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { gs_event_hotMenu, gs_event_status } from "../global_state";
@@ -21,11 +22,7 @@ export default function Event_SplashScreen() {
   }, []);
   return (
     <>
-      <Center h={"100vh"}>
+      <UIGlobal_SplashScreen icon={<IconPresentation size={300} />} />
-        <Paper p={{ base: 50, md: 60, lg: 80 }}>
-          <Image alt="event" src={"/aset/event/splash-event.png"} />
-        </Paper>
-      </Center>
     </>
   );
 }

src/app_modules/forum/main/beranda.tsx

@@ -23,6 +23,7 @@ import { useState } from "react";
 import ComponentForum_BerandaCardView from "../component/main_component/card_view";
 import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
 import { MODEL_FORUM_POSTING } from "../model/interface";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 
 export default function Forum_Beranda({
   listForum,
@@ -134,7 +135,7 @@ export default function Forum_Beranda({
       )}
 
       {/* <pre>{JSON.stringify(listForum, null, 2)}</pre> */}
-      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+      {/* <Affix position={{ bottom: rem(100), right: rem(30) }}>
         <ActionIcon
           opacity={scroll.y > 0 ? 0.5 : ""}
           style={{
@@ -156,9 +157,11 @@ export default function Forum_Beranda({
             <IconPencilPlus color="white" />
           )}
         </ActionIcon>
-      </Affix>
+      </Affix> */}
 
-      <Stack spacing={"xl"} >
+      <ComponentGlobal_CreateButton path={RouterForum.create} />
+
+      <Stack spacing={"xl"}>
         <TextInput
           radius={"xl"}
           placeholder="Topik forum apa yang anda cari hari ini ?"

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

@@ -10,6 +10,8 @@ import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
 import { job_getAllListPublish } from "../../fun/get/get_all_publish";
 import ComponentJob_CreateButton from "../../component/button/create_button";
 import { IconSearch } from "@tabler/icons-react";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 
 export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
   const [data, setData] = useState(listData);
@@ -29,7 +31,8 @@ export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
   return (
     <>
       <Stack my={1} spacing={30}>
-        <ComponentJob_CreateButton />
+        {/* <ComponentJob_CreateButton /> */}
+        <ComponentGlobal_CreateButton path={RouterJob.create}/>
 
         <TextInput
 

src/app_modules/job/main/layout.tsx

@@ -54,7 +54,7 @@ export default function LayoutJob_Main({
           />
         }
         footer={
-          <SimpleGrid cols={3} h={"10vh"} mx={"xs"}>
+          <SimpleGrid cols={3} h={"9vh"} mx={"xs"}>
             {listFooter.map((e, i) => (
               <Stack key={i} align="center" justify="center" spacing={0}>
                 <ActionIcon

src/app_modules/vote/component/card_view_publish.tsx

@@ -118,13 +118,9 @@ export default function ComponentVote_CardViewPublish({
                       <Text>{v.value}</Text>
                       <Text>{v.jumlah}</Text>
                     </Group>
-                    <Progress
+                    <Progress size={"xl"} radius={"xl"} value={v.jumlah} color="yellow" />
-                      size={"xl"}
-                      radius={"xl"}
-                      value={v.jumlah}
-                      color="yellow"
-                    />
                   </Stack>
+                
                 ))}
               </Stack>
             ) : (

src/app_modules/vote/main/beranda.tsx

@@ -1,28 +1,16 @@
 "use client";
 
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import {
-  ActionIcon,
-  Affix,
-  Box,
-  Center,
-  Loader,
-  Stack,
-  rem,
-} from "@mantine/core";
-import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import { IconPencilPlus } from "@tabler/icons-react";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import ComponentVote_CardViewPublish from "../component/card_view_publish";
-import ComponentVote_IsEmptyData from "../component/is_empty_data";
-import { vote_getAllListPublish } from "../fun/get/get_all_list_publish";
-import { MODEL_VOTING } from "../model/interface";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
+import { Box, Center, Loader } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentVote_CardViewPublish from "../component/card_view_publish";
+import { vote_getAllListPublish } from "../fun/get/get_all_list_publish";
+import { MODEL_VOTING } from "../model/interface";
 
 export default function Vote_Beranda({
   dataVote,
@@ -30,6 +18,7 @@ export default function Vote_Beranda({
   dataVote: MODEL_VOTING[];
 }) {
   const [data, setData] = useState(dataVote);
+  const [activePage, setActivePage] = useState(1);
 
   useShallowEffect(() => {
     onLoad({
@@ -44,42 +33,44 @@ export default function Vote_Beranda({
     setData(loadData);
   }
 
-  const [activePage, setActivePage] = useState(1);
-
   return (
-    <>
+    <Box>
+      <ComponentGlobal_CreateButton path={RouterVote.create} />
+
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
+        <Box>
+          <ScrollOnly
+            height="82vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await vote_getAllListPublish({
+                page: activePage + 1,
+              });
+
+              setActivePage((val) => val + 1);
+
+              return loadData;
+            }}
+          >
+            {(item) => (
+              <ComponentVote_CardViewPublish
+                data={item}
+                path={RouterVote.main_detail}
+                authorName={true}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
         // --- Main component --- //
-        <ScrollOnly
-          height="82vh"
-          renderLoading={() => (
-            <Center mt={"lg"}>
-              <Loader color={"yellow"} />
-            </Center>
-          )}
-          data={data}
-          setData={setData}
-          moreData={async () => {
-            const loadData = await vote_getAllListPublish({
-              page: activePage + 1,
-            });
-
-            setActivePage((val) => val + 1);
-
-            return loadData;
-          }}
-        >
-          {(item) => (
-            <ComponentVote_CardViewPublish
-              data={item}
-              path={RouterVote.main_detail}
-              authorName={true}
-            />
-          )}
-        </ScrollOnly>
       )}
-    </>
+    </Box>
   );
 }

src/app_modules/vote/main/layout.tsx

@@ -1,33 +1,22 @@
 "use client";
 
-import {
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-  ActionIcon,
-  AppShell,
-  Center,
-  Footer,
-  Grid,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@mantine/core";
-import React, { useState } from "react";
-import ComponentVote_HeaderTamplate from "../component/header_tamplate";
-import { useRouter } from "next/navigation";
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
 import {
   IconClick,
   IconHistory,
   IconHome,
   IconReservedLine,
 } from "@tabler/icons-react";
-import { gs_vote_hotMenu } from "../global_state";
 import { useAtom } from "jotai";
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { useRouter } from "next/navigation";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import React from "react";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { gs_vote_hotMenu } from "../global_state";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 
 export default function LayoutVote_Main({
   children,
@@ -75,7 +64,7 @@ export default function LayoutVote_Main({
           />
         }
         footer={
-          <SimpleGrid cols={4} h={"9vh"} mx={"xs"} >
+          <SimpleGrid cols={4} h={"9vh"} mx={"xs"}>
             {listFooter.map((e, i) => (
               <Stack key={i} align="center" justify="center" spacing={0}>
                 <ActionIcon
@@ -100,40 +89,9 @@ export default function LayoutVote_Main({
               </Stack>
             ))}
           </SimpleGrid>
-          // <Footer
-          //   height={"10vh"}
-          //   bg={"dark"}
-          //   sx={{ borderTop: "px solid blue" }}
-          // >
-          //   <Stack h={"100%"} justify="center">
-          //     <Grid>
-          //       {listFooter.map((e, i) => (
-          //         <Grid.Col key={e.id} span={"auto"} pt={"md"}>
-          //           <Center
-          //             onClick={() => {
-          //               router.replace(e.path);
-          //               setHotMenu(i);
-          //             }}
-          //           >
-          //             <Stack align="center" spacing={0}>
-          //               <ActionIcon
-          //                 variant="transparent"
-          //                 c={hotMenu === i ? "blue" : "white"}
-          //               >
-          //                 {e.icon}
-          //               </ActionIcon>
-          //               <Text fz={10} c={hotMenu === i ? "blue" : "white"}>
-          //                 {e.name}
-          //               </Text>
-          //             </Stack>
-          //           </Center>
-          //         </Grid.Col>
-          //       ))}
-          //     </Grid>
-          //   </Stack>
-          // </Footer>
         }
       >
+       
         {children}
       </UIGlobal_LayoutTamplate>
     </>