From eecced7482563fb544a898ed3987171dff8a2985 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 17 Jan 2025 17:46:31 +0800
Subject: [PATCH] Tampilan Admin

---
 .../event/detail/detail_sponsor/page.tsx      |  11 ++
 .../admin/event/detail/publish/[id]/page.tsx  |   3 +-
 .../lib/router_admin/router_admin_event.ts    |   3 +
 .../event/_component/detail_data_author.tsx   |  50 ++++++
 .../event/_component/detail_data_event.tsx    |  58 +++++++
 .../event/_component/detail_data_sponsor.tsx  | 111 +++++++++++++
 .../admin/event/_view/view_detail_peserta.tsx | 157 +++++++++---------
 .../admin/event/detail/view_detail_data.tsx   |  27 +++
 .../event/table_status/detail_publish.tsx     |  17 +-
 .../event/table_status/detail_sponsor.tsx     | 129 ++++++++++++++
 .../event/table_status/table_publish.tsx      |   2 +-
 11 files changed, 490 insertions(+), 78 deletions(-)
 create mode 100644 src/app/dev/admin/event/detail/detail_sponsor/page.tsx
 create mode 100644 src/app_modules/admin/event/_component/detail_data_author.tsx
 create mode 100644 src/app_modules/admin/event/_component/detail_data_event.tsx
 create mode 100644 src/app_modules/admin/event/_component/detail_data_sponsor.tsx
 create mode 100644 src/app_modules/admin/event/detail/view_detail_data.tsx
 create mode 100644 src/app_modules/admin/event/table_status/detail_sponsor.tsx

diff --git a/src/app/dev/admin/event/detail/detail_sponsor/page.tsx b/src/app/dev/admin/event/detail/detail_sponsor/page.tsx
new file mode 100644
index 00000000..8da4fe25
--- /dev/null
+++ b/src/app/dev/admin/event/detail/detail_sponsor/page.tsx
@@ -0,0 +1,11 @@
+import AdminEvent_DetailSponsor from '@/app_modules/admin/event/table_status/detail_sponsor';
+
+function Page() {
+  return (
+    <>
+    <AdminEvent_DetailSponsor />
+    </>
+  );
+}
+
+export default Page;
diff --git a/src/app/dev/admin/event/detail/publish/[id]/page.tsx b/src/app/dev/admin/event/detail/publish/[id]/page.tsx
index 70c5c9ea..da2f5681 100644
--- a/src/app/dev/admin/event/detail/publish/[id]/page.tsx
+++ b/src/app/dev/admin/event/detail/publish/[id]/page.tsx
@@ -1,9 +1,10 @@
+import AdminEvent_DetailPublish from '@/app_modules/admin/event/table_status/detail_publish';
 import React from 'react';
 
 function Page() {
   return (
     <>
-      Page
+      <AdminEvent_DetailPublish/>
     </>
   );
 }
