# Admin Event

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

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",
-      // jumlah: countPublish,
+      name: "Tipe Acara",
+      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">
-                <IconChevronsRight color={`${e.color}.2`} />
+              <Group position="center">
                 <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
-          shadow="md"
-          radius="md"
-          p="md"
-          bg={"gray.3"}
-          // w={{ lg: "62rem", md: "48rem", sm: "36rem" }}
-          w={300}
+        <SimpleGrid
+          cols={4}
+          spacing="lg"
+          breakpoints={[
+            { maxWidth: "62rem", cols: 4, spacing: "lg" },
+            { maxWidth: "48rem", cols: 2, spacing: "sm" },
+            { maxWidth: "36rem", cols: 1, spacing: "sm" },
+          ]}
         >
-          <Group position="apart">
-            <ActionIcon disabled variant="transparent"></ActionIcon>
-            <Stack align="center" spacing={0}>
-              <Text>Tipe Acara</Text>
-              <Title>{countTipeAcara}</Title>
-            </Stack>
-            <ActionIcon radius={"xl"} onClick={() => router.push("")}>
-              <IconChevronsRight color="gray" />
-            </ActionIcon>
-          </Group>
-        </Paper>
+          {listBox2.map((e, i) => (
+            <Paper
+              key={i}
+              bg={`${e.color}.2`}
+              shadow="md"
+              radius="md"
+              p="md"
+              // sx={{ borderColor: e.color, borderStyle: "solid" }}
+            >
+              <Group position="center">
+                <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" />
-        <ComponentAdminDonasi_TombolKembali />
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Table Publish" />
         <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);
-
-  async function onClick() {
-    // router.push(RouterAdminDonasi.detail_publish);
-  }
+  const [peserta, setPeserta] = useState<MODEL_EVENT_PESERTA[]>();
+  const [eventId, setEventId] = useState("");
+  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" />
-        <ComponentAdminDonasi_TombolKembali />
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Table Reject" />
         <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" />
-        <ComponentAdminDonasi_TombolKembali />
+        <ComponentAdminGlobal_HeaderTamplate name="Event: Table Review" />
         <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}
@@ -133,7 +136,7 @@ function TableStatus({ listReview }: { listReview: MODEL_EVENT[] }) {
               radius={"xl"}
               onClick={() => {
                 onReject(eventId, catatan, setData, close);
-                
+
                 // console.log("hehe")
               }}
             >
@@ -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);