# Admin Event

# feat
- Tampilan riwayat
- Tambah tipe acara
- Edit tipe acara
### No issuu

src/app/admin/layout.tsx

@@ -1 +1,6 @@
-#! apa
+import { AdminMain_Layout } from "@/app_modules_admin/main";
+import React from "react";
+
+export default async function Layout({children}: {children: React.ReactNode}) {
+    return <AdminMain_Layout>{children}</AdminMain_Layout>
+}

src/app/admin/main/page.tsx

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

src/app/dev/admin/event/child/riwayat/page.tsx

@@ -0,0 +1,13 @@
+import { AdminEvent_Riwayat } from "@/app_modules/admin/event";
+import { AdminEvent_getListAllRiwayat } from "@/app_modules/admin/event/fun/get/get_list_all_riwayat";
+
+export default async function Page() {
+  const listRiwayat = await AdminEvent_getListAllRiwayat()
+  
+
+  return (
+    <>
+      <AdminEvent_Riwayat listRiwayat={listRiwayat} />
+    </>
+  );
+}

src/app/dev/admin/event/child/tipe_acara/page.tsx

@@ -0,0 +1,12 @@
+import { AdminEvent_DetailTipeAcara } from "@/app_modules/admin/event";
+import { AdminEvent_getListTipeAcara } from "@/app_modules/admin/event/fun/get/get_list_tipe_acara";
+
+export default async function Page() {
+  const listTipe = await AdminEvent_getListTipeAcara()
+
+  return (
+    <>
+      <AdminEvent_DetailTipeAcara listTipe={listTipe}/>
+    </>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { AdminEvent_Main } from "@/app_modules/admin/event";
 import AdminEvent_funCountByStatusId from "@/app_modules/admin/event/fun/count/fun_count_event_by_status_id";
+import { AdminEvent_funCountRiwayat } from "@/app_modules/admin/event/fun/count/fun_count_riwayat";
 import { AdminEvent_funCountTipeAcara } from "@/app_modules/admin/event/fun/count/fun_count_tipe_acara";
 
 export default async function Page() {
@@ -8,6 +9,8 @@ export default async function Page() {
   const countDraft = await AdminEvent_funCountByStatusId("3");
   const countReject = await AdminEvent_funCountByStatusId("4");
   const countTipeAcara = await AdminEvent_funCountTipeAcara()
+  const countRiwayat = await AdminEvent_funCountRiwayat()
+
 
 
   return (
@@ -18,6 +21,7 @@ export default async function Page() {
         countDraft={countDraft as number}
         countReject={countReject as number}
         countTipeAcara={countTipeAcara as number}
+        countRiwayat={countRiwayat}
       />
     </>
   );

src/app/lib/router_admin/router_admin_event.ts

@@ -1,6 +1,10 @@
 export const RouterAdminEvent = {
   main_event: "/dev/admin/event/main",
 
+  // detail
+  detail_tipe_acara: "/dev/admin/event/child/tipe_acara",
+  detail_riwayat: "/dev/admin/event/child/riwayat",
+
   // table
   table_review: "/dev/admin/event/table/review",
   table_publish: "/dev/admin/event/table/publish",

src/app_modules/admin/component/header_tamplate.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { Box, Title, Divider } from "@mantine/core";
+import { Box, Title, Divider, Stack } from "@mantine/core";
 
 export default function ComponentAdminGlobal_HeaderTamplate({name}: {name: string}) {
   return (
     <>
-      <Box>
+      <Stack spacing={"xs"}>
         <Title>{name ?  name : null}</Title>
         <Divider/>
-      </Box>
+      </Stack>
     </>
   );
 }

src/app_modules/admin/donasi/global_state/index.ts

@@ -1,8 +0,0 @@
-import { atomWithStorage } from "jotai/utils";
-
-/**
- * @param index | 0 - 3 | 0: Main dahsboard, 1: Investasi, 2: Donasi, 3: Event
- * @type number
- * @
- */
-export const gs_adminDonasi_hotMenu = atomWithStorage("gs_adminDonasi_hotMenu", 0)

src/app_modules/admin/event/child/riwayat.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Loader,
+  Modal,
+  Paper,
+  SimpleGrid,
+  Spoiler,
+  Stack,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
+import {
+  MODEL_EVENT,
+  MODEL_EVENT_PESERTA,
+} from "@/app_modules/event/model/interface";
+import { data } from "autoprefixer";
+import _ from "lodash";
+import moment from "moment";
+import { IconEyeShare } from "@tabler/icons-react";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { AdminEvent_getListPesertaById } from "../fun/get/get_list_peserta_by_id";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+
+export default function AdminEvent_Riwayat({
+  listRiwayat,
+}: {
+  listRiwayat: any;
+}) {
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Riwayat" />
+        <DetailRiwayat listRiwayat={listRiwayat} />
+      </Stack>
+    </>
+  );
+}
+
+function DetailRiwayat({ listRiwayat }: { listRiwayat: MODEL_EVENT[] }) {
+  const [opened, setOpen] = useState(false);
+  const [peserta, setPeserta] = useState<MODEL_EVENT_PESERTA[]>();
+  const [eventId, setEventId] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const TableRows = listRiwayat.map((e, i) => (
+    <tr key={e.id}>
+      <td>
+        <Button
+          loading={e.id === eventId ? (loading === true ? true : false) : false}
+          color={"green"}
+          leftIcon={<IconEyeShare />}
+          radius={"xl"}
+          onClick={async () => {
+            setEventId(e.id);
+            setLoading(true);
+            await new Promise((r) => setTimeout(r, 500));
+            await AdminEvent_getListPesertaById(e.id).then((res: any) => {
+              setLoading(false);
+              setPeserta(res);
+            });
+            setOpen(true);
+          }}
+        >
+          Peserta
+        </Button>
+      </td>
+      <td>{e.title}</td>
+      <td>{e.lokasi}</td>
+      <td>{e.EventMaster_TipeAcara.name}</td>
+      <td>{e.tanggal.toLocaleString("id-ID", { dateStyle: "full" })}</td>
+      <td>
+        {e.tanggal.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        })}
+      </td>
+      <td>
+        <Spoiler hideLabel="sembunyikan" maxHeight={50} showLabel="tampilkan">
+          {e.deskripsi}
+        </Spoiler>
+      </td>
+    </tr>
+  ));
+
+  useShallowEffect(() => {
+    getAllPeserta(eventId);
+  }, [eventId]);
+
+  async function getAllPeserta(eventId: string) {
+    await AdminEvent_getListPesertaById(eventId).then((res: any) =>
+      setPeserta(res)
+    );
+  }
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={() => setOpen(false)}
+        size={"md"}
+        // closeOnClickOutside={false}
+        withCloseButton={false}
+      >
+        <Paper>
+          <Stack>
+            <Center>
+              <Title order={3}>Daftar Peserta</Title>
+            </Center>
+            <Stack>
+              {peserta?.map((e) => (
+                <Stack key={e.id} spacing={"xs"}>
+                  <Grid >
+                  <Grid.Col span={"content"}>
+                    <Avatar
+                      sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                      radius={"xl"}
+                      src={
+                        RouterProfile.api_foto_profile + e.User.Profile.imagesId
+                      }
+                    />
+                  </Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Group align="center" h={"100%"}>
+                      <Text>{e.User.Profile.name}</Text>
+                    </Group>
+                  </Grid.Col>
+                </Grid>
+                <Divider/>
+                </Stack>
+              ))}
+            </Stack>
+          </Stack>
+        </Paper>
+      </Modal>
+
+      <Box>
+        <Box bg={"gray.1"} p={"xs"}>
+          <Title order={6} c={"gray"}>
+            RIWAYAT
+          </Title>
+        </Box>
+        <Table
+          withBorder
+          verticalSpacing={"md"}
+          horizontalSpacing={"xl"}
+          p={"md"}
+          striped
+          highlightOnHover
+        >
+          <thead>
+            <tr>
+              <th>
+                <Center>Aksi</Center>
+              </th>
+              <th>
+                <Center>Judul</Center>
+              </th>
+              <th>
+                <Center>Lokasi</Center>
+              </th>
+              <th>Tipe Acara</th>
+              <th>Tanggal</th>
+              <th>Jam</th>
+              <th>
+                <Center>Deskripsi</Center>
+              </th>
+            </tr>
+          </thead>
+          <tbody>{TableRows}</tbody>
+        </Table>
+        <Center>
+          {_.isEmpty(TableRows) ? (
+            <Center h={"50vh"}>
+              <Title order={6}>Tidak Ada Data</Title>
+            </Center>
+          ) : (
+            ""
+          )}
+        </Center>
+      </Box>
+    </>
+  );
+}

src/app_modules/admin/event/child/tipe_acara.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Divider,
+  Group,
+  List,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import ComponentAdminDonasi_TombolKembali from "../../donasi/component/tombol_kembali";
+import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
+import { MODEL_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
+import { useState } from "react";
+import { AdminEvent_funCreateTipeAcara } from "../fun/create/fun_create_tipe_acara";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { AdminEvent_getListTipeAcara } from "../fun/get/get_list_tipe_acara";
+import { IconEditCircle } from "@tabler/icons-react";
+import { AdminEvent_funEditTipeAcara } from "../fun/edit/fun_edit_tipe_acara";
+
+export default function AdminEvent_DetailTipeAcara({
+  listTipe,
+}: {
+  listTipe: any;
+}) {
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Tipe Acara" />
+        <DetailTipeAcara listTipe={listTipe} />
+      </Stack>
+    </>
+  );
+}
+
+function DetailTipeAcara({ listTipe }: { listTipe: MODEL_DEFAULT_MASTER[] }) {
+  const [tipe, setTipe] = useState(listTipe);
+  const [name, setName] = useState("");
+  const [openEditor, setOpenEditor] = useState(false);
+  const [edit, setEdit] = useState<MODEL_DEFAULT_MASTER | null>(null);
+  return (
+    <>
+      <SimpleGrid
+        cols={3}
+        spacing="lg"
+        breakpoints={[
+          { maxWidth: "62rem", cols: 4, spacing: "lg" },
+          { maxWidth: "48rem", cols: 2, spacing: "sm" },
+          { maxWidth: "36rem", cols: 1, spacing: "sm" },
+        ]}
+      >
+        <div>
+          <Paper p={"sm"} shadow="lg" withBorder>
+            <Stack>
+              <TextInput
+                value={name ? name : ""}
+                label="Masukan Tipe"
+                placeholder="Contoh: Ramah Tamah, dll"
+                onChange={(val) => {
+                  setName(val.target.value);
+                }}
+              />
+              <Group position="right">
+                <Button onClick={() => onSave(name, setName, setTipe)}>
+                  Tambah
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </div>
+
+        <div>
+          <Paper p={"md"} shadow="lg" withBorder>
+            <Stack>
+              <Title order={3}>Tipe Acara Yang Tersedia </Title>
+              <Stack px={"md"}>
+                {tipe.map((e, i) => (
+                  <Stack key={e.id} spacing={"xs"}>
+                    <Group position="apart">
+                      <Text>{e.name}</Text>
+                      <ActionIcon
+                        variant="transparent"
+                        onClick={() => {
+                          setOpenEditor(true);
+                          setEdit(e);
+                        }}
+                      >
+                        <IconEditCircle color="green" />
+                      </ActionIcon>
+                    </Group>
+                    <Divider />
+                  </Stack>
+                ))}
+              </Stack>
+            </Stack>
+          </Paper>
+        </div>
+
+        <div>
+          {openEditor ? (
+            <Paper p={"sm"} shadow="lg" withBorder>
+              <Stack>
+                <TextInput
+                  value={edit?.name ? edit?.name : ""}
+                  label="Edit Tipe Event"
+                  placeholder="Contoh: Ramah Tamah, dll"
+                  onChange={(val) => {
+                    setEdit({
+                      ...(edit as any),
+                      name: val.target.value,
+                    });
+                  }}
+                />
+                <Group position="right">
+                  <Group position="apart">
+                    <Button color="red" onClick={() => setOpenEditor(false)}>
+                      Batal
+                    </Button>
+                    <Button
+                      color="green"
+                      onClick={() =>
+                        onUpdate(edit?.id, edit?.name, setTipe, setOpenEditor)
+                      }
+                    >
+                      Update
+                    </Button>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          ) : (
+            ""
+          )}
+        </div>
+      </SimpleGrid>
+    </>
+  );
+}
+
+async function onSave(name: string, setName: any, setTipe: any) {
+  if (name === "")
+    return ComponentGlobal_NotifikasiPeringatan("Isi Tipe Acara");
+
+  await AdminEvent_funCreateTipeAcara(name).then(async (res) => {
+    if (res.status === 201) {
+      await AdminEvent_getListTipeAcara().then((val) => {
+        setTipe(val);
+        setName("");
+        ComponentGlobal_NotifikasiBerhasil("Berhasil Menyimpan Data");
+      });
+    } else {
+      ComponentGlobal_NotifikasiGagal("Gagal Menyimpan Data");
+    }
+  });
+}
+
+async function onUpdate(id: any, edit: any, setTipe: any, setOpenEditor: any) {
+  await AdminEvent_funEditTipeAcara(id, edit).then(async (res) => {
+    if (res.status === 200) {
+      await AdminEvent_getListTipeAcara().then((val) => {
+        setTipe(val);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        setOpenEditor(false);
+      });
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  });
+}

src/app_modules/admin/event/detail/tipe_acara.tsx

@@ -1,22 +0,0 @@
-import { Stack } from "@mantine/core";
-import ComponentAdminDonasi_TombolKembali from "../../donasi/component/tombol_kembali";
-import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
-
-export default function AdminEvent_DetailTipeAcara() {
-  return (
-    <>
-      <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name="Event" />
-        <ComponentAdminDonasi_TombolKembali />
-        <DetailTipeAcara/>
-      </Stack>
-    </>
-  );
-}
-
-function DetailTipeAcara(){
-    return <>
-    
-    disiin tipe nya
-    </>
-}

src/app_modules/admin/event/fun/count/fun_count_riwayat.ts

@@ -0,0 +1,16 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function AdminEvent_funCountRiwayat() {
+  const data = await prisma.event.count({
+    where: {
+      eventMaster_StatusId: "1",
+      tanggal: {
+        lte: new Date(),
+      },
+    },
+  });
+
+  return data;
+}

src/app_modules/admin/event/fun/create/fun_create_tipe_acara.ts

@@ -0,0 +1,26 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { revalidatePath } from "next/cache";
+
+export async function AdminEvent_funCreateTipeAcara(name: string) {
+  const dataAwal = await prisma.eventMaster_TipeAcara.findFirst({
+    orderBy: {
+      id: "desc",
+    },
+  });
+
+  const res = await prisma.eventMaster_TipeAcara.create({
+    data: {
+      id: Number(dataAwal?.id) + 1,
+      name: name,
+    },
+  });
+
+  if (!res) return { status: 400, message: "Gagal Menambahkan" };
+  revalidatePath("/dev/admin/event/detail/tipe_acara");
+  return {
+    status: 201,
+    message: "Berhasil Menambahkan",
+  };
+}

src/app_modules/admin/event/fun/edit/fun_edit_tipe_acara.ts

@@ -0,0 +1,22 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { revalidatePath } from "next/cache";
+
+export async function AdminEvent_funEditTipeAcara(id: number, name: string) {
+  const updt = await prisma.eventMaster_TipeAcara.update({
+    where: {
+      id: id,
+    },
+    data: {
+      name: name,
+    },
+  });
+
+  if(!updt) return {status: 400, message: "Gagal Update"}
+  revalidatePath("/dev/admin/event/detail/tipe_acara")
+  return {
+    status: 200,
+    message: "Update Berhasil"
+  }
+}

src/app_modules/admin/event/fun/get/get_list_all_riwayat.ts

@@ -0,0 +1,45 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import _ from "lodash";
+
+export async function AdminEvent_getListAllRiwayat() {
+  const data = await prisma.event.findMany({
+    orderBy: {
+      tanggal: "desc",
+    },
+    where: {
+      eventMaster_StatusId: "1",
+      tanggal: {
+        lte: new Date(),
+      },
+    },
+    select: {
+        id: true,
+        title: true,
+        lokasi: true,
+        tanggal: true,
+        deskripsi: true,
+        Author: {
+          select: {
+            id: true,
+            username: true,
+            Profile: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+        EventMaster_TipeAcara: {
+          select: {
+            id: true,
+            name: true,
+          },
+        },
+      },
+
+  });
+
+  return data;
+}

src/app_modules/admin/event/fun/get/get_list_peserta_by_id.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function AdminEvent_getListPesertaById(eventId: string) {
+  const data = await prisma.event_Peserta.findMany({
+    where: {
+      eventId: eventId,
+    },
+    select: {
+      id: true,
+      User: {
+        select: {
+          Profile: true,
+        },
+      },
+    },
+  });
+
+  return data;
+}

src/app_modules/admin/event/fun/get/get_list_tipe_acara.ts

@@ -0,0 +1,12 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export async function AdminEvent_getListTipeAcara(){
+    const data = await prisma.eventMaster_TipeAcara.findMany({
+        orderBy:{
+            id: "asc"
+        }
+    })
+    return data
+}

src/app_modules/admin/event/index.tsx

@@ -2,7 +2,8 @@ import AdminEvent_Main from "./main";
 import AdminEvent_TableReview from "./table_status/table_review";
 import AdminEvent_TablePublish from "./table_status/table_publish";
 import AdminEvent_TableReject from "./table_status/table_reject";
-import AdminEvent_DetailTipeAcara from "./detail/tipe_acara";
+import AdminEvent_DetailTipeAcara from "./child/tipe_acara";
+import AdminEvent_Riwayat from "./child/riwayat";
 
 export {
   AdminEvent_Main,
@@ -10,4 +11,5 @@ export {
   AdminEvent_TablePublish,
   AdminEvent_TableReject,
   AdminEvent_DetailTipeAcara,
+  AdminEvent_Riwayat,
 };

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

@@ -24,12 +24,14 @@ export default function AdminEvent_Main({
   countDraft,
   countReject,
   countTipeAcara,
+  countRiwayat,
 }: {
   countPublish: number;
   countReview: number;
   countDraft: number;
   countReject: number;
   countTipeAcara: number;
+  countRiwayat: number
 }) {
   const router = useRouter();
 
@@ -68,16 +70,16 @@ export default function AdminEvent_Main({
     {
       id: 1,
       name: "Riwayat Event",
-      // jumlah: countPublish,
+      jumlah: countRiwayat,
       path: RouterAdminEvent.table_publish,
       color: "gray",
     },
     {
       id: 2,
-      name: "Kategori",
+      name: "Tipe Acara",
-      // jumlah: countPublish,
+      jumlah: countTipeAcara,
       path: RouterAdminEvent.table_publish,
-      color: "green",
+      color: "gray",
     },
   ];
 
@@ -102,45 +104,44 @@ export default function AdminEvent_Main({
               shadow="md"
               radius="md"
               p="md"
-              //   sx={{ borderColor: e.color, borderStyle: "solid" }}
+              // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
-              <Group position="apart">
+              <Group position="center">
-                <IconChevronsRight color={`${e.color}.2`} />
                 <Stack align="center" spacing={0}>
                   <Text>{e.name}</Text>
                   <Title>{e.jumlah}</Title>
                 </Stack>
-                {e.path !== "" ? (
-                  <ActionIcon radius={"xl"} onClick={() => router.push(e.path)}>
-                    {" "}
-                    <IconChevronsRight />
-                  </ActionIcon>
-                ) : (
-                  <ActionIcon variant="transparent" disabled></ActionIcon>
-                )}
               </Group>
             </Paper>
           ))}
         </SimpleGrid>
-        <Paper
+        <SimpleGrid
-          shadow="md"
+          cols={4}
-          radius="md"
+          spacing="lg"
-          p="md"
+          breakpoints={[
-          bg={"gray.3"}
+            { maxWidth: "62rem", cols: 4, spacing: "lg" },
-          // w={{ lg: "62rem", md: "48rem", sm: "36rem" }}
+            { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          w={300}
+            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          ]}
         >
-          <Group position="apart">
+          {listBox2.map((e, i) => (
-            <ActionIcon disabled variant="transparent"></ActionIcon>
+            <Paper
-            <Stack align="center" spacing={0}>
+              key={i}
-              <Text>Tipe Acara</Text>
+              bg={`${e.color}.2`}
-              <Title>{countTipeAcara}</Title>
+              shadow="md"
-            </Stack>
+              radius="md"
-            <ActionIcon radius={"xl"} onClick={() => router.push("")}>
+              p="md"
-              <IconChevronsRight color="gray" />
+              // sx={{ borderColor: e.color, borderStyle: "solid" }}
-            </ActionIcon>
+            >
-          </Group>
+              <Group position="center">
-        </Paper>
+                <Stack align="center" spacing={0}>
+                  <Text>{e.name}</Text>
+                  <Title>{e.jumlah}</Title>
+                </Stack>
+              </Group>
+            </Paper>
+          ))}
+        </SimpleGrid>
       </Stack>
     </>
   );

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

@@ -3,11 +3,15 @@
 import { RouterAdminDonasi } from "@/app/lib/router_hipmi/router_admin";
 import {
   ActionIcon,
+  Avatar,
   Box,
   Button,
   Center,
+  Divider,
+  Grid,
   Group,
   Modal,
+  Paper,
   Spoiler,
   Stack,
   Table,
@@ -28,7 +32,10 @@ import { useDisclosure } from "@mantine/hooks";
 import { useState } from "react";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import ComponentAdminDonasi_TombolKembali from "../../donasi/component/tombol_kembali";
-import { MODEL_EVENT } from "@/app_modules/event/model/interface";
+import {
+  MODEL_EVENT,
+  MODEL_EVENT_PESERTA,
+} from "@/app_modules/event/model/interface";
 import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
 import moment from "moment";
 import _ from "lodash";
@@ -37,6 +44,8 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { AdminEvent_getListTableByStatusId } from "../fun/get/get_list_table_by_status_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { AdminEvent_getListPesertaById } from "../fun/get/get_list_peserta_by_id";
 
 export default function AdminEvent_TablePublish({
   listPublish,
@@ -46,8 +55,7 @@ export default function AdminEvent_TablePublish({
   return (
     <>
       <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name="Event" />
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Table Publish" />
-        <ComponentAdminDonasi_TombolKembali />
         <TableStatus listPublish={listPublish} />
       </Stack>
     </>
@@ -58,20 +66,23 @@ function TableStatus({ listPublish }: { listPublish: MODEL_EVENT[] }) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
   const [data, setData] = useState(listPublish);
-
+  const [peserta, setPeserta] = useState<MODEL_EVENT_PESERTA[]>();
-  async function onClick() {
+  const [eventId, setEventId] = useState("");
-    // router.push(RouterAdminDonasi.detail_publish);
+  const [loading, setLoading] = useState(false);
-  }
 
   const TableRows = data.map((e, i) => (
     <tr key={i}>
       <td>{e.title}</td>
       <td>{e.lokasi}</td>
       <td>{e.EventMaster_TipeAcara.name}</td>
+      <td>{e.tanggal.toLocaleString("id-ID", { dateStyle: "full" })}</td>
       <td>
-        {moment(e.tanggal).format("dddd")}, {moment(e.tanggal).format("ll")}
+        {e.tanggal.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        })}
       </td>
-      <td>{moment(e.tanggal).format("LT")}</td>
       <td>
         <Spoiler hideLabel="sembunyikan" maxHeight={50} showLabel="tampilkan">
           {e.deskripsi}
@@ -80,10 +91,20 @@ function TableStatus({ listPublish }: { listPublish: MODEL_EVENT[] }) {
 
       <td>
         <Button
+          loading={e.id === eventId ? (loading === true ? true : false) : false}
           color={"green"}
           leftIcon={<IconEyeShare />}
           radius={"xl"}
-          onClick={() => console.log("cooming soon")}
+          onClick={async () => {
+            setEventId(e.id);
+            setLoading(true);
+            await new Promise((v) => setTimeout(v, 500));
+            await AdminEvent_getListPesertaById(e.id).then((res: any) => {
+              setPeserta(res);
+              setLoading(false);
+            });
+            open();
+          }}
         >
           Lihat Peserta
         </Button>
@@ -93,6 +114,39 @@ function TableStatus({ listPublish }: { listPublish: MODEL_EVENT[] }) {
 
   return (
     <>
+      <Modal opened={opened} onClose={close}>
+        <Paper>
+          <Stack>
+            <Center>
+              <Title order={3}>Daftar Peserta</Title>
+            </Center>
+            <Stack>
+              {peserta?.map((e) => (
+                <Stack key={e.id} spacing={"xs"}>
+                  <Grid>
+                    <Grid.Col span={"content"}>
+                      <Avatar
+                        sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                        radius={"xl"}
+                        src={
+                          RouterProfile.api_foto_profile +
+                          e.User.Profile.imagesId
+                        }
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Group align="center" h={"100%"}>
+                        <Text>{e.User.Profile.name}</Text>
+                      </Group>
+                    </Grid.Col>
+                  </Grid>
+                  <Divider />
+                </Stack>
+              ))}
+            </Stack>
+          </Stack>
+        </Paper>
+      </Modal>
       <Box>
         <Box bg={"green.1"} p={"xs"}>
           <Title order={6} c={"green"}>
@@ -138,5 +192,3 @@ function TableStatus({ listPublish }: { listPublish: MODEL_EVENT[] }) {
     </>
   );
 }
-
-

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

@@ -52,8 +52,7 @@ export default function AdminEvent_TableReject({
   return (
     <>
       <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name="Event" />
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Table Reject" />
-        <ComponentAdminDonasi_TombolKembali />
         <TableStatus listReject={listReject} />
       </Stack>
     </>
@@ -83,11 +82,17 @@ function TableStatus({ listReject }: { listReject: MODEL_EVENT[] }) {
       </td>
       <td>
         <Box w={200}>
-          {moment(e.tanggal).format("dddd")}, {moment(e.tanggal).format("ll")}
+          {e.tanggal.toLocaleString("id-ID", { dateStyle: "full" })}
         </Box>
       </td>
       <td>
-        <Box w={100}>{moment(e.tanggal).format("LT")}</Box>
+        <Box w={100}>
+          {e.tanggal.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })}
+        </Box>
       </td>
       <td>
         <Box w={500}>

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

@@ -50,8 +50,7 @@ export default function AdminEvent_TableReview({
   return (
     <>
       <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name="Event" />
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Table Review" />
-        <ComponentAdminDonasi_TombolKembali />
         <TableStatus listReview={listReview} />
       </Stack>
     </>
@@ -71,10 +70,14 @@ function TableStatus({ listReview }: { listReview: MODEL_EVENT[] }) {
       <td>{e.title}</td>
       <td>{e.lokasi}</td>
       <td>{e.EventMaster_TipeAcara.name}</td>
+      <td>{e.tanggal.toLocaleString("id-ID", { dateStyle: "full" })}</td>
       <td>
-        {moment(e.tanggal).format("dddd")}, {moment(e.tanggal).format("ll")}
+        {e.tanggal.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        })}
       </td>
-      <td>{moment(e.tanggal).format("LT")}</td>
       <td>
         <Spoiler hideLabel="sembunyikan" maxHeight={50} showLabel="tampilkan">
           {e.deskripsi}
@@ -204,7 +207,12 @@ async function onPublish(eventId: string, setData: any) {
   });
 }
 
-async function onReject(eventId: string, catatan: string, setData: any, close: any) {
+async function onReject(
+  eventId: string,
+  catatan: string,
+  setData: any,
+  close: any
+) {
   if (catatan === "")
     return ComponentGlobal_NotifikasiPeringatan("Lengkapi Catatan");
   const body = {
@@ -217,7 +225,7 @@ async function onReject(eventId: string, catatan: string, setData: any, close: a
       await AdminEvent_getListTableByStatusId("2").then((val) => {
         setData(val);
         ComponentGlobal_NotifikasiBerhasil(res.message);
-        close()
+        close();
       });
     } else {
       ComponentGlobal_NotifikasiGagal(res.message);

src/app_modules/admin/global_state/index.ts

@@ -0,0 +1,10 @@
+import { atomWithStorage } from "jotai/utils";
+
+/**
+ * @param index | 0 - 3 | 0: Main dahsboard, 1: Investasi, 2: Donasi, 3: Event
+ * @type number
+ * @
+ */
+export const gs_admin_hotMenu = atomWithStorage("gs_admin_hotMenu", 0)
+
+export const gs_admin_subMenu = atomWithStorage<number | null>("gs_admin_subMenu",null)

src/app_modules/admin/main_dashboard/main/layout.tsx

@@ -33,9 +33,11 @@ import { useRouter } from "next/navigation";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { Logout } from "@/app_modules/auth";
 import { useAtom } from "jotai";
-import { gs_adminDonasi_hotMenu } from "../../donasi/global_state";
+import { gs_admin_hotMenu, gs_admin_subMenu } from "../../global_state";
 import Admin_Logout from "../../component/logout";
 import { RouterAdminEvent } from "@/app/lib/router_admin/router_admin_event";
+import _ from "lodash";
+import { listAdminPage } from "./list_page";
 
 export default function AdminLayout({
   children,
@@ -45,30 +47,54 @@ export default function AdminLayout({
   const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
   const router = useRouter();
-  const [active, setActive] = useAtom(gs_adminDonasi_hotMenu);
+  const [active, setActive] = useAtom(gs_admin_hotMenu);
+  const [activeChild, setActiveChild] = useAtom(gs_admin_subMenu)
 
-  const listAdminPage = [
+  const navbarItems = listAdminPage.map((e, i) => (
-    {
+    <Box key={i}>
-      id: 1,
+      <NavLink
-      name: "Dashboard",
+        sx={{
-      route: RouterAdminDashboard.main_admin,
+          ":hover": {
-    },
+            backgroundColor: "transparent",
-    {
+          },
-      id: 2,
+        }}
-      name: "Investasi",
+        
-      route: RouterAdminInvestasi.main_investasi,
+        fw={active === i ? "bold" : "normal"}
-    },
+        label={<Text size={"md"}>{e.name}</Text>}
-    {
+        onClick={() => {
-      id: 3,
+          setActive(i);
-      name: "Donasi",
+          setActiveChild(null);
-      route: RouterAdminDonasi.main_donasi,
+          e.path === "" ? router.push(e.child[0].path) : router.push(e.path);
-    },
+          e.path === "" ? setActiveChild(0) : ""
-    {
+        }}
-      id: 4,
+      >
-      name: "Event",
+        {_.isEmpty(e.child) ? (
-      route: RouterAdminEvent.main_event,
+          ""
-    },
+        ) : (
-  ];
+          <Box>
+            {e.child.map((v, ii) => (
+              <Box key={ii}>
+                <NavLink
+                  sx={{
+                    ":hover": {
+                      backgroundColor: "transparent",
+                    },
+                  }}
+                  fw={activeChild === ii ? "bold" : "normal"}
+                  label={<Text>{v.name}</Text>}
+                  onClick={() => {
+                    setActive(i);
+                    setActiveChild(ii)
+                    router.push(v.path);
+                  }}
+                />
+              </Box>
+            ))}
+          </Box>
+        )}
+      </NavLink>
+    </Box>
+  ));
 
   return (
     <>
@@ -85,25 +111,7 @@ export default function AdminLayout({
               p="xs"
               bg={"gray.2"}
             >
-              {listAdminPage.map((e, i) => (
+              {navbarItems}
-                <Box key={i}>
-                  <NavLink
-                    sx={{
-                      ":hover": {
-                        backgroundColor: "transparent",
-                      },
-                    }}
-                    fw={active === i ? "bold" : "normal"}
-                    // key={e.id}
-                    label={e.name}
-                    onClick={() => {
-                      setActive(i);
-                      router.push(e.route);
-                    }}
-                  />
-                  {active === i ? <Divider size={"lg"} color="gray" /> : ""}
-                </Box>
-              ))}
             </Navbar>
           </MediaQuery>
         }
@@ -141,7 +149,7 @@ export default function AdminLayout({
                     </Text>
                   ))}
                 </Group> */}
-                <Admin_Logout/>
+                <Admin_Logout />
               </Group>
             </MediaQuery>
           </Header>
@@ -154,7 +162,7 @@ export default function AdminLayout({
       <Drawer opened={opened} onClose={() => setOpened(false)} size={"50%"}>
         <Stack spacing={"xl"}>
           {listAdminPage.map((e) => (
-            <Text key={e.id} onClick={() => router.push(e.route)}>
+            <Text key={e.id} onClick={() => router.push(e.path)}>
               {e.name}
             </Text>
           ))}

src/app_modules/admin/main_dashboard/main/list_page.ts

@@ -0,0 +1,64 @@
+import { RouterAdminEvent } from "@/app/lib/router_admin/router_admin_event";
+import {
+  RouterAdminDashboard,
+  RouterAdminDonasi,
+  RouterAdminInvestasi,
+} from "@/app/lib/router_hipmi/router_admin";
+
+export const listAdminPage = [
+  {
+    id: 1,
+    name: "Main Dashboard",
+    path: RouterAdminDashboard.main_admin,
+    child: [],
+  },
+  {
+    id: 2,
+    name: "Investasi",
+    path: RouterAdminInvestasi.main_investasi,
+    child: [],
+  },
+  {
+    id: 3,
+    name: "Donasi",
+    path: RouterAdminDonasi.main_donasi,
+    child: [],
+  },
+  {
+    id: 4,
+    name: "Event",
+    path: "",
+    child: [
+      {
+        id: 1,
+        name: "Dashboard",
+        path: RouterAdminEvent.main_event,
+      },
+      {
+        id: 2,
+        name: "Table Publish",
+        path: RouterAdminEvent.table_publish,
+      },
+      {
+        id: 3,
+        name: "Table Review",
+        path: RouterAdminEvent.table_review,
+      },
+      {
+        id: 4,
+        name: "Table Reject",
+        path: RouterAdminEvent.table_reject,
+      },
+      {
+        id: 5,
+        name: "Tipe Acara",
+        path: RouterAdminEvent.detail_tipe_acara,
+      },
+      {
+        id: 6,
+        name: "Riwayat",
+        path: RouterAdminEvent.detail_riwayat,
+      },
+    ],
+  },
+];

src/app_modules/admin/splash/splash.tsx

@@ -5,11 +5,11 @@ import { AspectRatio, Center, Image, Stack, Text, Title } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
-import { gs_adminDonasi_hotMenu } from "../donasi/global_state";
+import { gs_admin_hotMenu } from "../global_state";
 
 export default function SplashDashboardAdmin() {
   const router = useRouter();
-  const [active, setActive] = useAtom(gs_adminDonasi_hotMenu);
+  const [active, setActive] = useAtom(gs_admin_hotMenu);
 
   useShallowEffect(() => {
     setTimeout(() => {

src/app_modules/event/create/create.tsx

@@ -30,6 +30,10 @@ import { MODEL_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
 import { Event_funCreate } from "../fun/create/fun_create";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { kMaxLength } from "buffer";
+import _ from "lodash";
+import toast from "react-simple-toasts";
+import moment from "moment";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 
 export default function Event_Create({
   listTipeAcara,
@@ -43,7 +47,6 @@ export default function Event_Create({
   const [listTipe, setListTipe] = useState(listTipeAcara);
   const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
 
-
   const [value, setValue] = useState({
     title: "",
     lokasi: "",
@@ -95,6 +98,12 @@ export default function Event_Create({
           }
         />
         <DateTimePicker
+          // onClick={() => {
+          //   console.log(moment().diff(moment("2024-02-01"), "days"));
+          // }}
+          excludeDate={(date) => {
+            return moment(date).diff(Date.now(), "days") < 0;
+          }}
           withAsterisk
           label="Tanggal & Waktu "
           placeholder="Masukan tangal dan waktu acara"
@@ -137,6 +146,10 @@ async function onSave(
   value: any,
   setHotMenu: any
 ) {
+  if (_.values(value).includes("")) return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+  if (value.eventMaster_TipeAcaraId === 0) return ComponentGlobal_NotifikasiPeringatan("Pilih Tipe Acara");
+  if (moment(value.tanggal).format() === "Invalid date") return ComponentGlobal_NotifikasiPeringatan("Lengkapi Tanggal");
+
   await Event_funCreate(value).then((res) => {
     if (res.status === 201) {
       ComponentGlobal_NotifikasiBerhasil(res.message);

src/app_modules/event/edit/index.tsx

@@ -10,6 +10,9 @@ import { useState } from "react";
 import { MODEL_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
 import { Event_funEditById } from "../fun/edit/fun_edit_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import moment from "moment";
+import _ from "lodash";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 
 export default function Event_Edit({
   dataEvent,
@@ -69,6 +72,9 @@ export default function Event_Edit({
           }}
         />
         <DateTimePicker
+          excludeDate={(date) => {
+            return moment(date).diff(Date.now(), "days") < 0;
+          }}
           withAsterisk
           label="Tanggal & Waktu "
           placeholder="Masukan tangal dan waktu acara"
@@ -104,6 +110,8 @@ export default function Event_Edit({
 }
 
 async function onUpdate(router: AppRouterInstance, value: MODEL_EVENT) {
+  if (_.values(value).includes("")) return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+
   await Event_funEditById(value).then((res) => {
     if (res.status === 200) {
       ComponentGlobal_NotifikasiBerhasil(res.message);

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

@@ -21,14 +21,6 @@ export default function Event_StatusReview({
   const router = useRouter();
   const [data, setData] = useState(listReview);
 
-  useShallowEffect(() => {
-   setTimeout(() =>  loadData(authorId), 1000)
-  }, []);
-
-  async function loadData(authorId: string) {
-    const res : any = await Event_getByStatusId("2", authorId);
-    setData(res);
-  }
 
   if (_.isEmpty(data))
     return (

src/app_modules_admin/READ_ADMIN.md

@@ -0,0 +1 @@
+# Admin here

src/app_modules_admin/main/index.ts

@@ -0,0 +1,4 @@
+import AdminMain_Dashboard from "./main";
+import AdminMain_Layout from "./layout";
+
+export { AdminMain_Dashboard, AdminMain_Layout };

src/app_modules_admin/main/layout.tsx

@@ -1,5 +1,178 @@
-"use client"
+"use client";
 
-export default function Admin_Layout(){
+import {
+  AppShell,
+  Navbar,
+  MediaQuery,
+  Aside,
+  Footer,
+  Header,
+  Burger,
+  Text,
+  useMantineTheme,
+  Box,
+  NavLink,
+  Divider,
+  Group,
+  Title,
+  ActionIcon,
+} from "@mantine/core";
+import { IconLogout } from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import toast from "react-simple-toasts";
 
+export default function AdminMain_Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const theme = useMantineTheme();
+  const [opened, setOpened] = useState(false);
+  const [active, setActive] = useState(0);
+
+  const listAdminPage = [
+    {
+      id: 1,
+      name: "Dashboard",
+      // route: RouterAdminDashboard.main_admin,
+      child: [
+        
+      ],
+    },
+    {
+      id: 2,
+      name: "Investasi",
+      // route: RouterAdminInvestasi.main_investasi,
+      child: [
+        {
+          id: 1,
+          name: "Child Investasi",
+        },
+      ],
+    },
+    {
+      id: 3,
+      name: "Donasi",
+      // route: RouterAdminDonasi.main_donasi,
+      child: [
+        {
+          id: 1,
+          name: "Child Don 1",
+        },
+        {
+          id: 1,
+          name: "Child DOn 2",
+        },
+      ],
+    },
+    {
+      id: 4,
+      name: "Event",
+      // route: RouterAdminEvent.main_event,
+      child: [
+        {
+          id: 1,
+          name: "Child Event",
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <AppShell
+        padding={"sm"}
+        navbarOffsetBreakpoint="md"
+        asideOffsetBreakpoint="sm"
+        navbar={
+          <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
+            <Navbar
+              width={{ lg: 200, md: 200, sm: 200, base: 200 }}
+              hiddenBreakpoint="md"
+              hidden={!opened}
+              p="xs"
+              bg={"gray.2"}
+            >
+              {listAdminPage.map((e, i) => (
+                <Box key={i}>
+                  <NavLink
+                    sx={{
+                      ":hover": {
+                        backgroundColor: "transparent",
+                      },
+                    }}
+                    fw={active === i ? "bold" : "normal"}
+                    label={e.name}
+                    onClick={() => {
+                      setActive(i);
+                      // router.push(e.route);
+                      toast(e.name);
+                    }}
+                  >
+                    {_.isEmpty(e.child) ? (
+                      ""
+                    ) : (
+                      <Box>
+                        {e.child.map((v, ii) => (
+                          <Box key={ii}>
+                            <NavLink label={v.name} />
+                          </Box>
+                        ))}
+                      </Box>
+                    )}
+                  </NavLink>
+                </Box>
+              ))}
+            </Navbar>
+          </MediaQuery>
+        }
+        header={
+          <Header height={50} bg={"gray.2"}>
+            {/* Mobile View */}
+            <MediaQuery largerThan="md" styles={{ display: "none" }}>
+              <Group h={50} align="center" px={"md"} position="apart">
+                <Burger
+                  opened={opened}
+                  onClick={() => setOpened((o) => !o)}
+                  size="sm"
+                  color={theme.colors.gray[6]}
+                  mr="xl"
+                />
+                <Title order={6}>Dashboard Admin</Title>
+                <ActionIcon
+                  variant="transparent"
+                  // onClick={() => router.push(RouterHome.main_home)}
+                >
+                  {/* <IconLogout color="red" />  */}
+                  <IconLogout />
+                </ActionIcon>
+              </Group>
+            </MediaQuery>
+
+            {/* Web View */}
+            <MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
+              <Group position="apart" align="center" h={50} px={"md"}>
+                <Text fw={"lighter"}>Dashboard Admin</Text>
+                <Title order={4}> HIPMI</Title>
+                {/* <Group>
+                  {listAdminPage.map((e) => (
+                    <Text key={e.id}  onClick={() => router.push(e.route)}>
+                      {e.name}
+                    </Text>
+                  ))}
+                </Group> */}
+                {/* <Admin_Logout/> */}
+                <IconLogout />
+              </Group>
+            </MediaQuery>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
 }

src/app_modules_admin/main/main/index.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+export default function AdminMain_Dashboard(){
+    return <>
+    ini main
+    
+    </>
+}

src/app_modules_admin/main/main_dashboard/index.tsx

@@ -1,2 +0,0 @@
-
-