diff --git a/src/app/lib/router_admin/router_admin_event.ts b/src/app/lib/router_admin/router_admin_event.ts
index 3ee39f79..8056b233 100644
--- a/src/app/lib/router_admin/router_admin_event.ts
+++ b/src/app/lib/router_admin/router_admin_event.ts
@@ -4,6 +4,7 @@ export const RouterAdminEvent = {
   // detail
   detail_peserta: "/dev/admin/event/detail/peserta/",
   detail_publish: "/dev/admin/event/detail/publish/",
+  detail_sponsor: "/dev/admin/event/detail/detail_sponsor/",
 
   // child
   detail_tipe_acara: "/dev/admin/event/child/tipe_acara",
@@ -13,5 +14,7 @@ export const RouterAdminEvent = {
   table_review: "/dev/admin/event/table/review",
   table_publish: "/dev/admin/event/table/publish",
   table_reject: "/dev/admin/event/table/reject",
+
+  
   
 };
diff --git a/src/app_modules/admin/event/_component/detail_data_author.tsx b/src/app_modules/admin/event/_component/detail_data_author.tsx
new file mode 100644
index 00000000..f44bd592
--- /dev/null
+++ b/src/app_modules/admin/event/_component/detail_data_author.tsx
@@ -0,0 +1,50 @@
+import { Grid, Paper, Stack, Text, Title } from '@mantine/core';
+import React from 'react';
+
+function ComponentEvent_DetailDataAuthor() {
+  return (
+    <>
+      <Paper withBorder p={"lg"}>
+        <Stack>
+          <Title order={3}>Data User</Title>
+          <Stack spacing={"xs"}>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Nama:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text>Nico Arya</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Username:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text>@NicoArya</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Nomor:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text>+628123456789</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Alamat:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text>Jl Raya Sesetan</Text>
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}
+
+export default ComponentEvent_DetailDataAuthor;
diff --git a/src/app_modules/admin/event/_component/detail_data_event.tsx b/src/app_modules/admin/event/_component/detail_data_event.tsx
new file mode 100644
index 00000000..3622a62e
--- /dev/null
+++ b/src/app_modules/admin/event/_component/detail_data_event.tsx
@@ -0,0 +1,58 @@
+import { Box, Grid, Paper, Stack, Text, Title } from '@mantine/core';
+import React from 'react';
+
+function ComponentEvent_DetailDataEvent() {
+  return (
+    <>
+      <Paper withBorder p={"lg"}>
+        <Stack>
+          <Title order={3}>Coba</Title>
+          <Stack spacing={"xs"}>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Lokasi:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text>Tuban</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Tipe Acara:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text>Seminar</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Tanggal & Waktu Mulai:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text>Minggu, 17 Januari 2025</Text>
+                <Text>09:00</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+            <Grid.Col span={6}>
+                <Text fw={"bold"}>Tanggal & Waktu Selesai:</Text>
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Text >Minggu, 17 Januari 2025</Text>
+                <Text >15:00</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <Text fw={"bold"}>Deskripsi:</Text>
+                <Text >Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, natus.</Text>
+              </Grid.Col>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Paper>
+    </>
+  );
+}
+
+export default ComponentEvent_DetailDataEvent;
diff --git a/src/app_modules/admin/event/_component/detail_data_sponsor.tsx b/src/app_modules/admin/event/_component/detail_data_sponsor.tsx
new file mode 100644
index 00000000..dffecc57
--- /dev/null
+++ b/src/app_modules/admin/event/_component/detail_data_sponsor.tsx
@@ -0,0 +1,111 @@
+import { RouterAdminEvent } from '@/app/lib/router_admin/router_admin_event';
+import { Button, Center, Pagination, Paper, ScrollArea, Stack, Table, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const tableRows = [
+  {
+    id: 1,
+    sponsor: <IconImageInPicture />,
+    username: "@NicoArya",
+    name: "Nico Arya",
+    nomor: "+628123456789",
+    email: "nicoarya@gmail.com",
+
+  }
+]
+function AdminEvent_DetailDataSponsor() {
+  const router = useRouter();
+  const rows = tableRows.map((row, i) => (
+    <tr key={i}>
+      <td>
+        <Center>{row.sponsor}</Center>
+      </td>
+      <td>
+        <Center>
+          <Button size='xs' style={{ borderColor: "black", color: "black" }} bg={"#e6e6e6"}>Download</Button>
+        </Center>
+      </td>
+      <td>
+        <Center>{row.username}</Center>
+      </td>
+      <td>
+        <Center>{row.name}</Center>
+      </td>
+      <td>
+        <Center>{row.nomor}</Center>
+      </td>
+      <td>
+        <Center>{row.email}</Center>
+      </td>
+      <td>
+        <Center>
+          <Button onClick={() => router.push(RouterAdminEvent.detail_sponsor)} radius={"xl"} bg={"green"}>Tampilkan</Button>
+        </Center>
+      </td>
+    </tr>
+  ))
+  return (
+    <>
+      <Stack spacing={"xs"} h={"100%"}>
+        <Paper
+          bg={"gray.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4}>Daftar Sponsor</Title>
+        </Paper>
+
+        <Paper p={"md"} withBorder shadow='lg' h={"80vh"}>
+          <ScrollArea w={"100%"} h={"90%"}>
+            <Table
+              verticalSpacing={"xl"}
+              horizontalSpacing={"md"}
+              p={"md"}
+              w={1500}
+              striped
+              highlightOnHover
+            >
+              <thead>
+                <tr>
+                  <th>
+                    <Center>Sponsor</Center>
+                  </th>
+                  <th>
+                    <Center>Download</Center>
+                  </th>
+                  <th>
+                    <Center>Username</Center>
+                  </th>
+                  <th>
+                    <Center>Nama</Center>
+                  </th>
+                  <th>
+                    <Center>Nomor</Center>
+                  </th>
+                  <th>
+                    <Center>Email</Center>
+                  </th>
+                  <th>
+                    <Center>Aksi</Center>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>{rows}</tbody>
+            </Table>
+          </ScrollArea>
+
+          <Center>
+            <Pagination
+              value={1}
+              total={10}
+            />
+          </Center>
+        </Paper>
+      </Stack>
+    </>
+  );
+}
+
+export default AdminEvent_DetailDataSponsor;
diff --git a/src/app_modules/admin/event/_view/view_detail_peserta.tsx b/src/app_modules/admin/event/_view/view_detail_peserta.tsx
index c1b76811..4121452d 100644
--- a/src/app_modules/admin/event/_view/view_detail_peserta.tsx
+++ b/src/app_modules/admin/event/_view/view_detail_peserta.tsx
@@ -10,6 +10,7 @@ import {
   ScrollArea,
   Stack,
   Table,
+  Title,
 } from "@mantine/core";
 import { useState } from "react";
 import { adminEvent_getListPesertaById } from "../fun";
@@ -41,85 +42,91 @@ export function AdminEvent_ViewDetailPeserta({
   const tableRow = _.isEmpty(data)
     ? []
     : data.map((e, i) => (
-        <tr key={i}>
-          <td>
-            <Center>{e?.User?.username}</Center>
-          </td>
-          <td>
-            <Center>{e?.User?.Profile?.name}</Center>
-          </td>
-          <td>
-            <Center>+{e?.User?.nomor}</Center>
-          </td>
-          <td>
-            <Center>{e?.User?.Profile?.email}</Center>
-          </td>
-          <td>
-            <Center>
-              {e.isPresent ? (
-                <Badge color="green">Hadir</Badge>
-              ) : (
-                <Badge color="red">Tidak Hadir</Badge>
-              )}
-            </Center>
-          </td>
-        </tr>
-      ));
+      <tr key={i}>
+        <td>
+          <Center>{e?.User?.username}</Center>
+        </td>
+        <td>
+          <Center>{e?.User?.Profile?.name}</Center>
+        </td>
+        <td>
+          <Center>+{e?.User?.nomor}</Center>
+        </td>
+        <td>
+          <Center>{e?.User?.Profile?.email}</Center>
+        </td>
+        <td>
+          <Center>
+            {e.isPresent ? (
+              <Badge color="green">Hadir</Badge>
+            ) : (
+              <Badge color="red">Tidak Hadir</Badge>
+            )}
+          </Center>
+        </td>
+      </tr>
+    ));
 
   return (
     <>
-      <Paper p={"md"} withBorder shadow="lg" h={"75vh"}>
-        <ScrollArea w={"100%"} h={"90%"}>
-          <Table
-            verticalSpacing={"md"}
-            horizontalSpacing={"md"}
-            p={"md"}
-            w={"100%"}
-            striped
-            highlightOnHover
-          >
-            <thead>
-              <tr>
-                <th>
-                  <Center>Username</Center>
-                </th>
-                <th>
-                  <Center>Name</Center>
-                </th>
-                <th>
-                  <Center>Nomor</Center>
-                </th>
-                <th>
-                  <Center>Email</Center>
-                </th>
-                <th>
-                  <Center>Konfirmasi Kehadiran</Center>
-                </th>
-              </tr>
-            </thead>
-            <tbody>{tableRow}</tbody>
-          </Table>
-          {_.isEmpty(data) ? (
-            <ComponentAdminGlobal_IsEmptyData
-              text="Tidak ada peserta"
-              marginTop={100}
+      <Stack spacing={"xs"} h={"100%"}>
+        <Paper bg={"gray.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}>
+          <Title order={4}>Daftar Peserta</Title>
+        </Paper>
+        <Paper p={"md"} withBorder shadow="lg" h={"75vh"}>
+          <ScrollArea w={"100%"} h={"90%"}>
+            <Table
+              verticalSpacing={"md"}
+              horizontalSpacing={"md"}
+              p={"md"}
+              w={"100%"}
+              striped
+              highlightOnHover
+            >
+              <thead>
+                <tr>
+                  <th>
+                    <Center>Username</Center>
+                  </th>
+                  <th>
+                    <Center>Name</Center>
+                  </th>
+                  <th>
+                    <Center>Nomor</Center>
+                  </th>
+                  <th>
+                    <Center>Email</Center>
+                  </th>
+                  <th>
+                    <Center>Konfirmasi Kehadiran</Center>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>{tableRow}</tbody>
+            </Table>
+            {_.isEmpty(data) ? (
+              <ComponentAdminGlobal_IsEmptyData
+                text="Tidak ada peserta"
+                marginTop={100}
+              />
+            ) : (
+              ""
+            )}
+          </ScrollArea>
+
+          <Center mt={"xl"}>
+            <Pagination
+              value={isActivePage}
+              total={isNPage}
+              onChange={(val) => {
+                onPageClick(val);
+              }}
             />
-          ) : (
-            ""
-          )}
-        </ScrollArea>
-
-        <Center mt={"xl"}>
-          <Pagination
-            value={isActivePage}
-            total={isNPage}
-            onChange={(val) => {
-              onPageClick(val);
-            }}
-          />
-        </Center>
-      </Paper>
-
+          </Center>
+        </Paper>
+      </Stack>
       {/* <pre>{JSON.stringify(dataPeserta, null, 2)}</pre> */}
     </>
   );
diff --git a/src/app_modules/admin/event/detail/view_detail_data.tsx b/src/app_modules/admin/event/detail/view_detail_data.tsx
new file mode 100644
index 00000000..0a46bb17
--- /dev/null
+++ b/src/app_modules/admin/event/detail/view_detail_data.tsx
@@ -0,0 +1,27 @@
+import { SimpleGrid } from '@mantine/core';
+import React from 'react';
+import ComponentEvent_DetailDataAuthor from '../_component/detail_data_author';
+import ComponentEvent_DetailDataEvent from '../_component/detail_data_event';
+
+function AdminEvent_ViewDetailData({ }) {
+  return (
+    <>
+      <SimpleGrid
+        cols={2}
+        breakpoints={[
+          { maxWidth: "48rem", cols: 2, spacing: "sm" },
+          { maxWidth: "36rem", cols: 1, spacing: "sm" },
+        ]}
+      >
+        {/* //Data Author */}
+        <ComponentEvent_DetailDataAuthor />
+        
+        {/* Data Event */}
+        <ComponentEvent_DetailDataEvent/>
+
+      </SimpleGrid> 
+    </>
+  );
+}
+
+export default AdminEvent_ViewDetailData;
diff --git a/src/app_modules/admin/event/table_status/detail_publish.tsx b/src/app_modules/admin/event/table_status/detail_publish.tsx
index e934a741..7b78bbe3 100644
--- a/src/app_modules/admin/event/table_status/detail_publish.tsx
+++ b/src/app_modules/admin/event/table_status/detail_publish.tsx
@@ -1,9 +1,13 @@
+'use client'
 import { useAtom } from 'jotai';
 import React from 'react';
 import { gs_admin_event_menu_publish } from '../_lib/global_state';
 import { IconCircleCheck } from '@tabler/icons-react';
 import { Button, Group, Stack } from '@mantine/core';
 import AdminGlobal_ComponentBackButton from '../../_admin_global/back_button';
+import { AdminEvent_ViewDetailPeserta } from '../_view';
+import AdminEvent_ViewDetailData from '../detail/view_detail_data';
+import AdminEvent_DetailDataSponsor from '../_component/detail_data_sponsor';
 
 function AdminEvent_DetailPublish() {
   const [selectPage, setSelectPage] = useAtom(gs_admin_event_menu_publish);
@@ -20,7 +24,8 @@ function AdminEvent_DetailPublish() {
     },
     {
       id: "3",
-      name: "Daftar Sponsor"
+      name: "Daftar Sponsor",
+      icon: <IconCircleCheck />,
     }
   ]
   return (
@@ -31,6 +36,7 @@ function AdminEvent_DetailPublish() {
         <Group>
           {listPage.map((e) => (
             <Button
+              radius={"xl"}
               key={e.id}
               color={selectPage == e.id ? "green" : "gray"}
               onClick={() => setSelectPage(e.id)}
@@ -43,6 +49,15 @@ function AdminEvent_DetailPublish() {
 
           ))}
         </Group>
+        {selectPage == "1" ? (
+          <AdminEvent_ViewDetailData />
+        ) : null}
+        {selectPage == "2" ? (
+          <AdminEvent_ViewDetailPeserta dataPeserta={{}} eventId={""}/>
+        ) : null}
+        {selectPage == "3" ? (
+          <AdminEvent_DetailDataSponsor />
+        ) : null}
       </Stack>
     </>
   );
diff --git a/src/app_modules/admin/event/table_status/detail_sponsor.tsx b/src/app_modules/admin/event/table_status/detail_sponsor.tsx
new file mode 100644
index 00000000..0034b600
--- /dev/null
+++ b/src/app_modules/admin/event/table_status/detail_sponsor.tsx
@@ -0,0 +1,129 @@
+'use client'
+import { ActionIcon, Badge, Button, Center, Group, Paper, ScrollArea, Select, Stack, Table, Title } from '@mantine/core';
+import React from 'react';
+import AdminGlobal_ComponentBackButton from '../../_admin_global/back_button';
+import { IconImageInPicture, IconReload } from '@tabler/icons-react';
+
+const tableRows = [
+  {
+    id: 1,
+    donatur: "Keiko",
+    bank: "BRI",
+    nominal: "Rp. 100.000",
+    tanggal: "Kamis, 16 Januari 2025",
+
+  }
+]
+function AdminEvent_DetailSponsor() {
+  const rows = tableRows.map((row, i) => (
+    <tr key={i}>
+      <td>
+        <Center>{row.donatur}</Center>
+      </td>
+      <td>
+        <Center>{row.bank}</Center>
+      </td>
+      <td>
+        <Center>{row.nominal}</Center>
+      </td>
+      <td>
+        <Center>{row.tanggal}</Center>
+      </td>
+      <td>
+        <Center>
+          <Badge w={150}  variant='dot'>Berhasil</Badge>
+        </Center>
+      </td>
+      <td>
+        <Center>
+          <Button radius={"xl"} bg={"blue"}>Cek</Button>
+        </Center>
+      </td>
+      <td>
+        <Center>
+          <Button radius={"xl"} bg={"green"}>Cek</Button>
+        </Center>
+      </td>
+      <td>
+        <Center>
+          <Button radius={"xl"} style={{ color: "green" }} bg={"white"}>Terima</Button>
+        </Center>
+      </td>
+    </tr>
+  ))
+  return (
+    <>
+      <Stack>
+        <AdminGlobal_ComponentBackButton />
+        <Stack spacing={"xs"} h={"100%"}>
+          <Group
+            position='apart'
+            bg={"gray.4"}
+            p={"xs"}
+            style={{ borderRadius: "6px" }}
+          >
+            <Title order={4}>Detail Sponsor</Title>
+            <Group>
+              <ActionIcon
+                size={"lg"}
+                radius={"xl"}
+                variant='light'
+              >
+                <IconReload />
+              </ActionIcon>
+              <Select
+                placeholder='Pilih Status'
+                data={["Berhasil", "Proses", "Menunggu", "Gagal"]} />
+            </Group>
+          </Group>
+
+          <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+            <ScrollArea w={"100%"} h={"90%"}>
+              <Table
+                verticalSpacing={"xl"}
+                horizontalSpacing={"md"}
+                p={"md"}
+                w={1500}
+                striped
+                highlightOnHover
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      <Center>Nama Sponsor</Center>
+                    </th>
+                    <th>
+                      <Center>Nama Bank</Center>
+                    </th>
+                    <th>
+                      <Center>Nominal Sponsor</Center>
+                    </th>
+                    <th>
+                      <Center>Tanggal</Center>
+                    </th>
+                    <th>
+                      <Center>Status</Center>
+                    </th>
+                    <th>
+                      <Center>Bukti Transfer</Center>
+                    </th>
+                    <th>
+                      <Center>Gambar Sponsor</Center>
+                    </th>
+                    <th>
+                      <Center>Aksi</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{rows}</tbody>
+              </Table>
+            </ScrollArea>
+          </Paper>
+
+        </Stack>
+      </Stack>
+    </>
+  );
+}
+
+export default AdminEvent_DetailSponsor;
diff --git a/src/app_modules/admin/event/table_status/table_publish.tsx b/src/app_modules/admin/event/table_status/table_publish.tsx
index 082bbaec..7a80703f 100644
--- a/src/app_modules/admin/event/table_status/table_publish.tsx
+++ b/src/app_modules/admin/event/table_status/table_publish.tsx
@@ -206,7 +206,7 @@ function TableStatus({ listPublish }: { listPublish: any }) {
             onClick={async () => {
               setEventId(e.id);
               setLoading(true);
-              router.push(RouterAdminEvent.detail_peserta + e.id);
+              router.push(RouterAdminEvent.detail_publish + e.id);
             }}
           >
             Detail