wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Progress Admin

Browse Source
This commit is contained in:
nico
2025-01-16 17:42:36 +08:00
parent 4374def1e9
commit 01f5f32818
15 changed files with 285 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/dev/admin/event/detail/publish/[id]/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
function Page() {
return (
<>
Page
</>
);
}
export default Page;

14
src/app/dev/event/detail/sponsor/edit_sponsor/layout.tsx Normal file
View File

@@ -0,0 +1,14 @@
import Event_LayoutEditSponsor from '@/app_modules/event/detail/sponsor/edit_sponsor/layout';
import React from 'react';
function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<Event_LayoutEditSponsor>
{children}
</Event_LayoutEditSponsor>
</>
);
}
export default Layout;

12
src/app/dev/event/detail/sponsor/edit_sponsor/page.tsx Normal file
View File

@@ -0,0 +1,12 @@
import Event_EditSponsor from '@/app_modules/event/detail/sponsor/edit_sponsor';
import React from 'react';
function Page() {
return (
<>
<Event_EditSponsor/>
</>
);
}
export default Page;

3
src/app/dev/event/detail/sponsor/tambah_sponsor/page.tsx
View File

@@ -1,5 +1,4 @@
import Event_TambahSponsor from '@/app_modules/event/detail/sponsor/tambah_sponsor';
import Event_TambahSponsor from '@/app_modules/event/detail/tambah_sponsor';
import React from 'react';
function Page() {

2
src/app/lib/router_admin/router_admin_event.ts
View File

@@ -3,6 +3,7 @@ export const RouterAdminEvent = {
// detail
detail_peserta: "/dev/admin/event/detail/peserta/",
detail_publish: "/dev/admin/event/detail/publish/",
// child
detail_tipe_acara: "/dev/admin/event/child/tipe_acara",
@@ -12,4 +13,5 @@ export const RouterAdminEvent = {
table_review: "/dev/admin/event/table/review",
table_publish: "/dev/admin/event/table/publish",
table_reject: "/dev/admin/event/table/reject",
};

1
src/app/lib/router_hipmi/router_event.ts
View File

@@ -40,6 +40,7 @@ export const RouterEvent = {
//sponsor
daftar_sponsor: ({ id }: { id: string }) =>
`/dev/event/detail/sponsor/${id}`,
edit_sponsor: "/dev/event/detail/sponsor/edit_sponsor/",
tambah_sponsor: "/dev/event/detail/sponsor/tambah_sponsor/",
detail_sponsor: ({ id }: { id: string }) =>
`/dev/event/detail/detail_sponsor/${id}`,

2
src/app_modules/_global/ui/ui_drawer.tsx
View File

@@ -77,7 +77,7 @@ export default function UIGlobal_Drawer({
</Group>
<SimpleGrid cols={component.length < 4 ? component.length : 4}>
{component.map((e, i) => (
<Stack key={i} align="center" spacing={"xs"}
<Stack key={i} align="center" spacing={"xs"}
onClick={() => {
setPageId(e?.id);
setIsLoading(true);

2
src/app_modules/_global/ui/ui_drawer_custom.tsx
View File

@@ -25,7 +25,7 @@ export default function UIGlobal_DrawerCustom({
}: {
opened: boolean;
close: () => void;
component: React.ReactNode;
component: React.ReactNode;
}) {
return (
<>

5
src/app_modules/admin/event/_lib/global_state.ts Normal file
View File

@@ -0,0 +1,5 @@
import { atomWithStorage } from "jotai/utils";
const gs_admin_event_menu_publish = atomWithStorage("gs_admin_event_menu_publish", "1")
export { gs_admin_event_menu_publish }

51
src/app_modules/admin/event/table_status/detail_publish.tsx Normal file
View File

@@ -0,0 +1,51 @@
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';
function AdminEvent_DetailPublish() {
const [selectPage, setSelectPage] = useAtom(gs_admin_event_menu_publish);
const listPage = [
{
id: "1",
name: "Detail Event",
icon: <IconCircleCheck />,
},
{
id: "2",
name: "Daftar Peserta",
icon: <IconCircleCheck />,
},
{
id: "3",
name: "Daftar Sponsor"
}
]
return (
<>
<Stack>
<AdminGlobal_ComponentBackButton />
<Group>
{listPage.map((e) => (
<Button
key={e.id}
color={selectPage == e.id ? "green" : "gray"}
onClick={() => setSelectPage(e.id)}
style={{
transition: "all 0.5s",
}}
>
{e.name}
</Button>
))}
</Group>
</Stack>
</>
);
}
export default AdminEvent_DetailPublish;

3
src/app_modules/admin/event/table_status/table_publish.tsx
View File

@@ -202,7 +202,6 @@ function TableStatus({ listPublish }: { listPublish: any }) {
e.id === eventId ? (loading === true ? true : false) : false
}
color={"green"}
leftIcon={<IconCircleCheck />}
radius={"xl"}
onClick={async () => {
setEventId(e.id);
@@ -210,7 +209,7 @@ function TableStatus({ listPublish }: { listPublish: any }) {
router.push(RouterAdminEvent.detail_peserta + e.id);
}}
>
Lihat Peserta
Detail
</Button>
</td>
</tr>

82
src/app_modules/event/detail/detail_sponsor/layout.tsx
View File

@@ -1,12 +1,14 @@
'use client';
import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
import { UIGlobal_Drawer, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
import { ActionIcon } from '@mantine/core';
import { AccentColor, MainColor } from '@/app_modules/_global/color';
import { UIGlobal_DrawerCustom, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate, UIGlobal_Modal } from '@/app_modules/_global/ui';
import { ActionIcon, Box, Button, Center, Flex, Stack, Text } from '@mantine/core';
import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';
import React, { useState } from 'react';
function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode }) {
const [openDrawer, setOpenDrawer] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [isLoading, setLoading] = useState(false);
return (
<>
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Sponsor"
@@ -14,27 +16,67 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
<ActionIcon variant='transparent' onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color='white' />
</ActionIcon>} />}>
{children}
{children}
</UIGlobal_LayoutTamplate>
<UIGlobal_Drawer
<UIGlobal_DrawerCustom
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={[
{
id: 1,
name: 'Edit Sponsor',
icon: <IconEdit />,
path: RouterEvent.tambah_sponsor,
},
{
id: 2,
name: 'Hapus Sponsor',
icon: <IconTrash />,
}
]}
component={
<Stack align="center" spacing={"xs"}>
<Flex gap={200} justify={"space-between"}>
<Box>
<ActionIcon
variant="transparent"
c={MainColor.white}
>
<IconEdit />
</ActionIcon>
<Text fz={"sm"} align="center" color={MainColor.white}>
Edit
</Text>
</Box>
<Box>
<Center>
<ActionIcon
variant="transparent"
c={MainColor.white}
onClick={() => setOpenModal(true)}
>
<IconTrash />
</ActionIcon>
</Center>
<Text fz={"sm"} ta={"center"} color={MainColor.white}>
Hapus
</Text>
</Box>
</Flex>
</Stack>
}
/>
<UIGlobal_Modal
title={"Anda yakin akan menghapus sponsor?"}
opened={openModal}
close={() => setOpenModal(false)}
buttonKiri={
<Button style={{ backgroundColor: AccentColor.blue }} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
loaderPosition="center"
style={{ backgroundColor: MainColor.red }}
loading={isLoading ? true : false}
radius={"xl"}
c={AccentColor.white}
>
Hapus
</Button>
}
/>
</>
);
}

109
src/app_modules/event/detail/sponsor/edit_sponsor/index.tsx Normal file
View File

@@ -0,0 +1,109 @@
'use client'
import { MainColor } from '@/app_modules/_global/color';
import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage } from '@/app_modules/_global/component';
import { Box, Stack, Loader, AspectRatio, Image, Group, Button, TextInput, Title } from '@mantine/core';
import { IconCamera, IconPhoto } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
function Event_EditSponsor() {
const router = useRouter();
const [img, setImg] = useState<any | null>(null);
const [isLoadingImg, setIsLoadingImg] = useState(false);
return (
<>
<Stack px={"xs"} spacing={0}>
<Stack spacing={0}>
<Box mb={"sm"}>
<ComponentGlobal_BoxInformation
informasi='Gambar sponsor bisa berupa ilustrasti,
logo atau foto terkait sponsor'/>
</Box>
<ComponentGlobal_BoxUploadImage>
{isLoadingImg ? (
<Stack justify='center' align='center' h={"100%"}>
<Loader size={150} color="yellow" />
</Stack>
) : img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Foto"
height={250}
src={URL.createObjectURL(img)}
/>
</AspectRatio>
) : (
<Stack justify='center' align='center' h={"100%"}>
<IconPhoto size={150} color='gray' />
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Group position="center">
<Button radius={"xl"} leftIcon={<IconCamera color='black' />} color='yellow' c={"black"} bg={MainColor.yellow}>Upload Gambar</Button>
</Group>
<Stack mt={30}>
<TextInput
styles={{
label: {
color: MainColor.white,
},
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
}
}}
withAsterisk
label="Nama Sponsor"
placeholder="Masukan nama sponsor"
/>
<Title order={4} color={MainColor.white}>Sosial Media</Title>
<TextInput
styles={{
label: {
color: MainColor.white,
},
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
}
}}
withAsterisk
label="Facebook"
placeholder="Masukan facebook"
/>
<TextInput
styles={{
label: {
color: MainColor.white,
},
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
}
}}
withAsterisk
label="WhatsApp"
placeholder="Masukan whatsapp"
/>
<Button mt={90} mb={20} radius={"xl"} color='yellow' c={"black"} bg={MainColor.yellow} onClick={() => router.push("/dev/event/detail/sponsor/nominal_sponsor")}>
Simpan
</Button>
</Stack>
</Stack>
</Stack>
</>
);
}
export default Event_EditSponsor;

14
src/app_modules/event/detail/sponsor/edit_sponsor/layout.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
import React from 'react';
function Event_LayoutEditSponsor({children} : {children: React.ReactNode}) {
return (
<>
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Sponsor"/>}>
{children}
</UIGlobal_LayoutTamplate>
</>
);
}
export default Event_LayoutEditSponsor;

14
src/app_modules/event/detail/sponsor/tambah_sponsor/index.tsx
View File

@@ -1,14 +0,0 @@
import Event_CreateSponsor from '@/app_modules/event/component/detail/create_sponsor';
import React from 'react';
function Event_TambahSponsor() {
return (
<>
<Event_CreateSponsor/>
</>
);
}
export default Event_TambahSponsor;