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

Add Daftar Peserta, Daftar Sponsor, Detail Sponsor, Tambah Sponsor

Browse Source
This commit is contained in:
nico
2025-01-15 17:35:47 +08:00
parent d0680f2743
commit a649fad7cb
26 changed files with 651 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app_modules/event/component/detail/comp_box_daftar_peserta.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
import { AccentColor, MainColor } from '@/app_modules/_global/color';
import { ActionIcon, Flex, Paper, Text, Loader } from '@mantine/core';
import { IconUser } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
function Event_ComponentBoxDaftarPeserta({ eventId }: { eventId?: string }) {
const params = useParams<{ id: string }>()
const router = useRouter();
const [isLoading, setLoading] = useState(false);
return (
<>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.blue,
border: `2px solid ${AccentColor.softblue}`,
borderRadius: "10px",
color: "white",
}}
onClick={() => {
setLoading(true);
router.push(RouterEvent.daftar_peserta({ id: params.id }), {
scroll: false,
});
// router.push(RouterInvestasi_OLD.detail_dokumen + investasiId, { scroll: false });
}}
>
<Flex direction={"column"} align={"center"} justify={"center"}>
<Text c={MainColor.white} fz={12}>Daftar Peserta</Text>
<ActionIcon radius={"xl"} variant="transparent" size={60}>
{isLoading ? (
<Loader color="yellow" />
) : (
<IconUser size={70} color={MainColor.white} />
)}
</ActionIcon>
</Flex>
</Paper>
</>
);
}
export default Event_ComponentBoxDaftarPeserta;

44
src/app_modules/event/component/detail/comp_box_sponsor.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
import { AccentColor, MainColor } from '@/app_modules/_global/color';
import { ActionIcon, Flex, Loader, Paper, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { TfiCup } from "react-icons/tfi";
function Event_ComponentBoxDaftarSponsor() {
const router = useRouter();
const [isLoading, setLoading] = useState(false);
const params = useParams<{ id: string }>();
return (
<>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.blue,
border: `2px solid ${AccentColor.softblue}`,
borderRadius: "10px",
color: "white",
}}
onClick={() => {
setLoading(true);
router.push(RouterEvent.daftar_sponsor({ id: params.id }), {
scroll: false,
});
// router.push(RouterInvestasi_OLD.detail_dokumen + investasiId, { scroll: false });
}}
>
<Flex direction={"column"} align={"center"} justify={"center"}>
<Text c={MainColor.white} fz={12}>Daftar Sponsor</Text>
<ActionIcon radius={"xl"} variant="transparent" size={60}>
{isLoading ? (
<Loader color="yellow" />
) : (
<TfiCup size={70} color={MainColor.white} />
)}
</ActionIcon>
</Flex>
</Paper>
</>
);
}
export default Event_ComponentBoxDaftarSponsor;

108
src/app_modules/event/component/detail/create_sponsor.tsx Normal file
View File

@@ -0,0 +1,108 @@
'use client';
import { MainColor } from '@/app_modules/_global/color';
import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage } from '@/app_modules/_global/component';
import { Investasi_ComponentButtonCreateNewInvestasi } from '@/app_modules/investasi/_component';
import { Box, Stack, Loader, AspectRatio, Image, Button, TextInput, Group, Title } from '@mantine/core';
import { IconCamera, IconPhoto } from '@tabler/icons-react';
import React, { useState } from 'react';
function Event_CreateSponsor() {
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}>
Simpan
</Button>
</Stack>
</Stack>
</Stack>
</>
);
}
export default Event_CreateSponsor;

14
src/app_modules/event/component/detail/detail_main.tsx
View File

