# Event
## feat - Tampilan detail status - Tampilan detail main - Tampilan detail kontribusi - Tampilan edit ### No issue
This commit is contained in:
65
src/app_modules/event/main/beranda.tsx
Normal file
65
src/app_modules/event/main/beranda.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Event_Beranda() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
shadow="sm"
|
||||
padding="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
mb={"md"}
|
||||
onClick={() => router.push(RouterEvent.detail_main)}
|
||||
>
|
||||
{/* <Card.Section p={"xs"}>
|
||||
<Skeleton visible={loading} h={200}></Skeleton>
|
||||
</Card.Section> */}
|
||||
|
||||
<Stack>
|
||||
<Group position="apart" mt="md" mb="xs">
|
||||
<Text weight={500}>Nama Event</Text>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" color="dimmed" lineClamp={2}>
|
||||
Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit. Nisi non ducimus voluptatibus vel, officiis assumenda
|
||||
explicabo reiciendis consequatur consequuntur expedita maiores
|
||||
fugit natus est rem sapiente iusto earum dicta labore.
|
||||
</Text>
|
||||
|
||||
{/* <Group position="apart">
|
||||
{Array(6)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Avatar key={i} bg="blue" radius={"xl"} />
|
||||
))}
|
||||
</Group> */}
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
102
src/app_modules/event/main/kontribusi/index.tsx
Normal file
102
src/app_modules/event/main/kontribusi/index.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { Avatar, Box, Card, Group, Stack, Tabs, Text } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import Event_KontribusiPanitia from "./panitia";
|
||||
import Event_KontribusiPeserta from "./peserta";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
|
||||
export default function Event_Kontribusi() {
|
||||
const router = useRouter();
|
||||
const [tabsKontribusi, setTabsKontribusi] = useState<string | any>("Panitia");
|
||||
const listTabs = [
|
||||
{
|
||||
id: 1,
|
||||
path: <Event_KontribusiPanitia />,
|
||||
value: "Panitia",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
path: <Event_KontribusiPeserta />,
|
||||
value: "Peserta",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
shadow="sm"
|
||||
padding="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
mb={"md"}
|
||||
onClick={() => router.push(RouterEvent.detail_kontribusi)}
|
||||
>
|
||||
{/* <Card.Section p={"xs"}>
|
||||
<Skeleton visible={loading} h={200}></Skeleton>
|
||||
</Card.Section> */}
|
||||
|
||||
<Stack>
|
||||
<Group position="apart" mt="md" mb="xs">
|
||||
<Text weight={500}>Nama Event</Text>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
|
||||
{/* <Text size="sm" color="dimmed" lineClamp={2}>
|
||||
Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit. Nisi non ducimus voluptatibus vel, officiis assumenda
|
||||
explicabo reiciendis consequatur consequuntur expedita maiores
|
||||
fugit natus est rem sapiente iusto earum dicta labore.
|
||||
</Text> */}
|
||||
|
||||
<Group position="apart">
|
||||
{Array(6)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Avatar key={i} bg="blue" radius={"xl"} />
|
||||
))}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <Tabs
|
||||
// color="blue"
|
||||
// variant="pills"
|
||||
// radius="xl"
|
||||
// defaultValue="Panitia"
|
||||
// value={tabsKontribusi}
|
||||
// onTabChange={setTabsKontribusi}
|
||||
// >
|
||||
// <Stack>
|
||||
// <Tabs.List grow>
|
||||
// {listTabs.map((e) => (
|
||||
// <Tabs.Tab
|
||||
// key={e.id}
|
||||
// value={e.value}
|
||||
// bg={tabsKontribusi === e.value ? "blue" : "gray.1"}
|
||||
// >
|
||||
// Sebagai {e.value}
|
||||
// </Tabs.Tab>
|
||||
// ))}
|
||||
// </Tabs.List>
|
||||
// {listTabs.map((e) => (
|
||||
// <Tabs.Panel key={e.id} value={e.value}>
|
||||
// {e.path}
|
||||
// </Tabs.Panel>
|
||||
// ))}
|
||||
// </Stack>
|
||||
// </Tabs>
|
||||
// </>
|
||||
// );
|
||||
}
|
||||
48
src/app_modules/event/main/kontribusi/panitia.tsx
Normal file
48
src/app_modules/event/main/kontribusi/panitia.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
import { Card, Group, Button, Text, Avatar, Stack } from "@mantine/core";
|
||||
import moment from "moment";
|
||||
|
||||
export default function Event_KontribusiPanitia() {
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
shadow="sm"
|
||||
padding="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
mb={"md"}
|
||||
>
|
||||
{/* <Card.Section p={"xs"}>
|
||||
<Skeleton visible={loading} h={200}></Skeleton>
|
||||
</Card.Section> */}
|
||||
|
||||
<Stack>
|
||||
<Group position="apart" mt="md" mb="xs">
|
||||
<Text weight={500}>Nama Event</Text>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" color="dimmed" lineClamp={2}>
|
||||
Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit. Nisi non ducimus voluptatibus vel, officiis assumenda
|
||||
explicabo reiciendis consequatur consequuntur expedita maiores
|
||||
fugit natus est rem sapiente iusto earum dicta labore.
|
||||
</Text>
|
||||
|
||||
<Group position="apart">
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Avatar key={i} bg="blue" radius={"xl"} />
|
||||
))}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
48
src/app_modules/event/main/kontribusi/peserta.tsx
Normal file
48
src/app_modules/event/main/kontribusi/peserta.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
import { Card, Group, Button, Text, Stack, Avatar } from "@mantine/core";
|
||||
import moment from "moment";
|
||||
|
||||
export default function Event_KontribusiPeserta() {
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
shadow="sm"
|
||||
padding="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
mb={"md"}
|
||||
>
|
||||
{/* <Card.Section p={"xs"}>
|
||||
<Skeleton visible={loading} h={200}></Skeleton>
|
||||
</Card.Section> */}
|
||||
|
||||
<Stack>
|
||||
<Group position="apart" mt="md" mb="xs">
|
||||
<Text weight={500}>Nama Event</Text>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" color="dimmed" lineClamp={2}>
|
||||
Deskripsi: Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit. Nisi non ducimus voluptatibus vel, officiis assumenda
|
||||
explicabo reiciendis consequatur consequuntur expedita maiores
|
||||
fugit natus est rem sapiente iusto earum dicta labore.
|
||||
</Text>
|
||||
|
||||
<Group position="apart">
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Avatar key={i} bg="blue" radius={"xl"} />
|
||||
))}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
111
src/app_modules/event/main/layout.tsx
Normal file
111
src/app_modules/event/main/layout.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ActionIcon,
|
||||
AppShell,
|
||||
Center,
|
||||
Footer,
|
||||
Grid,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
import ComponentEvent_HeaderTamplate from "../component/header_tamplate";
|
||||
import {
|
||||
IconCalendarEvent,
|
||||
IconCirclePlus,
|
||||
IconTimelineEvent,
|
||||
IconTimelineEventText,
|
||||
} from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_event_hotMenu, gs_event_status } from "../global_state";
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
|
||||
|
||||
export default function LayoutEvent_Main({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
|
||||
const listFooter = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Beranda",
|
||||
path: RouterEvent.beranda,
|
||||
icon: <IconTimelineEvent />,
|
||||
},
|
||||
|
||||
{
|
||||
id: "2",
|
||||
name: "Status event",
|
||||
path: RouterEvent.status_page,
|
||||
icon: <IconTimelineEventText />,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Kontribusi",
|
||||
path: RouterEvent.kontribusi,
|
||||
icon: <IconCalendarEvent />,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={<ComponentEvent_HeaderTamplate title="Event" route={RouterHome.main_home}/>}
|
||||
footer={
|
||||
<Footer height={70} bg={"dark"} sx={{ borderTop: "px solid blue" }}>
|
||||
{/* <Center>
|
||||
<ActionIcon
|
||||
sx={{
|
||||
zIndex: 1,
|
||||
position: "absolute",
|
||||
}}
|
||||
variant="transparent"
|
||||
bg={"blue"}
|
||||
radius={"xl"}
|
||||
size={"lg"}
|
||||
onClick={() => router.push(RouterEvent.create)}
|
||||
>
|
||||
<IconCirclePlus color="white" size={30} />
|
||||
</ActionIcon>
|
||||
</Center> */}
|
||||
<Grid>
|
||||
{listFooter.map((e, i) => (
|
||||
<Grid.Col
|
||||
key={e.id}
|
||||
span={"auto"}
|
||||
pt={"md"}
|
||||
onClick={() => {
|
||||
router.replace(e.path);
|
||||
setHotMenu(i);
|
||||
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Stack align="center" spacing={0}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c={hotMenu === i ? "blue" : "white"}
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text fz={10} c={hotMenu === i ? "blue" : "white"}>
|
||||
{e.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</Footer>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
40
src/app_modules/event/main/status_page/draft.tsx
Normal file
40
src/app_modules/event/main/status_page/draft.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
import { Group, Paper, Stack, Text, Title } from "@mantine/core";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function Event_StatusDraft() {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Paper
|
||||
key={i}
|
||||
shadow="lg"
|
||||
radius={"md"}
|
||||
p={"md"}
|
||||
withBorder
|
||||
mb={"md"}
|
||||
onClick={() => router.push(RouterEvent.detail_draft)}
|
||||
>
|
||||
<Stack>
|
||||
<Group position="apart">
|
||||
<Title order={6}>Nama Event</Title>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
<Text fz={"sm"} lineClamp={2}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
|
||||
velit modi ut consequatur, iure eaque numquam id iste, nihil
|
||||
laborum facilis dolores vel possimus earum ullam, necessitatibus
|
||||
omnis tenetur repellendus.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
82
src/app_modules/event/main/status_page/index.tsx
Normal file
82
src/app_modules/event/main/status_page/index.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
import { Affix, Button, Stack, Tabs, rem } from "@mantine/core";
|
||||
import { IconCirclePlus } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { gs_event_status } from "../../global_state";
|
||||
import Event_StatusPublish from "./publish";
|
||||
import Event_StatusReview from "./review";
|
||||
import Event_StatusDraft from "./draft";
|
||||
import Event_StatusReject from "./reject";
|
||||
|
||||
export default function Event_StatusPage() {
|
||||
const router = useRouter();
|
||||
const [tabsStatus, setTabsStatus] = useAtom(gs_event_status);
|
||||
const listTabs = [
|
||||
{
|
||||
id: 1,
|
||||
path: <Event_StatusPublish/>,
|
||||
value: "Publish",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
path: <Event_StatusReview/>,
|
||||
value: "Review",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
path: <Event_StatusDraft/>,
|
||||
value: "Draft",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
path: <Event_StatusReject/>,
|
||||
value: "Reject",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Affix position={{ bottom: rem(100), right: rem(20) }}>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
color="blue"
|
||||
leftIcon={<IconCirclePlus />}
|
||||
onClick={() => router.push(RouterEvent.create)}
|
||||
>
|
||||
Tambah Event
|
||||
</Button>
|
||||
</Affix>
|
||||
|
||||
<Tabs
|
||||
color="blue"
|
||||
variant="pills"
|
||||
radius="xl"
|
||||
defaultValue="Publish"
|
||||
value={tabsStatus}
|
||||
onTabChange={setTabsStatus}
|
||||
>
|
||||
<Stack>
|
||||
<Tabs.List grow>
|
||||
{listTabs.map((e) => (
|
||||
<Tabs.Tab
|
||||
key={e.id}
|
||||
value={e.value}
|
||||
bg={tabsStatus === e.value ? "blue" : "gray.1"}
|
||||
>
|
||||
{e.value}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs.List>
|
||||
{listTabs.map((e) => (
|
||||
<Tabs.Panel key={e.id} value={e.value}>
|
||||
{e.path}
|
||||
</Tabs.Panel>
|
||||
))}
|
||||
</Stack>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
}
|
||||
40
src/app_modules/event/main/status_page/publish.tsx
Normal file
40
src/app_modules/event/main/status_page/publish.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
import { Group, Paper, Stack, Text, Title } from "@mantine/core";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function Event_StatusPublish() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Paper
|
||||
key={i}
|
||||
shadow="lg"
|
||||
radius={"md"}
|
||||
p={"md"}
|
||||
withBorder
|
||||
mb={"md"}
|
||||
onClick={() => router.push(RouterEvent.detail_publish)}
|
||||
>
|
||||
<Stack>
|
||||
<Group position="apart">
|
||||
<Title order={6}>Nama Event</Title>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
<Text fz={"sm"} lineClamp={2}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
|
||||
velit modi ut consequatur, iure eaque numquam id iste, nihil
|
||||
laborum facilis dolores vel possimus earum ullam, necessitatibus
|
||||
omnis tenetur repellendus.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
40
src/app_modules/event/main/status_page/reject.tsx
Normal file
40
src/app_modules/event/main/status_page/reject.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
import { Group, Paper, Stack, Text, Title } from "@mantine/core";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function Event_StatusReject() {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Paper
|
||||
key={i}
|
||||
shadow="lg"
|
||||
radius={"md"}
|
||||
p={"md"}
|
||||
withBorder
|
||||
mb={"md"}
|
||||
onClick={() => router.push(RouterEvent.detail_reject)}
|
||||
>
|
||||
<Stack>
|
||||
<Group position="apart">
|
||||
<Title order={6}>Nama Event</Title>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
<Text fz={"sm"} lineClamp={2}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
|
||||
velit modi ut consequatur, iure eaque numquam id iste, nihil
|
||||
laborum facilis dolores vel possimus earum ullam, necessitatibus
|
||||
omnis tenetur repellendus.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
40
src/app_modules/event/main/status_page/review.tsx
Normal file
40
src/app_modules/event/main/status_page/review.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
|
||||
import { Group, Paper, Stack, Text, Title } from "@mantine/core";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function Event_StatusReview() {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Paper
|
||||
key={i}
|
||||
shadow="lg"
|
||||
radius={"md"}
|
||||
p={"md"}
|
||||
withBorder
|
||||
mb={"md"}
|
||||
onClick={() => router.push(RouterEvent.detail_review)}
|
||||
>
|
||||
<Stack>
|
||||
<Group position="apart">
|
||||
<Title order={6}>Nama Event</Title>
|
||||
<Text fz={"sm"}>{moment(new Date()).format("ll")}</Text>
|
||||
</Group>
|
||||
<Text fz={"sm"} lineClamp={2}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
|
||||
velit modi ut consequatur, iure eaque numquam id iste, nihil
|
||||
laborum facilis dolores vel possimus earum ullam, necessitatibus
|
||||
omnis tenetur repellendus.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user