# Event

## feat
- Tampilan detail status
- Tampilan detail main
- Tampilan detail kontribusi
- Tampilan edit
### No issue

package.json

@@ -13,6 +13,7 @@
     "@emotion/server": "^11.11.0",
     "@mantine/carousel": "^7.1.5",
     "@mantine/core": "^6.0.17",
+    "@mantine/dates": "^6.0.17",
     "@mantine/dropzone": "^7.1.3",
     "@mantine/hooks": "^6.0.17",
     "@mantine/next": "^6.0.17",
@@ -25,6 +26,7 @@
     "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.4",
     "autoprefixer": "10.4.14",
+    "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "embla-carousel-react": "^8.0.0-rc14",

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

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

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

@@ -0,0 +1,9 @@
+import { Event_Create } from "@/app_modules/event";
+import { Event_getListUser } from "@/app_modules/event/fun/get/get_list_user";
+import _ from "lodash";
+
+export default async function Page() {
+  const listUser = await Event_getListUser();
+
+  return <Event_Create listUser={listUser as any} />;
+}

src/app/dev/event/detail/draft/layout.tsx

@@ -0,0 +1,11 @@
+
+import { LayoutEvent_DetailDraft } from "@/app_modules/event";
+import React from "react";
+
+export default async function Page({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <LayoutEvent_DetailDraft>{children}</LayoutEvent_DetailDraft>;
+}

src/app/dev/event/detail/draft/page.tsx

@@ -0,0 +1,5 @@
+import { Event_DetailDraft } from "@/app_modules/event";
+
+export default async function Page() {
+  return <Event_DetailDraft />;
+}

src/app/dev/event/detail/kontribusi/layout.tsx

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

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

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

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

@@ -0,0 +1,15 @@
+import { LayoutEvent_DetailMain } from "@/app_modules/event";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutEvent_DetailMain>{children}</LayoutEvent_DetailMain>
+    </>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { Event_DetailMain } from "@/app_modules/event";
+
+export default async function Page() {
+    return <>
+    <Event_DetailMain/>
+    </>
+}

src/app/dev/event/detail/publish/layout.tsx

@@ -0,0 +1,11 @@
+
+import { LayoutEvent_DetailPublish } from "@/app_modules/event";
+import React from "react";
+
+export default async function Page({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <LayoutEvent_DetailPublish>{children}</LayoutEvent_DetailPublish>;
+}

src/app/dev/event/detail/publish/page.tsx

@@ -0,0 +1,5 @@
+import { Event_DetailPublish } from "@/app_modules/event";
+
+export default async function Page() {
+  return <Event_DetailPublish />;
+}

src/app/dev/event/detail/reject/layout.tsx

@@ -0,0 +1,11 @@
+
+import {  LayoutEvent_DetailReject } from "@/app_modules/event";
+import React from "react";
+
+export default async function Page({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <LayoutEvent_DetailReject>{children}</LayoutEvent_DetailReject>;
+}

src/app/dev/event/detail/reject/page.tsx

@@ -0,0 +1,5 @@
+import { Event_DetailReject } from "@/app_modules/event";
+
+export default async function Page() {
+  return <Event_DetailReject />;
+}

src/app/dev/event/detail/review/layout.tsx

@@ -0,0 +1,11 @@
+
+import { LayoutEvent_DetailReview } from "@/app_modules/event";
+import React from "react";
+
+export default async function Page({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <LayoutEvent_DetailReview>{children}</LayoutEvent_DetailReview>
+}

src/app/dev/event/detail/review/page.tsx

@@ -0,0 +1,6 @@
+import { Event_DetailReview } from "@/app_modules/event";
+
+
+export default async function Page() {
+  return <Event_DetailReview />;
+}

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

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

src/app/dev/event/edit/page.tsx

@@ -0,0 +1,7 @@
+import { Event_Edit } from "@/app_modules/event";
+
+export default async function Page() {
+    return<>
+    <Event_Edit/>
+    </>
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+import { Event_Beranda } from "@/app_modules/event";
+
+export default function Page() {
+  return (
+    <>
+      <Event_Beranda />
+    </>
+  );
+}

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

@@ -0,0 +1,8 @@
+import { Event_Kontribusi } from "@/app_modules/event";
+
+
+export default async function Page() {
+    return<>
+    <Event_Kontribusi/>
+    </>
+}

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

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

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

@@ -0,0 +1,5 @@
+import { Event_StatusPage } from "@/app_modules/event";
+
+export default async function Page() {
+    return <Event_StatusPage/>
+}

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

@@ -0,0 +1,5 @@
+import { Event_SplashScreen } from "@/app_modules/event";
+
+export default async function Page() {
+  return <Event_SplashScreen />;
+}

src/app/lib/router_hipmi/router_event.ts

@@ -0,0 +1,27 @@
+export const RouterEvent = {
+  //main
+  splash: "/dev/event/splash",
+  beranda: "/dev/event/main/beranda",
+  kontribusi: "/dev/event/main/kontribusi",
+
+  // status
+  status_page: "/dev/event/main/status_page",
+  status_publish: "/dev/event/main/status_page/publish",
+  status_review: "/dev/event/main/status_page/review",
+  status_draft: "/dev/event/main/status_page/draft",
+  status_reject: "/dev/event/main/status_page/reject",
+
+  //create
+  create: "/dev/event/create",
+
+  // edit
+  edit: "/dev/event/edit",
+
+  // detail
+  detail_main: "/dev/event/detail/main",
+  detail_kontribusi: "/dev/event/detail/kontribusi",
+  detail_publish: "/dev/event/detail/publish",
+  detail_review: "/dev/event/detail/review",
+  detail_draft: "/dev/event/detail/draft",
+  detail_reject: "/dev/event/detail/reject",
+};

src/app_modules/component_global/notif_global/notifikasi_berhasil.tsx

@@ -1,14 +1,23 @@
 import { Center, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { IconAlertTriangle, IconChecklist, IconCircleCheck } from "@tabler/icons-react";
+import {
+  IconAlertTriangle,
+  IconChecklist,
+  IconCircleCheck,
+} from "@tabler/icons-react";
 
 /**
- * 
+ *
  * @param text | masukan text untuk peringatan
  * @type string
- * @returns notifikasi peringatan
+ * @param durasi | durasi autoClose
+ * @type number
+ * @returns notifikasi berhasil warna hijau
  */
-export async function ComponentGlobal_NotifikasiBerhasil(text: string) {
+export async function ComponentGlobal_NotifikasiBerhasil(
+  text: string,
+  durasi?: number
+) {
   return notifications.show({
     message: (
       <Center>
@@ -17,7 +26,7 @@ export async function ComponentGlobal_NotifikasiBerhasil(text: string) {
     ),
     color: "green",
     radius: "md",
-    autoClose: 1000,
+    autoClose: durasi ? durasi : 1000,
     icon: <IconCircleCheck color="white" />,
     withCloseButton: false,
 

src/app_modules/event/component/detail_data.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Stack, Title, Grid, Text, Paper } from "@mantine/core";
+import moment from "moment";
+
+export default function ComponentEvent_DetailData() {
+  return (
+    <>
+      <Paper withBorder p={"md"} shadow="lg">
+        <Stack px={"sm"}>
+          <Title order={4}>Nama Event</Title>
+          <Grid>
+            <Grid.Col span={3}>
+              <Text fw={"bold"}>Lokasi</Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text>Lokasi Acara</Text>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={3}>
+              <Text fw={"bold"}>Tanggal</Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>{moment(Date.now()).format("ll")}</Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={3}>
+              <Text fw={"bold"}>Jam</Text>
+            </Grid.Col>
+            <Grid.Col span={1}>:</Grid.Col>
+            <Grid.Col span={"auto"}>{moment(Date.now()).format("LT")}</Grid.Col>
+          </Grid>
+          <Stack spacing={2}>
+            <Text fw={"bold"}>Deskripsi</Text>
+            <Text>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
+              ipsum voluptate doloremque optio explicabo temporibus delectus
+              voluptatum similique tempora voluptatem. Exercitationem veritatis
+              tempora impedit ipsam, fugit vitae repellat sint fugiat
+            </Text>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}

src/app_modules/event/component/header_tamplate.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentEvent_HeaderTamplate({
+  hideBack,
+  changeIconBack,
+  route,
+  route2,
+  title,
+  icon,
+  bg,
+}: {
+  hideBack?: boolean;
+  changeIconBack?: any
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+  bg?: any;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header
+        height={50}
+        sx={{ borderStyle: "none" }}
+        bg={bg === null ? "" : bg}
+      >
+        <Group h={50} position="apart" px={"md"}>
+          {hideBack ? (
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                if (route === null || route === undefined) {
+                  return router.back();
+                } else {
+                  return router.push(route);
+                }
+              }}
+            >
+             {changeIconBack ? changeIconBack:  <IconChevronLeft />}
+            </ActionIcon>
+          )}
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/event/create/create.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import {
+  AspectRatio,
+  Avatar,
+  Box,
+  Button,
+  Center,
+  FileButton,
+  Image,
+  MultiSelect,
+  Paper,
+  Stack,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { DateTimePicker } from "@mantine/dates";
+import { TimeInput } from "@mantine/dates";
+import { IconCamera } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { gs_event_status } from "../global_state";
+
+export default function Event_Create({ listUser }: { listUser: MODEL_USER[] }) {
+  const router = useRouter();
+  const [img, setImg] = useState<any>();
+  const [file, setFile] = useState<any>();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <TextInput label="Judul" placeholder="Masukan judul" withAsterisk />
+        <TextInput
+          label="Lokasi"
+          placeholder="Masukan lokasi acara"
+          withAsterisk
+        />
+        <DateTimePicker
+          withAsterisk
+          label="Tanggal & Waktu "
+          placeholder="Masukan tangal dan waktu acara"
+          onChange={(val) => console.log(val)}
+        />
+        <Textarea
+          label="Deskripsi"
+          placeholder="Deskripsikan acara yang akan di selenggarakan"
+          withAsterisk
+        />
+
+        <Button
+          radius={"xl"}
+          mt={"xl"}
+          onClick={() => onSave(router, setTabsStatus)}
+        >
+          Simpan
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+async function onSave(router: AppRouterInstance, setTabsStatus: any) {
+  ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
+  setTabsStatus("Review");
+  router.push(RouterEvent.status_page);
+}

src/app_modules/event/create/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentEvent_HeaderTamplate from "../component/header_tamplate";
+
+export default function LayoutEvent_Create({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentEvent_HeaderTamplate title="Tambah Event" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { Button, Stack } from "@mantine/core";
+import ComponentEvent_DetailData from "../../component/detail_data";
+import { useRouter } from "next/navigation";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useAtom } from "jotai";
+import { gs_event_status } from "../../global_state";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+
+export default function Event_DetailDraft() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+  return (
+    <>
+      <Stack spacing={"lg"}>
+        <ComponentEvent_DetailData />
+        <Button
+          radius={"xl"}
+          color="yellow"
+          onClick={() => {
+            onClick(router, setTabsStatus);
+          }}
+        >
+          Ajukan Review
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+async function onClick(router: AppRouterInstance, setTabsStatus: any) {
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Diajukan", 1500)
+    setTabsStatus("Review")
+    router.back()
+}

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

@@ -0,0 +1,23 @@
+"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";
+
+export default function LayoutEvent_DetailDraft({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentEvent_HeaderTamplate title="Detail Draft" icon={<IconEdit/>} route2={RouterEvent.edit}/>}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import {
+  Avatar,
+  Center,
+  Divider,
+  Grid,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import ComponentEvent_DetailData from "../../component/detail_data";
+
+export default function Event_DetailKontribusi() {
+  return (
+    <>
+      <Stack spacing={"lg"}>
+        <ComponentEvent_DetailData />
+        <Paper withBorder mt={"lg"} shadow="lg">
+          <Stack spacing={"md"} p={"md"}>
+            <Center>
+              <Title order={5}>Daftar Peserta</Title>
+            </Center>
+
+            {Array(10)
+              .fill(0)
+              .map((e, i) => (
+                <Stack key={i} spacing={"sm"}>
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <Avatar radius={"xl"} bg={"gray"} size={"md"} />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Stack justify="center" h={"100%"}>
+                        <Text>Nama peserta</Text>
+                      </Stack>
+                    </Grid.Col>
+                  </Grid>
+                  <Divider />
+                </Stack>
+              ))}
+          </Stack>
+        </Paper>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutEvent_DetailKontribusi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentEvent_HeaderTamplate title="Detail Kontibutor" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Divider,
+  Grid,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import ComponentEvent_DetailData from "../../component/detail_data";
+
+export default function Event_DetailMain() {
+  return (
+    <>
+      <Stack spacing={"lg"}>
+        <ComponentEvent_DetailData />
+        <Button radius={"xl"} color="green">
+          JOIN
+        </Button>
+
+        <Paper withBorder mt={"lg"}>
+          <Stack spacing={"md"} p={"md"}>
+            <Center>
+              <Title order={5}>Daftar Peserta</Title>
+            </Center>
+
+            {Array(10)
+              .fill(0)
+              .map((e, i) => (
+                <Stack key={i} spacing={"sm"}>
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <Avatar radius={"xl"} bg={"gray"} size={"md"} />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Stack justify="center" h={"100%"}>
+                        <Text>Nama peserta</Text>
+                      </Stack>
+                    </Grid.Col>
+                  </Grid>
+                  <Divider />
+                </Stack>
+              ))}
+          </Stack>
+        </Paper>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutEvent_DetailMain({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentEvent_HeaderTamplate title="Detail Event" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+import { Button, Grid, Group, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import ComponentEvent_DetailData from "../../component/detail_data";
+
+export default function Event_DetailPublish() {
+  return (
+    <>
+      <ComponentEvent_DetailData/>
+    </>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutEvent_DetailPublish({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentEvent_HeaderTamplate title="Detail Publish" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  Box,
+  Button,
+  Grid,
+  Group,
+  Modal,
+  SimpleGrid,
+  Stack,
+  Title,
+} from "@mantine/core";
+import ComponentEvent_DetailData from "../../component/detail_data";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { gs_event_status } from "../../global_state";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { useDisclosure } from "@mantine/hooks";
+
+export default function Event_DetailReject() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <>
+      <Stack spacing={"lg"}>
+        <ComponentEvent_DetailData />
+        <SimpleGrid cols={2}>
+          <Button
+            w={"100%"}
+            radius={"xl"}
+            color="yellow"
+            onClick={() => onUpdate(router, setTabsStatus)}
+          >
+            Edit Kembali
+          </Button>
+          <Button w={"100%"} radius={"xl"} color="red" onClick={() => open()}>
+            Hapus
+          </Button>
+        </SimpleGrid>
+      </Stack>
+      <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 radius={"xl"} onClick={() => onDelete(router)} color="red">
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}
+
+async function onUpdate(router: AppRouterInstance, setTabsStatus: any) {
+  ComponentGlobal_NotifikasiBerhasil("Silahkan Edit Kembali");
+  setTabsStatus("Draft");
+  router.back();
+}
+
+async function onDelete(router: AppRouterInstance) {
+  ComponentGlobal_NotifikasiBerhasil("Berhasil Hapus Event");
+  router.back();
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutEvent_DetailReject({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentEvent_HeaderTamplate title="Detail Reject" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { Button, Stack } from "@mantine/core";
+import ComponentEvent_DetailData from "../../component/detail_data";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { gs_event_status } from "../../global_state";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+
+export default function Event_DetailReview() {
+
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <ComponentEvent_DetailData />
+        <Button radius={"xl"} color={"red"} onClick={() => onClick(router, setTabsStatus)}>
+          Batalkan Review
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+async function onClick(router: AppRouterInstance, setTabsStatus: any) {
+    ComponentGlobal_NotifikasiBerhasil("Review Dibatalkan", 1500)
+    setTabsStatus("Draft")
+    router.back()
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentEvent_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutEvent_DetailReview({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentEvent_HeaderTamplate title="Detail Review" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/event/edit/index.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { Stack, TextInput, Textarea, Button } from "@mantine/core";
+import { DateTimePicker } from "@mantine/dates";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+
+export default function Event_Edit() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack px={"sm"}>
+        <TextInput label="Judul" placeholder="Masukan judul" withAsterisk />
+        <TextInput
+          label="Lokasi"
+          placeholder="Masukan lokasi acara"
+          withAsterisk
+        />
+        <DateTimePicker
+          withAsterisk
+          label="Tanggal & Waktu "
+          placeholder="Masukan tangal dan waktu acara"
+          onChange={(val) => console.log(val)}
+        />
+        <Textarea
+          label="Deskripsi"
+          placeholder="Deskripsikan acara yang akan di selenggarakan"
+          withAsterisk
+        />
+
+        <Button radius={"xl"} mt={"xl"} onClick={() => onUpdate(router)}>
+          Update
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+async function onUpdate(router: AppRouterInstance) {
+  ComponentGlobal_NotifikasiBerhasil("Update berhasil");
+  router.back();
+}

src/app_modules/event/edit/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentEvent_HeaderTamplate from "../component/header_tamplate";
+
+export default function LayoutEvent_Edit({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentEvent_HeaderTamplate title="Edit Event" />}>
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export async function Event_getListUser() {
+    const data = await prisma.user.findMany({
+        select: {
+            id: true,
+            username: true,
+            Profile: true
+        }
+    })
+    return data
+}

src/app_modules/event/global_state/index.ts

@@ -0,0 +1,9 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_event_hotMenu = atomWithStorage("gs_event_hotMenu", 0)
+
+/**
+ * @param status | "Publish", "Review", "Draft", "Reject"
+ * @type string
+ */
+export const gs_event_status = atomWithStorage<string | any>("gs_status_event", "Publish")

src/app_modules/event/index.ts

@@ -0,0 +1,45 @@
+import Event_SplashScreen from "./splash";
+import Event_Beranda from "./main/beranda";
+import LayoutEvent_Main from "./main/layout";
+import Event_Kontribusi from "./main/kontribusi";
+import Event_Create from "./create/create";
+import LayoutEvent_Create from "./create/layout";
+import Event_StatusPage from "./main/status_page";
+import Event_DetailPublish from "./detail/publish";
+import Event_DetailReview from "./detail/review";
+import Event_DetailDraft from "./detail/draft";
+import Event_DetailReject from "./detail/reject";
+import LayoutEvent_DetailPublish from "./detail/publish/layout";
+import LayoutEvent_DetailReview from "./detail/review/layout";
+import LayoutEvent_DetailDraft from "./detail/draft/layout";
+import LayoutEvent_DetailReject from "./detail/reject/layout";
+import Event_Edit from "./edit";
+import LayoutEvent_Edit from "./edit/layout";
+import Event_DetailMain from "./detail/main_detail";
+import LayoutEvent_DetailMain from "./detail/main_detail/layout";
+import Event_DetailKontribusi from "./detail/kontribusi";
+import LayoutEvent_DetailKontribusi from "./detail/kontribusi/layout";
+
+export {
+  Event_SplashScreen,
+  Event_Beranda,
+  LayoutEvent_Main,
+  Event_Kontribusi,
+  Event_Create,
+  LayoutEvent_Create,
+  Event_StatusPage,
+  Event_DetailPublish,
+  Event_DetailReview,
+  Event_DetailDraft,
+  Event_DetailReject,
+  LayoutEvent_DetailPublish,
+  LayoutEvent_DetailReview,
+  LayoutEvent_DetailDraft,
+  LayoutEvent_DetailReject,
+  Event_Edit,
+  LayoutEvent_Edit,
+  Event_DetailMain,
+  LayoutEvent_DetailMain,
+  Event_DetailKontribusi,
+  LayoutEvent_DetailKontribusi,
+};

src/app_modules/event/main/beranda.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Group,
+  Image,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+} from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Event_Beranda() {
+  const router = useRouter();
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            shadow="sm"
+            padding="md"
+            radius="md"
+            withBorder
+            mb={"md"}
+            onClick={() => router.push(RouterEvent.detail_main)}
+          >
+            {/* <Card.Section p={"xs"}>
+                  <Skeleton visible={loading} h={200}></Skeleton>
+                </Card.Section> */}
+
+            <Stack>
+              <Group position="apart" mt="md" mb="xs">
+                <Text weight={500}>Nama Event</Text>
+                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+              </Group>
+
+              <Text size="sm" color="dimmed" lineClamp={2}>
+                Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
+                elit. Nisi non ducimus voluptatibus vel, officiis assumenda
+                explicabo reiciendis consequatur consequuntur expedita maiores
+                fugit natus est rem sapiente iusto earum dicta labore.
+              </Text>
+
+              {/* <Group position="apart">
+                {Array(6)
+                  .fill(0)
+                  .map((e, i) => (
+                    <Avatar key={i} bg="blue" radius={"xl"} />
+                  ))}
+              </Group> */}
+            </Stack>
+          </Card>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,102 @@
+"use client";
+
+import { Avatar, Box, Card, Group, Stack, Tabs, Text } 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";
+
+export default function Event_Kontribusi() {
+  const router = useRouter();
+  const [tabsKontribusi, setTabsKontribusi] = useState<string | any>("Panitia");
+  const listTabs = [
+    {
+      id: 1,
+      path: <Event_KontribusiPanitia />,
+      value: "Panitia",
+    },
+    {
+      id: 2,
+      path: <Event_KontribusiPeserta />,
+      value: "Peserta",
+    },
+  ];
+
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            shadow="sm"
+            padding="md"
+            radius="md"
+            withBorder
+            mb={"md"}
+            onClick={() => router.push(RouterEvent.detail_kontribusi)}
+          >
+            {/* <Card.Section p={"xs"}>
+                  <Skeleton visible={loading} h={200}></Skeleton>
+                </Card.Section> */}
+
+            <Stack>
+              <Group position="apart" mt="md" mb="xs">
+                <Text weight={500}>Nama Event</Text>
+                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+              </Group>
+
+              {/* <Text size="sm" color="dimmed" lineClamp={2}>
+              Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
+              elit. Nisi non ducimus voluptatibus vel, officiis assumenda
+              explicabo reiciendis consequatur consequuntur expedita maiores
+              fugit natus est rem sapiente iusto earum dicta labore.
+            </Text> */}
+
+              <Group position="apart">
+                {Array(6)
+                  .fill(0)
+                  .map((e, i) => (
+                    <Avatar key={i} bg="blue" radius={"xl"} />
+                  ))}
+              </Group>
+            </Stack>
+          </Card>
+        ))}
+    </>
+  );
+
+  // return (
+  //   <>
+  //     <Tabs
+  //       color="blue"
+  //       variant="pills"
+  //       radius="xl"
+  //       defaultValue="Panitia"
+  //       value={tabsKontribusi}
+  //       onTabChange={setTabsKontribusi}
+  //     >
+  //       <Stack>
+  //         <Tabs.List grow>
+  //           {listTabs.map((e) => (
+  //             <Tabs.Tab
+  //               key={e.id}
+  //               value={e.value}
+  //               bg={tabsKontribusi === e.value ? "blue" : "gray.1"}
+  //             >
+  //               Sebagai {e.value}
+  //             </Tabs.Tab>
+  //           ))}
+  //         </Tabs.List>
+  //         {listTabs.map((e) => (
+  //           <Tabs.Panel key={e.id} value={e.value}>
+  //             {e.path}
+  //           </Tabs.Panel>
+  //         ))}
+  //       </Stack>
+  //     </Tabs>
+  //   </>
+  // );
+}

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

@@ -0,0 +1,48 @@
+"use client";
+import { Card, Group, Button, Text, Avatar, Stack } from "@mantine/core";
+import moment from "moment";
+
+export default function Event_KontribusiPanitia() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            shadow="sm"
+            padding="md"
+            radius="md"
+            withBorder
+            mb={"md"}
+          >
+            {/* <Card.Section p={"xs"}>
+                  <Skeleton visible={loading} h={200}></Skeleton>
+                </Card.Section> */}
+
+            <Stack>
+            <Group position="apart" mt="md" mb="xs">
+              <Text weight={500}>Nama Event</Text>
+              <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+            </Group>
+
+            <Text size="sm" color="dimmed" lineClamp={2}>
+              Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
+              elit. Nisi non ducimus voluptatibus vel, officiis assumenda
+              explicabo reiciendis consequatur consequuntur expedita maiores
+              fugit natus est rem sapiente iusto earum dicta labore.
+            </Text>
+
+            <Group position="apart">
+              {Array(5)
+                .fill(0)
+                .map((e, i) => (
+                  <Avatar key={i} bg="blue" radius={"xl"} />
+                ))}
+            </Group>
+            </Stack>
+          </Card>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+"use client";
+import { Card, Group, Button, Text, Stack, Avatar } from "@mantine/core";
+import moment from "moment";
+
+export default function Event_KontribusiPeserta() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            shadow="sm"
+            padding="md"
+            radius="md"
+            withBorder
+            mb={"md"}
+          >
+            {/* <Card.Section p={"xs"}>
+                      <Skeleton visible={loading} h={200}></Skeleton>
+                    </Card.Section> */}
+
+            <Stack>
+              <Group position="apart" mt="md" mb="xs">
+                <Text weight={500}>Nama Event</Text>
+                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+              </Group>
+
+              <Text size="sm" color="dimmed" lineClamp={2}>
+                Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
+                elit. Nisi non ducimus voluptatibus vel, officiis assumenda
+                explicabo reiciendis consequatur consequuntur expedita maiores
+                fugit natus est rem sapiente iusto earum dicta labore.
+              </Text>
+
+              <Group position="apart">
+                {Array(5)
+                  .fill(0)
+                  .map((e, i) => (
+                    <Avatar key={i} bg="blue" radius={"xl"} />
+                  ))}
+              </Group>
+            </Stack>
+          </Card>
+        ))}
+    </>
+  );
+}

src/app_modules/event/main/layout.tsx

@@ -0,0 +1,111 @@
+"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,
+  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";
+
+export default function LayoutEvent_Main({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
+  const listFooter = [
+    {
+      id: "1",
+      name: "Beranda",
+      path: RouterEvent.beranda,
+      icon: <IconTimelineEvent />,
+    },
+
+    {
+      id: "2",
+      name: "Status event",
+      path: RouterEvent.status_page,
+      icon: <IconTimelineEventText />,
+    },
+    {
+      id: "3",
+      name: "Kontribusi",
+      path: RouterEvent.kontribusi,
+      icon: <IconCalendarEvent />,
+    },
+  ];
+  return (
+    <>
+      <AppShell
+        header={<ComponentEvent_HeaderTamplate title="Event" route={RouterHome.main_home}/>}
+        footer={
+          <Footer height={70} bg={"dark"} sx={{ borderTop: "px solid blue" }}>
+            {/* <Center>
+              <ActionIcon
+                sx={{
+                  zIndex: 1,
+                  position: "absolute",
+                }}
+                variant="transparent"
+                bg={"blue"}
+                radius={"xl"}
+                size={"lg"}
+                onClick={() => router.push(RouterEvent.create)}
+              >
+                <IconCirclePlus color="white" size={30} />
+              </ActionIcon>
+            </Center> */}
+            <Grid>
+              {listFooter.map((e, i) => (
+                <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>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { Group, Paper, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function Event_StatusDraft() {
+  const router = useRouter()
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Paper
+            key={i}
+            shadow="lg"
+            radius={"md"}
+            p={"md"}
+            withBorder
+            mb={"md"}
+            onClick={() => router.push(RouterEvent.detail_draft)}
+          >
+            <Stack>
+              <Group position="apart">
+                <Title order={6}>Nama Event</Title>
+                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+              </Group>
+              <Text fz={"sm"} lineClamp={2}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
+                velit modi ut consequatur, iure eaque numquam id iste, nihil
+                laborum facilis dolores vel possimus earum ullam, necessitatibus
+                omnis tenetur repellendus.
+              </Text>
+            </Stack>
+          </Paper>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,82 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+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_StatusReject from "./reject";
+
+export default function Event_StatusPage() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+  const listTabs = [
+    {
+      id: 1,
+      path: <Event_StatusPublish/>,
+      value: "Publish",
+    },
+    {
+      id: 2,
+      path: <Event_StatusReview/>,
+      value: "Review",
+    },
+    {
+      id: 3,
+      path: <Event_StatusDraft/>,
+      value: "Draft",
+    },
+    {
+      id: 4,
+      path: <Event_StatusReject/>,
+      value: "Reject",
+    },
+  ];
+  return (
+    <>
+      <Affix position={{ bottom: rem(100), right: rem(20) }}>
+        <Button
+          radius={"xl"}
+          color="blue"
+          leftIcon={<IconCirclePlus />}
+          onClick={() => router.push(RouterEvent.create)}
+        >
+          Tambah Event
+        </Button>
+      </Affix>
+
+      <Tabs
+        color="blue"
+        variant="pills"
+        radius="xl"
+        defaultValue="Publish"
+        value={tabsStatus}
+        onTabChange={setTabsStatus}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listTabs.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.value}
+                bg={tabsStatus === e.value ? "blue" : "gray.1"}
+              >
+                {e.value}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {listTabs.map((e) => (
+            <Tabs.Panel key={e.id} value={e.value}>
+              {e.path}
+            </Tabs.Panel>
+          ))}
+        </Stack>
+      </Tabs>
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { Group, Paper, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function Event_StatusPublish() {
+  const router = useRouter();
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Paper
+            key={i}
+            shadow="lg"
+            radius={"md"}
+            p={"md"}
+            withBorder
+            mb={"md"}
+            onClick={() => router.push(RouterEvent.detail_publish)}
+          >
+            <Stack>
+              <Group position="apart">
+                <Title order={6}>Nama Event</Title>
+                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+              </Group>
+              <Text fz={"sm"} lineClamp={2}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
+                velit modi ut consequatur, iure eaque numquam id iste, nihil
+                laborum facilis dolores vel possimus earum ullam, necessitatibus
+                omnis tenetur repellendus.
+              </Text>
+            </Stack>
+          </Paper>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { Group, Paper, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function Event_StatusReject() {
+  const router = useRouter()
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Paper
+            key={i}
+            shadow="lg"
+            radius={"md"}
+            p={"md"}
+            withBorder
+            mb={"md"}
+            onClick={() => router.push(RouterEvent.detail_reject)}
+          >
+            <Stack>
+              <Group position="apart">
+                <Title order={6}>Nama Event</Title>
+                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+              </Group>
+              <Text fz={"sm"} lineClamp={2}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
+                velit modi ut consequatur, iure eaque numquam id iste, nihil
+                laborum facilis dolores vel possimus earum ullam, necessitatibus
+                omnis tenetur repellendus.
+              </Text>
+            </Stack>
+          </Paper>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { Group, Paper, Stack, Text, Title } from "@mantine/core";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+
+export default function Event_StatusReview() {
+  const router = useRouter()
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Paper
+            key={i}
+            shadow="lg"
+            radius={"md"}
+            p={"md"}
+            withBorder
+            mb={"md"}
+            onClick={() => router.push(RouterEvent.detail_review)}
+          >
+            <Stack>
+              <Group position="apart">
+                <Title order={6}>Nama Event</Title>
+                <Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
+              </Group>
+              <Text fz={"sm"} lineClamp={2}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
+                velit modi ut consequatur, iure eaque numquam id iste, nihil
+                laborum facilis dolores vel possimus earum ullam, necessitatibus
+                omnis tenetur repellendus.
+              </Text>
+            </Stack>
+          </Paper>
+        ))}
+    </>
+  );
+}

src/app_modules/event/splash/index.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { AspectRatio, Center, Image, Paper, Stack, Title } from "@mantine/core";
+import { useShallowEffect, useTimeout } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_event_hotMenu, gs_event_status } from "../global_state";
+
+export default function Event_SplashScreen() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
+  const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
+
+  useShallowEffect(() => {
+    setTimeout(() => {
+      router.replace(RouterEvent.beranda);
+      setHotMenu(0);
+      setTabsStatus("Publish");
+    }, 2000);
+  }, []);
+  return (
+    <>
+      <Center h={"100vh"}>
+        <Stack align="center" justify="center" p={"md"}>
+          <Title c={"#002e59"}>Welcome to</Title>
+          <Paper p={{ base: 50, md: 60, lg: 80 }}>
+            <Image alt="event" src={"/aset/event/splash-event.png"} />
+          </Paper>
+        </Stack>
+      </Center>
+    </>
+  );
+}

src/app_modules/home/view.tsx

@@ -30,6 +30,7 @@ import toast from "react-simple-toasts";
 import { useRouter } from "next/navigation";
 import { MODEL_PROFILE_OLD } from "./model/user_profile";
 import AppNotif from "../notif";
+import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 
 // export const dynamic = "force-dynamic"
 // export const revalidate = 0
@@ -49,7 +50,7 @@ export default function HomeView() {
       id: 2,
       name: "Event",
       icon: <IconPresentation size={50} />,
-      link: "",
+      link: RouterEvent.splash,
     },
     {
       id: 3,
@@ -92,26 +93,6 @@ export default function HomeView() {
   return (
     <>
       <Box>
-        {/* <Flex align={"center"} gap={"sm"}>
-          <ActionIcon
-            size={30}
-            variant="transparent"
-            onClick={() => {
-              if (stateUser.Profile === null) {
-                return router.push(`/dev/profile/create/${stateUser.id}`);
-              } else {
-                return router.push(`/dev/katalog/${stateUser.Profile.id}`);
-              }
-            }}
-          >
-            <IconUserCircle size={50} color="black" />
-          </ActionIcon>
-
-          <Text>
-            Welcome to ,{" "}
-            {stateUser.username ? stateUser.username : <Loader size={"xs"} />}
-          </Text>
-        </Flex> */}
 
         <Paper bg={"dark"} radius={5} my={"xs"}>
           <Image alt="logo" src={"/aset/investasi/home-hipmi.png"} />
@@ -120,22 +101,21 @@ export default function HomeView() {
         {/* <pre>{JSON.stringify(stateUser, null, 2)}</pre> */}
 
         <Box my={"sm"}>
-          <SimpleGrid cols={2}>
+          <SimpleGrid 
+          cols={2}
+          spacing="md"
+          // breakpoints={[
+          //   { maxWidth: 'md', cols: 2, spacing: 'md' },
+          //   { maxWidth: 'sm', cols: 2, spacing: 'sm' },
+          //   { maxWidth: 'xs', cols: 1, spacing: 'xs' },
+          // ]}
+          >
             {listHalaman.map((e, i) => (
               <Paper
                 key={e.id}
                 h={100}
                 withBorder
                 onClick={() => {
-                  // if (stateUser.Profile === null) {
-                  //   return toast("Lengkapi Profile Anda !");
-                  // } else {
-                  //   if (e.link === "") {
-                  //     toast(e.name);
-                  //   } else {
-                  //     return router.push(e.link);
-                  //   }
-                  // }
                   if (e.link === "") {
                     toast("Cooming Soon !!");
                   } else {

src/app_modules/katalog/portofolio/list_view/view.tsx

@@ -39,8 +39,8 @@ export default function ListPortofolioView({
   return (
     <>
       {/* <pre>{JSON.stringify(porto, null, 2)}</pre> */}
-      <Paper p={"sm"} shadow="lg" withBorder bg={"gray.1"}>
+      <Paper p={"md"} shadow="lg" withBorder bg={"gray.1"}>
-        <Stack spacing={"md"}>
+        <Stack spacing={"lg"}>
           <Group position="apart">
             <ActionIcon variant="transparent" disabled></ActionIcon>
             <Title order={4}>Portofolio</Title>
@@ -72,7 +72,7 @@ export default function ListPortofolioView({
                     h={50}
                     bg={"gray"}
                     mb={"lg"}
-                    radius={"md"}
+                    radius={"xl"}
                     onClick={() => router.push(`/dev/portofolio/main/${e.id}/`)}
                   >
                     <Grid h={50} align="center" px={"md"}>

yarn.lock

@@ -308,6 +308,13 @@
     react-remove-scroll "^2.5.5"
     react-textarea-autosize "8.3.4"
 
+"@mantine/dates@^6.0.17":
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/@mantine/dates/-/dates-6.0.21.tgz#a140da22bd4188aff446ddb5d3bcf37b658b0608"
+  integrity sha512-nSX7MxNkHyyDJqEJOT7Wg930jBfgWz+3pnoWo601cYDvFjh5GgcRz66v36rnMJFK1/56k5G9rWzUOzuM94j6hg==
+  dependencies:
+    "@mantine/utils" "6.0.21"
+
 "@mantine/dropzone@^7.1.3":
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/@mantine/dropzone/-/dropzone-7.3.2.tgz#358d99089318e62bc520040a55708a31b0ab7259"
@@ -1306,6 +1313,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+dayjs@^1.11.10:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"