@@ -4,7 +4,7 @@ import {
ComponentGlobal_AvatarAndUsername,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { Center, Grid, Skeleton, Stack, Text, Title } from "@mantine/core";
import { Center, Grid, SimpleGrid, Skeleton, Stack, Text, Title } from "@mantine/core";
import { MODEL_EVENT } from "../../model/interface";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
@@ -13,6 +13,8 @@ import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail"
import moment from "moment";
import "moment/locale/id";
import { MainColor } from "@/app_modules/_global/color";
import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
export default function ComponentEvent_DetailMainData({
eventId,
@@ -105,6 +107,16 @@ export default function ComponentEvent_DetailMainData({
<Text c={MainColor.white} fw={"bold"}>Deskripsi</Text>
<Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
</Stack>
<SimpleGrid
cols={2}
breakpoints={[
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
<Event_ComponentBoxDaftarPeserta/>
<Event_ComponentBoxDaftarSponsor />
</SimpleGrid>
</Stack>
</Stack>
</ComponentGlobal_CardStyles>

43
src/app_modules/event/component/detail/list_peserta_new.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { AccentColor, MainColor } from '@/app_modules/_global/color';
import { Avatar, Badge, Box, Card, Flex, Group, Stack, Text } from '@mantine/core';
function ComponentEvent_ListPesertaNew({ backgroundColor, border, marginBottom, height, color }: {
backgroundColor?: string;
border?: string;
marginBottom?: string | number;
height?: string | number;
color?: string;
}) {
return (
<>
<Box>
<Card
style={{
backgroundColor: backgroundColor
? backgroundColor
: AccentColor.darkblue,
border: `2px solid ${border ? border : AccentColor.blue}`,
paddingInline: "16px",
paddingBlock: "16px",
borderRadius: "10px",
color: color ? color : MainColor.white,
height: height ? height : "auto",
marginBottom: marginBottom ? marginBottom : "15px",
}}
>
<Flex gap={"md"} align={"center"} justify={"space-between"}>
<Group>
<Avatar radius={"xl"} size={40}>
</Avatar>
<Text fz={"md"}>Nico Arya Putra Laksana</Text>
</Group>
<Badge style={{ color: "white" }} bg={"blue"}>HADIR</Badge>
</Flex>
</Card>
</Box>
</>
);
}
export default ComponentEvent_ListPesertaNew;

51
src/app_modules/event/component/detail/list_sponsor.tsx Normal file
View File

@@ -0,0 +1,51 @@
'use client'
import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
import { AccentColor, MainColor } from '@/app_modules/_global/color';
import { Avatar, Box, Card, Flex, Group, Image, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
function ComponentEvent_ListSponsor({ backgroundColor, border, marginBottom, height, color, }:
{
backgroundColor?: string;
border?: string;
marginBottom?: string | number;
height?: string | number;
color?: string;
})
{
const router = useRouter();
const params = useParams<{ id: string }>();
return (
<>
<Box>
<Card
style={{
backgroundColor: backgroundColor
? backgroundColor
: AccentColor.darkblue,
border: `2px solid ${border ? border : AccentColor.blue}`,
paddingInline: "16px",
paddingBlock: "16px",
borderRadius: "10px",
color: color ? color : MainColor.white,
height: height ? height : "auto",
marginBottom: marginBottom ? marginBottom : "15px",
}}
onClick={() => router.push(RouterEvent.detail_sponsor({id: params.id}))}
>
<Flex gap={"md"} align={"center"} justify={"space-between"}>
<Group>
<Avatar radius={"xl"} size={40}>
<Image src={"https://images.app.goo.gl/C7WDoF9X52HC5SJX9"} alt='' />
</Avatar>
<Text fz={"md"}>INACO</Text>
</Group>
<Text style={{color: 'white'}}>Rp. 100.000</Text>
</Flex>
</Card>
</Box>
</>
);
}
export default ComponentEvent_ListSponsor;

12
src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx
View File

@@ -1,6 +1,6 @@
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Center, Grid, Stack } from "@mantine/core";
import { Center, Grid, SimpleGrid, Stack } from "@mantine/core";
export function Event_ComponentSkeletonDetail() {
return (
@@ -30,6 +30,16 @@ export function Event_ComponentSkeletonDetail() {
<CustomSkeleton h={20} w={"100%"} />
<CustomSkeleton h={20} w={"100%"} />
</Stack>
<SimpleGrid
cols={2}
breakpoints={[
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
<CustomSkeleton h={100} w={"100%"} />
<CustomSkeleton h={100} w={"100%"} />
</SimpleGrid>
</Stack>
</ComponentGlobal_CardStyles>
</>

55
src/app_modules/event/detail/detail_sponsor/index.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client';
import { AccentColor, MainColor } from '@/app_modules/_global/color';
import { ComponentGlobal_CardStyles } from '@/app_modules/_global/component';
import { Box, Flex, Image, Stack, Text, Title } from '@mantine/core';
import { IconBrandWhatsapp } from '@tabler/icons-react';
import React from 'react';
import { TfiFacebook } from 'react-icons/tfi';
function DetailSponsor_Event() {
return (
<>
<Stack pb={"lg"}>
<Stack
spacing={0}
style={{
padding: "15px",
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
color: "white",
}}
align='center'
>
<Text>Nominal Sponsor:</Text>
<Title order={4} c={MainColor.yellow}>
Rp. 100.000
</Title>
</Stack>
<ComponentGlobal_CardStyles>
<Stack>
<Image src={"https://job-portal.niramasutama.com/images/Banner-INACO.png"} alt='' />
<Flex justify={"space-between"} >
<Box>
<Title order={4}>INACO</Title>
</Box>
<Box>
<Title order={4}>Sosial Media:</Title>
<Flex align={"center"} gap={"sm"}>
<TfiFacebook size={10}/>
<Text fz={"sm"}>InacoJellyku</Text>
</Flex>
<Flex align={"center"} gap={"sm"}>
<IconBrandWhatsapp size={10}/>
<Text fz={"sm"}>+6289647038426</Text>
</Flex>
</Box>
</Flex>
</Stack>
</ComponentGlobal_CardStyles>
</Stack>
</>
);
}
export default DetailSponsor_Event;

39
src/app_modules/event/detail/detail_sponsor/layout.tsx Normal file
View File

@@ -0,0 +1,39 @@
'use client';
import { UIGlobal_Drawer, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
import { ActionIcon } 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);
return (
<>
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Sponsor"
customButtonRight={
<ActionIcon variant='transparent' onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color='white' />
</ActionIcon>} />}>
{children}
</UIGlobal_LayoutTamplate>
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={[
{
id: 1,
name: 'Edit Sponsor',
icon: <IconEdit />,
// path: RouterEvent.tambah_sponsor,
},
{
id: 2,
name: 'Hapus Sponsor',
icon: <IconTrash/>
}
]}
/>
</>
);
}
export default LayoutEvent_DetailSponsor;

4
src/app_modules/event/detail/main_detail/index.tsx
View File

@@ -79,11 +79,11 @@ export default function Event_DetailMain({
</Button>
)}
<ComponentEvent_ListPeserta
{/* <ComponentEvent_ListPeserta
total={total}
eventId={eventId}
isNewPeserta={isNewPeserta}
/>
/> */}
</Stack>
</>
);

25
src/app_modules/event/detail/peserta/index.tsx Normal file
View File

@@ -0,0 +1,25 @@
"use client"
import { Stack } from '@mantine/core';
import ComponentEvent_ListPeserta from '../../component/detail/list_peserta';
import { MODEL_EVENT_PESERTA } from '../../model/interface';
import { useParams } from 'next/navigation';
import ComponentEvent_ListPesertaNew from '../../component/detail/list_peserta_new';
// function Event_DaftarPeserta({ totalPeserta, eventId, isNewPeserta }: {
// totalPeserta?: number;
// eventId?: string;
// isNewPeserta?: boolean | null;
// }) {
function Event_DaftarPeserta() {
return (
<>
<Stack>
<ComponentEvent_ListPesertaNew/>
{/* <ComponentEvent_ListPeserta eventId={params.id} total={totalPeserta as any} isNewPeserta={isNewPeserta} /> */}
</Stack>
</>
);
}
export default Event_DaftarPeserta;

14
src/app_modules/event/detail/peserta/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 LayoutEvent_Peserta({children}: {children: React.ReactNode}) {
return (
<>
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="DaftarPeserta" />}>
{children}
</UIGlobal_LayoutTamplate>
</>
);
}
export default LayoutEvent_Peserta;

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

@@ -0,0 +1,12 @@
'use client';
import ComponentEvent_ListSponsor from '../../component/detail/list_sponsor';
function Event_DaftarSponsor() {
return (
<>
<ComponentEvent_ListSponsor/>
</>
);
}
export default Event_DaftarSponsor;

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

@@ -0,0 +1,44 @@
'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 { IconDotsVertical } from '@tabler/icons-react';
import React, { useState } from 'react';
import { TfiCup } from "react-icons/tfi";
function LayoutEvent_Sponsor({ children}: { children: React.ReactNode;}) {
const [openDrawer, setOpenDrawer] = useState(false);
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate
title="Daftar Sponsor"
customButtonRight={
<ActionIcon
variant='transparent'
onClick={() => setOpenDrawer(true)}
>
<IconDotsVertical color="white" />
</ActionIcon>
}
/>}>
{children}
</UIGlobal_LayoutTamplate>
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={[
{
id: 1,
name: 'Tambah Sponsor',
icon: <TfiCup/>,
path: RouterEvent.tambah_sponsor,
},
]}
/>
</>
);
}
export default LayoutEvent_Sponsor;

12
src/app_modules/event/detail/tambah_sponsor/index.tsx Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import CreateSponsor from '../../component/detail/create_sponsor';
function Event_TambahSponsor() {
return (
<>
<CreateSponsor/>
</>
);
}
export default Event_TambahSponsor;

17
src/app_modules/event/detail/tambah_sponsor/layout.tsx Normal file
View File

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

6
src/app_modules/event/index.ts
View File

@@ -22,6 +22,8 @@ import LayoutEvent_DetailKontribusi from "./detail/kontribusi/layout";
import Event_Riwayat from "./main/riwayat";
import Event_DetailRiwayat from "./detail/riwayat";
import LayoutEvent_DetailRiwayat from "./detail/riwayat/layout";
import LayoutEvent_Peserta from "./detail/peserta/layout";
import LayoutEvent_Sponsor from "./detail/sponsor/layout";
export {
Event_SplashScreen,
@@ -47,5 +49,7 @@ export {
LayoutEvent_DetailKontribusi,
Event_Riwayat ,
Event_DetailRiwayat ,
LayoutEvent_DetailRiwayat ,
LayoutEvent_DetailRiwayat,
LayoutEvent_Peserta,
LayoutEvent_Sponsor
};