fix responsive admin event

deskripsi:
- table status
- table tipe acara

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

@@ -1,5 +1,4 @@
 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()

src/app_modules/admin/event/_component/comp_detail_data.tsx

@@ -3,6 +3,7 @@ import { Badge, Grid, Stack, Text } from "@mantine/core";
 import moment from "moment";
 import "moment/locale/id";
 import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
 
 function AdminEvent_ComponentDetailData({
   data,
@@ -62,17 +63,7 @@ function AdminEvent_ComponentDetailData({
   return (
     <>
       {listData.map((item, index) => (
-        <Grid key={index}>
+        <Admin_V3_ComponentDetail item={item} key={index} />
-          <Grid.Col span={3}>
-            <Text fw={"bold"}>{item.label}</Text>
-          </Grid.Col>
-          <Grid.Col span={1}>
-            <Text>:</Text>
-          </Grid.Col>
-          <Grid.Col span={"auto"}>
-            <Text>{item.value}</Text>
-          </Grid.Col>
-        </Grid>
       ))}
     </>
   );

src/app_modules/admin/event/_component/comp_detail_publish.tsx

@@ -3,6 +3,7 @@ import { Button, Grid, Stack, Text } from "@mantine/core";
 import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
 import AdminEvent_ComponentDetailData from "./comp_detail_data";
 import QRCode from "react-qr-code";
+import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
 
 function AdminEvent_ComponentDetailPublish({ data }: { data: MODEL_EVENT }) {
   const handleDownloadQR = () => {
@@ -27,7 +28,19 @@ function AdminEvent_ComponentDetailPublish({ data }: { data: MODEL_EVENT }) {
   const donwloadButton = () => {
     return (
       <>
-        <Grid>
+        <Admin_V3_ComponentDetail
+          item={{
+            title: "QR Code",
+            value: (
+              <QRCode
+                id={data.id}
+                style={{ height: 100, width: 100 }}
+                value={`${origin}/dev/event/konfirmasi/${data.id}`}
+              />
+            ),
+          }}
+        />
+        {/* <Grid>
           <Grid.Col span={3}>
             <Text fw={"bold"}>QR Code</Text>
           </Grid.Col>
@@ -35,14 +48,13 @@ function AdminEvent_ComponentDetailPublish({ data }: { data: MODEL_EVENT }) {
             <Text>:</Text>
           </Grid.Col>
           <Grid.Col span={"auto"}>
-            {/* <Button onClick={handleDownloadQR}>Download QR</Button> */}
             <QRCode
               id={data.id}
               style={{ height: 100, width: 100 }}
               value={`${origin}/dev/event/konfirmasi/${data.id}`}
             />
           </Grid.Col>
-        </Grid>
+        </Grid> */}
       </>
     );
   };

src/app_modules/admin/event/_ui/ui_new_detail.tsx

@@ -14,6 +14,7 @@ import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data"
 import { AdminEvent_ViewDetailPublish } from "../_view/view_detail_publish";
 import { AdminEvent_ViewDetailReview } from "../_view/view_detail_review";
 import { AdminEvent_ViewDetailReject } from "../_view/view_detail_reject";
+import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
 
 export function AdminEvent_UiNewDetail() {
   const params = useParams<{ id: string }>();
@@ -49,9 +50,7 @@ export function AdminEvent_UiNewDetail() {
         <AdminGlobal_ComponentBackButton />
 
         {data === undefined ? (
-          <SimpleGrid cols={2}>
+         <Admin_V3_ComponentSkeletonBreakpoint/>
-            <CustomSkeleton h={500} />
-          </SimpleGrid>
         ) : !data ? (
           <ComponentAdminGlobal_IsEmptyData />
         ) : data.EventMaster_Status.name === "Publish" ? (

src/app_modules/admin/event/_view/view_detail_peserta.tsx

@@ -1,31 +1,26 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_EVENT_PESERTA } from "@/app_modules/event/_lib/interface";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Badge,
-  Button,
   Center,
-  Pagination,
   Paper,
   ScrollArea,
   Stack,
   Table,
   Text,
   TextInput,
-  Title,
 } from "@mantine/core";
-import { useState } from "react";
-import { adminEvent_getListPesertaById } from "../fun";
-import _ from "lodash";
-import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { useShallowEffect } from "@mantine/hooks";
-import { clientLogger } from "@/util/clientLogger";
-import { apiGetAdminDetailEventPesertaById } from "../_lib/api_fecth_admin_event";
-import { useParams } from "next/navigation";
 import { IconSearch } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
+import { apiGetAdminDetailEventPesertaById } from "../_lib/api_fecth_admin_event";
 
 export function AdminEvent_ViewDetailPeserta() {
   const params = useParams<{ id: string }>();
@@ -36,7 +31,7 @@ export function AdminEvent_ViewDetailPeserta() {
 
   useShallowEffect(() => {
     loadInitialData();
-  }, [isActivePage, isSearch])
+  }, [isActivePage, isSearch]);
 
   const loadInitialData = async () => {
     try {
@@ -44,11 +39,11 @@ export function AdminEvent_ViewDetailPeserta() {
         id: params.id,
         page: `${isActivePage}`,
         search: isSearch,
-      })
+      });
 
       if (response?.success && response?.data.data) {
-        setData(response.data.data)
+        setData(response.data.data);
-        setNPage(response.data.nPage || 1)
+        setNPage(response.data.nPage || 1);
       } else {
         console.error("Invalid data format recieved:", response);
         setData([]);
@@ -57,15 +52,15 @@ export function AdminEvent_ViewDetailPeserta() {
       clientLogger.error("Invalid data format recieved:", error);
       setData([]);
     }
-  }
+  };
 
   const onSearch = async (searchTerm: string) => {
     setSearch(searchTerm);
     setActivePage(1);
-  }
+  };
   const onPageClick = (page: number) => {
     setActivePage(page);
-  }
+  };
 
   const renderTableBody = () => {
     if (!Array.isArray(data) || data.length === 0) {
@@ -105,7 +100,7 @@ export function AdminEvent_ViewDetailPeserta() {
         </td>
       </tr>
     ));
-  }
+  };
 
   return (
     <>
@@ -126,52 +121,48 @@ export function AdminEvent_ViewDetailPeserta() {
           }
         />
         {!data ? (
-            <CustomSkeleton height={"80vh"} width="100%" />
+          <CustomSkeleton height={"80vh"} width="100%" />
-        ): (
+        ) : (
-           <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"75vh"}>
+          <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"75vh"}>
-           <ScrollArea w={"100%"} h={"90%"}>
+            <ScrollArea w={"100%"} h={"90%"}>
-             <Table
+              <Table
-               verticalSpacing={"md"}
+                verticalSpacing={"md"}
-               horizontalSpacing={"md"}
+                horizontalSpacing={"md"}
-               p={"md"}
+                p={"md"}
-               w={"100%"}
+                w={"100%"}
- 
+              >
-             >
+                <thead>
-               <thead>
+                  <tr>
-                 <tr>
+                    <th>
-                   <th>
+                      <Center c={AdminColor.white}>Username</Center>
-                     <Center c={AdminColor.white}>Username</Center>
+                    </th>
-                   </th>
+                    <th>
-                   <th>
+                      <Center c={AdminColor.white}>Name</Center>
-                     <Center c={AdminColor.white}>Name</Center>
+                    </th>
-                   </th>
+                    <th>
-                   <th>
+                      <Center c={AdminColor.white}>Nomor</Center>
-                     <Center c={AdminColor.white}>Nomor</Center>
+                    </th>
-                   </th>
+                    <th>
-                   <th>
+                      <Center c={AdminColor.white}>Email</Center>
-                     <Center c={AdminColor.white}>Email</Center>
+                    </th>
-                   </th>
+                    <th>
-                   <th>
+                      <Center c={AdminColor.white}>Konfirmasi Kehadiran</Center>
-                     <Center c={AdminColor.white}>Konfirmasi Kehadiran</Center>
+                    </th>
-                   </th>
+                  </tr>
-                 </tr>
+                </thead>
-               </thead>
+                <tbody>{renderTableBody()}</tbody>
-               <tbody>{renderTableBody()}</tbody>
+              </Table>
-             </Table>
+            </ScrollArea>
-           </ScrollArea>
+
- 
+            <Admin_V3_ComponentPaginationBreakpoint
-           <Center mt={"xl"}>
+              value={isActivePage}
-             <Pagination
+              total={isNPage}
-               value={isActivePage}
+              onChange={(val) => {
-               total={isNPage}
+                onPageClick(val);
-               onChange={(val) => {
+              }}
-                 onPageClick(val);
+            />
-               }}
+          </Paper>
-             />
-           </Center>
-         </Paper>
         )}
-       
       </Stack>
       {/* <pre>{JSON.stringify(dataPeserta, null, 2)}</pre> */}
     </>

src/app_modules/admin/event/_view/view_detail_reject.tsx

@@ -12,6 +12,7 @@ import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_adm
 import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
 import AdminEvent_ComponentDetailData from "../_component/comp_detail_data";
 import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_reject_by_id";
+import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
 
 export function AdminEvent_ViewDetailReject({ data }: { data: MODEL_EVENT }) {
   const [newData, setNewData] = useState<MODEL_EVENT>(data);
@@ -53,7 +54,13 @@ export function AdminEvent_ViewDetailReject({ data }: { data: MODEL_EVENT }) {
       <Admin_ComponentBoxStyle>
         <Stack>
           <AdminEvent_ComponentDetailData data={newData} />
-          <Grid>
+          <Admin_V3_ComponentDetail
+          item={{
+            title: "Catatan report",
+            value: newData.catatan
+          }}
+          />
+          {/* <Grid>
             <Grid.Col span={3}>
               <Text fw={"bold"}>Catatan report</Text>
             </Grid.Col>
@@ -63,7 +70,7 @@ export function AdminEvent_ViewDetailReject({ data }: { data: MODEL_EVENT }) {
             <Grid.Col span={"auto"}>
               <Text>{newData.catatan}</Text>
             </Grid.Col>
-          </Grid>
+          </Grid> */}
 
           <Group mt={100} spacing={"xl"} position="center">
             <Button

src/app_modules/admin/event/_view/view_table_review.tsx

@@ -50,6 +50,7 @@ import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_rejec
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
 import { RouterAdminEvent } from "@/lib/router_admin/router_admin_event";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminEvent_ComponentTableReview() {
   const [data, setData] = useState<MODEL_EVENT[] | null>(null);
@@ -399,11 +400,7 @@ export default function AdminEvent_ComponentTableReview() {
             )}
 
             <ScrollArea w={"100%"} h={"90%"}>
-              <Table
+              <Table verticalSpacing={"md"} horizontalSpacing={"md"} p={"md"}>
-                verticalSpacing={"md"}
-                horizontalSpacing={"md"}
-                p={"md"}
-              >
                 <thead>
                   <tr>
                     <th>
@@ -412,7 +409,7 @@ export default function AdminEvent_ComponentTableReview() {
                     <th>
                       <Center c={AdminColor.white}>Judul</Center>
                     </th>
-                   
+
                     <th>
                       <Center c={AdminColor.white}>
                         Tanggal & Waktu Mulai
@@ -432,15 +429,13 @@ export default function AdminEvent_ComponentTableReview() {
               </Table>
             </ScrollArea>
 
-            <Center mt={"xl"}>
+              <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
                 value={activePage}
                 total={isNPage}
                 onChange={(val) => {
                   onPageClick(val);
                 }}
               />
-            </Center>
           </Paper>
         )}
       </Stack>

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

@@ -1,32 +1,30 @@
 "use client";
 
-import { RouterAdminEvent } from "@/lib/router_admin/router_admin_event";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { apiGetAdminEventRiwayat } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_EVENT } from "@/app_modules/event/_lib/interface";
+import { RouterAdminEvent } from "@/lib/router_admin/router_admin_event";
 import { clientLogger } from "@/util/clientLogger";
 import {
   Box,
-  Button,
   Center,
   Group,
-  Pagination,
   Paper,
   ScrollArea,
-  Spoiler,
   Stack,
   Table,
   Text,
   TextInput,
-  Title,
+  Title
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconCircleCheck, IconSearch } from "@tabler/icons-react";
+import { IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { apiGetAdminEventRiwayat } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminEvent_Riwayat() {
   return (
@@ -213,15 +211,13 @@ function DetailRiwayat() {
               </Table>
             </ScrollArea>
 
-            <Center mt={"xl"}>
+            <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
+              value={activePage}
-                value={activePage}
+              total={isNPage}
-                total={isNPage}
+              onChange={(val) => {
-                onChange={(val) => {
+                onPageClick(val);
-                  onPageClick(val);
+              }}
-                }}
+            />
-              />
-            </Center>
           </Paper>
         )}
       </Stack>

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

@@ -1,9 +1,12 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { apiGetAdminEventTipeAcara } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
+import { clientLogger } from "@/util/clientLogger";
 import {
   ActionIcon,
   Button,
@@ -11,24 +14,22 @@ import {
   Group,
   Modal,
   Paper,
-  SimpleGrid,
   Stack,
   Text,
   TextInput,
   Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconCirclePlus, IconEditCircle, IconTrash } from "@tabler/icons-react";
+import { IconEdit, IconEditCircle, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
 import { AdminEvent_funCreateTipeAcara } from "../fun/create/fun_create_tipe_acara";
 import { AdminEvent_funEditActivationTipeAcaraById } from "../fun/edit/fun_edit_activation_tipe_acara";
 import { AdminEvent_funEditTipeAcara } from "../fun/edit/fun_edit_tipe_acara";
 import { AdminEvent_getListTipeAcara } from "../fun/get/get_list_tipe_acara";
-import { apiGetAdminEventTipeAcara } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { clientLogger } from "@/util/clientLogger";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function AdminEvent_DetailTipeAcara() {
   return (
@@ -51,7 +52,10 @@ function DetailTipeAcara() {
     id: "",
     name: "",
   });
-  const [openCreate, setOpenCreate] = useState(false);
+  const [openCreate, setOpenCreate] = useState(true);
+
+  const [isLoadingCreate, setIsLoadingCreate] = useState(false);
+  const [isLoadingUpdate, setIsLoadingUpdate] = useState(false);
 
   useShallowEffect(() => {
     onLoadData();
@@ -91,7 +95,12 @@ function DetailTipeAcara() {
         </Stack>
       </Modal>
 
-      <Group
+      <ComponentAdminGlobal_TitlePage
+        name="Tipe Acara"
+        color={AdminColor.softBlue}
+      />
+
+      {/* <Group
         position="apart"
         bg={AdminColor.softBlue}
         p={"xs"}
@@ -109,68 +118,17 @@ function DetailTipeAcara() {
         >
           Tambah
         </Button>
-      </Group>
+      </Group> */}
 
       {!tipe ? (
-        <CustomSkeleton height={400} width={"60%"} />
+        <Admin_V3_ComponentSkeletonBreakpoint />
       ) : (
-        <SimpleGrid
+        <Admin_V3_ComponentBreakpoint md={2} lg={2}>
-          cols={2}
-          spacing="lg"
-          breakpoints={[
-            { maxWidth: "62rem", cols: 4, spacing: "lg" },
-            { maxWidth: "48rem", cols: 2, spacing: "sm" },
-            { maxWidth: "36rem", cols: 1, spacing: "sm" },
-          ]}
-        >
           <div>
-            <Paper p={"md"} bg={AdminColor.softBlue}>
+            {openCreate && (
-              <Stack>
+              <Paper p={"sm"} bg={AdminColor.softBlue} shadow="lg">
-                <Title c={AdminColor.white} order={3}>Tipe Acara Yang Tersedia </Title>
-                <Stack px={"md"}>
-                  {tipe.map((e, i) => (
-                    <Stack key={e.id} spacing={"xs"}>
-                      <Group position="apart">
-                        <Text c={AdminColor.white}>{e.name}</Text>
-                        <Group>
-                          <ActionIcon
-                            variant="transparent"
-                            onClick={() => {
-                              setOpenEditor(true);
-                              setOpenCreate(false);
-                              setEdit(e);
-                            }}
-                          >
-                            <IconEditCircle color="green" />
-                          </ActionIcon>{" "}
-                          <ActionIcon
-                            variant="transparent"
-                            onClick={() => {
-                              open();
-                              setHapusTipe({
-                                ...hapusTipe,
-                                id: e.id,
-                                name: e.name,
-                              });
-                            }}
-                          >
-                            <IconTrash color="red" />
-                          </ActionIcon>
-                        </Group>
-                      </Group>
-                      <Divider />
-                    </Stack>
-                  ))}
-                </Stack>
-              </Stack>
-            </Paper>
-          </div>
-
-          {openCreate ? (
-            <div>
-              <Paper p={"sm"} bg={AdminColor.softBlue} shadow="lg" >
                 <Stack>
-                    <TextInput
+                  <TextInput
                     styles={{ label: { color: AdminColor.white } }}
                     value={name ? name : ""}
                     label="Masukan Tipe"
@@ -180,9 +138,9 @@ function DetailTipeAcara() {
                     }}
                   />
                   <Group position="right">
-                    <Button radius={"xl"} onClick={() => setOpenCreate(false)}>
+                    {/* <Button radius={"xl"} onClick={() => setOpenCreate(false)}>
                       Batal
-                    </Button>
+                    </Button> */}
                     <Button
                       disabled={!name}
                       style={{
@@ -197,13 +155,9 @@ function DetailTipeAcara() {
                   </Group>
                 </Stack>
               </Paper>
-            </div>
+            )}
-          ) : (
-            ""
-          )}
 
-          <div>
+            {openEditor && (
-            {openEditor ? (
               <Paper p={"sm"} bg={AdminColor.softBlue}>
                 <Stack>
                   <TextInput
@@ -214,7 +168,7 @@ function DetailTipeAcara() {
                     onChange={(val) => {
                       setEdit({
                         ...(edit as any),
-                        namaBank: val.target.value,
+                        name: val.target.value,
                       });
                     }}
                   />
@@ -222,11 +176,15 @@ function DetailTipeAcara() {
                     <Group position="apart">
                       <Button
                         radius={"xl"}
-                        onClick={() => setOpenEditor(false)}
+                        onClick={() => {
+                          setOpenEditor(false), setOpenCreate(true);
+                        }}
                       >
                         Batal
                       </Button>
                       <Button
+                        loaderPosition="center"
+
                         disabled={!edit?.name}
                         style={{
                           transition: "all 0.5s ease",
@@ -234,7 +192,13 @@ function DetailTipeAcara() {
                         radius={"xl"}
                         color="green"
                         onClick={() =>
-                          onUpdate(edit?.id, edit?.name, setTipe, setOpenEditor)
+                          onUpdate(
+                            edit?.id,
+                            edit?.name,
+                            setTipe,
+                            setOpenEditor,
+                            setOpenCreate
+                          )
                         }
                       >
                         Update
@@ -243,11 +207,58 @@ function DetailTipeAcara() {
                   </Group>
                 </Stack>
               </Paper>
-            ) : (
-              ""
             )}
           </div>
-        </SimpleGrid>
+
+          <div>
+            <Paper p={"md"} bg={AdminColor.softBlue}>
+              <Stack>
+                <Title c={AdminColor.white} order={3}>
+                  Tipe Acara Yang Tersedia{" "}
+                </Title>
+                <Stack px={"md"}>
+                  <Stack>
+                    {tipe.map((e, i) => (
+                      <div key={i}>
+                        <Admin_V3_ComponentBreakpoint allCols={2}>
+                          <Text c={AdminColor.white} lineClamp={1}>
+                            {e.name}
+                          </Text>
+                          <Group position="right">
+                            <ActionIcon
+                              variant="transparent"
+                              onClick={() => {
+                                setOpenEditor(true);
+                                setOpenCreate(false);
+                                setEdit(e);
+                              }}
+                            >
+                              <IconEdit color={AdminColor.green} />
+                            </ActionIcon>{" "}
+                            {/* <ActionIcon
+                         variant="transparent"
+                         onClick={() => {
+                           open();
+                           setHapusTipe({
+                             ...hapusTipe,
+                             id: e.id,
+                             name: e.name,
+                           });
+                         }}
+                       >
+                         <IconTrash color="red" />
+                       </ActionIcon> */}
+                          </Group>
+                        </Admin_V3_ComponentBreakpoint>
+                        <Divider />
+                      </div>
+                    ))}
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Paper>
+          </div>
+        </Admin_V3_ComponentBreakpoint>
       )}
     </>
   );
@@ -270,13 +281,20 @@ async function onSave(name: string, setName: any, setTipe: any) {
   });
 }
 
-async function onUpdate(id: any, edit: any, setTipe: any, setOpenEditor: any) {
+async function onUpdate(
+  id: any,
+  edit: any,
+  setTipe: any,
+  setOpenEditor: any,
+  setOpenCreate: 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);
+        setOpenCreate(true);
       });
     } else {
       ComponentGlobal_NotifikasiGagal(res.message);

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

@@ -1,32 +1,30 @@
 "use client";
 
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { apiGetDataEventByStatus } from "@/app_modules/admin/event/_lib/api_fecth_admin_event";
-import { RouterAdminEvent } from "@/lib/router_admin/router_admin_event";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_EVENT } from "@/app_modules/event/_lib/interface";
+import { RouterAdminEvent } from "@/lib/router_admin/router_admin_event";
 import { clientLogger } from "@/util/clientLogger";
 import {
   Box,
   Button,
   Center,
-  Pagination,
   Paper,
   ScrollArea,
-  Spoiler,
   Stack,
   Table,
   Text,
-  TextInput,
+  TextInput
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconDownload, IconEyeCheck, IconSearch } from "@tabler/icons-react";
+import { IconDownload, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import QRCode from "react-qr-code";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 
 export default function AdminEvent_TablePublish() {
   return (
@@ -139,7 +137,7 @@ function TableStatus() {
           </Center>
         </td>
         <td>
-          <Center c={AdminColor.white} >
+          <Center c={AdminColor.white}>
             <Box w={100}>
               <Text lineClamp={2}>{e.title}</Text>
             </Box>
@@ -290,13 +288,11 @@ function TableStatus() {
             </Table>
           </ScrollArea>
 
-          <Center mt="xl">
+          <Admin_V3_ComponentPaginationBreakpoint
-            <Pagination
+            value={activePage}
-              value={activePage}
+            total={isNPage}
-              total={isNPage}
+            onChange={onPageClick}
-              onChange={onPageClick}
+          />
-            />
-          </Center>
         </Paper>
       )}
     </Stack>

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

@@ -14,7 +14,6 @@ import {
   Center,
   Group,
   Modal,
-  Pagination,
   Paper,
   ScrollArea,
   Stack,
@@ -30,6 +29,7 @@ import { useState } from "react";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
 import { AdminEvent_funEditCatatanById } from "../fun/edit/fun_edit_status_reject_by_id";
 
 export default function AdminEvent_TableReject() {
@@ -282,15 +282,13 @@ function TableStatus() {
               </Table>
             </ScrollArea>
 
-            <Center mt={"xl"}>
+            <Admin_V3_ComponentPaginationBreakpoint
-              <Pagination
+              value={activePage}
-                value={activePage}
+              total={isNPage}
-                total={isNPage}
+              onChange={(val) => {
-                onChange={(val) => {
+                onPageClick(val);
-                  onPageClick(val);
+              }}
-                }}
+            />
-              />
-            </Center>
           </Paper>
         )}
       </Stack>

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

@@ -1,16 +1,10 @@
 "use client";
 
-import {
+import { Stack } from "@mantine/core";
-  Stack
-} from "@mantine/core";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import { AdminEvent_ComponentTableReview } from "../_view";
 
-export default function AdminEvent_TableReview({
+export default function AdminEvent_TableReview({}: {}) {
-  
-}: {
- 
-}) {
   return (
     <>
       <Stack>
@@ -20,5 +14,3 @@ export default function AdminEvent_TableReview({
     </>
   );
 }
-
-