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

# Voting prototype

Browse Source 
- feat
- Tampilan beranda
- Tampilan status
- Tampilan kontribusi
- Tampilan riwayat
## No Issue
This commit is contained in:
Bagasbanuna02
2024-02-07 15:18:25 +08:00
parent d64ed7bf55
commit e6c120bf75
85 changed files with 2538 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/app_modules/vote/detail/draft/index.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { Button, Group, Modal, SimpleGrid, Stack, Title } from "@mantine/core";
import ComponentVote_DetailData from "../../component/detail/detail_data";
import { useRouter } from "next/navigation";
import { useAtom } from "jotai";
import { gs_vote_status } from "../../global_state";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { useDisclosure } from "@mantine/hooks";
export default function Vote_DetailDraft() {
return (
<>
<Stack>
<ComponentVote_DetailData />
<ButtonAction />
</Stack>
</>
);
}
function ButtonAction() {
const router = useRouter();
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
const [opened, { open, close }] = useDisclosure(false);
async function onUpdate() {
setTabsStatus("Review");
ComponentGlobal_NotifikasiBerhasil("Berhasil Ajukan Review", 2000);
router.back();
}
async function onDelete() {
setTabsStatus("Draft");
ComponentGlobal_NotifikasiBerhasil("Berhasil Hapus Vote", 2000);
router.back();
}
return (
<>
<SimpleGrid cols={2}>
<Button
radius={"xl"}
color="yellow"
onClick={() => {
onUpdate();
}}
>
Ajukan Review
</Button>
<Button
radius={"xl"}
color="red"
onClick={() => {
open();
}}
>
Hapus
</Button>
</SimpleGrid>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Stack>
<Title order={6}>Yakin menghapus vote ini ?</Title>
<Group position="center">
<Button
radius={"xl"}
onClick={() => {
close();
}}
>
Kembali
</Button>
<Button
radius={"xl"}
onClick={() => {
onDelete();
}}
color="red"
>
Hapus
</Button>
</Group>
</Stack>
</Modal>
</>
);
}

29
src/app_modules/vote/detail/draft/layout.tsx Normal file
View File

@@ -0,0 +1,29 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
import { IconEdit } from "@tabler/icons-react";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
export default function LayoutVote_DetailDraft({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell
header={
<ComponentVote_HeaderTamplate
title="Detail Draft"
icon={<IconEdit />}
route2={RouterVote.edit}
/>
}
>
{children}
</AppShell>
</>
);
}

76
src/app_modules/vote/detail/kontribusi/index.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import {
Badge,
Card,
Center,
Grid,
Group,
Radio,
Stack,
Text,
Title,
} from "@mantine/core";
import moment from "moment";
import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
export default function Vote_DetailKontribusi() {
return (
<>
<Stack>
<TampilanDataVoting />
<ComponentVote_HasilVoting />
<ComponentVote_DaftarVoter />
</Stack>
</>
);
}
function TampilanDataVoting() {
return (
<>
<Card shadow="lg" withBorder p={30}>
<Card.Section px={"xs"}>
<Stack spacing={"lg"}>
<Center>
<Title order={5}>Judul voting</Title>
</Center>
<Text>
Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Mollitia possimus repellendus in, iste voluptatibus sit
laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
porro, magni nulla consequuntur distinctio at.
</Text>
</Stack>
</Card.Section>
<Card.Section py={"lg"}>
<Stack spacing={0}>
<Center>
<Text fz={10} fw={"bold"}>
Batas Voting
</Text>
</Center>
<Badge>
<Group>
<Text>
{new Date().toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
<Text>-</Text>
<Text>
{new Date(
moment(Date.now()).add(10, "days").calendar()
).toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Badge>
</Stack>
</Card.Section>
</Card>
</>
);
}

21
src/app_modules/vote/detail/kontribusi/layout.tsx Normal file
View File

@@ -0,0 +1,21 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutVote_DetailKontribusi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell
header={<ComponentVote_HeaderTamplate title="Detail Kontribusi" />}
>
{children}
</AppShell>
</>
);
}

107
src/app_modules/vote/detail/main/index.tsx Normal file
View File

@@ -0,0 +1,107 @@
"use client";
import {
Card,
Stack,
Center,
Title,
Badge,
Group,
Radio,
Grid,
Text,
} from "@mantine/core";
import moment from "moment";
import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
export default function Vote_MainDetail() {
return (
<>
<Stack>
<TampilanDataVoting />
<ComponentVote_HasilVoting />
<ComponentVote_DaftarVoter />
</Stack>
</>
);
}
function TampilanDataVoting() {
const listVote = [
{
id: 1,
value: "A",
label: "A",
},
{
id: 2,
value: "B",
label: "B",
},
];
return (
<>
<Card shadow="lg" withBorder p={30}>
<Card.Section px={"xs"}>
<Stack spacing={"lg"}>
<Center>
<Title order={5}>Judul voting</Title>
</Center>
<Text>
Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Mollitia possimus repellendus in, iste voluptatibus sit
laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
porro, magni nulla consequuntur distinctio at.
</Text>
<Stack spacing={0}>
<Center>
<Text fz={10} fw={"bold"}>
Batas Voting
</Text>
</Center>
<Badge>
<Group>
<Text>
{new Date().toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
<Text>-</Text>
<Text>
{new Date(
moment(Date.now()).add(10, "days").calendar()
).toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Badge>
</Stack>
</Stack>
</Card.Section>
<Card.Section py={40}>
<Stack>
<Radio.Group>
<Grid>
{listVote.map((e) => (
<Grid.Col key={e.id} span={"auto"}>
<Center>
<Radio
value={e.value}
label={
<Text fw={"bold"}>{`Nama Voting ${e.label}`}</Text>
}
/>
</Center>
</Grid.Col>
))}
</Grid>
</Radio.Group>
</Stack>
</Card.Section>
</Card>
</>
);
}

19
src/app_modules/vote/detail/main/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutVote_MainDetail({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell header={<ComponentVote_HeaderTamplate title="Detail Voting" />}>
{children}
</AppShell>
</>
);
}

78
src/app_modules/vote/detail/publish/index.tsx Normal file
View File

@@ -0,0 +1,78 @@
"use client";
import {
Badge,
Card,
Center,
Grid,
Group,
Radio,
Stack,
Text,
Title,
} from "@mantine/core";
import ComponentVote_DetailData from "../../component/detail/detail_data";
import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
import moment from "moment";
export default function Vote_DetailPublish() {
return (
<>
<Stack>
{/* <ComponentVote_DetailStatus /> */}
<TampilanDataVoting />
<ComponentVote_HasilVoting />
<ComponentVote_DaftarVoter />
</Stack>
</>
);
}
function TampilanDataVoting() {
return (
<>
<Card shadow="lg" withBorder p={30}>
<Card.Section px={"xs"}>
<Stack spacing={"lg"}>
<Center>
<Title order={5}>Judul voting</Title>
</Center>
<Text>
Deskripsi: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Mollitia possimus repellendus in, iste voluptatibus sit
laborum voluptates aliquam nisi? Earum quas ea quaerat veniam
porro, magni nulla consequuntur distinctio at.
</Text>
</Stack>
</Card.Section>
<Card.Section py={"lg"}>
<Stack spacing={0}>
<Center>
<Text fz={10} fw={"bold"}>
Batas Voting
</Text>
</Center>
<Badge>
<Group>
<Text>
{new Date().toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
<Text>-</Text>
<Text>
{new Date(
moment(Date.now()).add(10, "days").calendar()
).toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Badge>
</Stack>
</Card.Section>
</Card>
</>
);
}

19
src/app_modules/vote/detail/publish/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutVote_DetailPublish({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell header={<ComponentVote_HeaderTamplate title="Detail Publish" />}>
{children}
</AppShell>
</>
);
}

96
src/app_modules/vote/detail/reject/index.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client";
import {
Button,
Group,
Modal,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import ComponentVote_DetailData from "../../component/detail/detail_data";
import { useRouter } from "next/navigation";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { useAtom } from "jotai";
import { gs_vote_status } from "../../global_state";
import { useDisclosure } from "@mantine/hooks";
export default function Vote_DetailReject() {
return (
<>
<Stack spacing={"xl"}>
<ComponentVote_DetailData />
<ButtonAction />
</Stack>
</>
);
}
function ButtonAction() {
const router = useRouter();
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
const [opened, { open, close }] = useDisclosure(false);
async function onUpdate() {
setTabsStatus("Draft");
ComponentGlobal_NotifikasiBerhasil("Berhasil Masuk Draft", 2000);
router.back();
}
async function onDelete() {
setTabsStatus("Reject");
ComponentGlobal_NotifikasiBerhasil("Berhasil Hapus Vote", 2000);
router.back();
}
return (
<>
<SimpleGrid cols={2}>
<Button
radius={"xl"}
color="orange"
onClick={() => {
onUpdate();
}}
>
Edit Kembali
</Button>{" "}
<Button
radius={"xl"}
color="red"
onClick={() => {
open();
}}
>
Hapus
</Button>
</SimpleGrid>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Stack>
<Title order={6}>Yakin menghapus vote ini ?</Title>
<Group position="center">
<Button
radius={"xl"}
onClick={() => {
close();
}}
>
Kembali
</Button>
<Button
radius={"xl"}
onClick={() => {
onDelete();
}}
color="red"
>
Hapus
</Button>
</Group>
</Stack>
</Modal>
</>
);
}

19
src/app_modules/vote/detail/reject/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutVote_DetailReject({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell header={<ComponentVote_HeaderTamplate title="Detail Reject" />}>
{children}
</AppShell>
</>
);
}

56
src/app_modules/vote/detail/review/index.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import {
Badge,
Button,
Card,
Center,
Grid,
Group,
Radio,
Stack,
Text,
Title,
} from "@mantine/core";
import { useAtom } from "jotai";
import moment from "moment";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { gs_vote_status } from "../../global_state";
import ComponentVote_DetailData from "../../component/detail/detail_data";
export default function Vote_DetailReview() {
return (
<>
<Stack spacing={"xl"}>
<ComponentVote_DetailData />
<ButtonAction />
</Stack>
</>
);
}
function ButtonAction() {
const router = useRouter();
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
async function onUpdate() {
setTabsStatus("Draft");
ComponentGlobal_NotifikasiBerhasil("Berhasil Batalkan Review", 2000);
router.back();
}
return (
<>
<Button
radius={"xl"}
color="red"
onClick={() => {
onUpdate();
}}
>
Batalkan Review
</Button>
</>
);
}

19
src/app_modules/vote/detail/review/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutVote_DetailReview({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell header={<ComponentVote_HeaderTamplate title="Detail Review" />}>
{children}
</AppShell>
</>
);
}

21
src/app_modules/vote/detail/riwayat_saya/layout.tsx Normal file
View File

@@ -0,0 +1,21 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutVote_DetailRiwayatSaya({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell
header={<ComponentVote_HeaderTamplate title="Detail Riwayat" />}
>
{children}
</AppShell>
</>
);
}

5
src/app_modules/vote/detail/riwayat_saya/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
"use client";
export default function Vote_DetailRiwayatSaya() {
return <> riwayat saya</>;
}

21
src/app_modules/vote/detail/semua_riwayat/layout.tsx Normal file
View File

@@ -0,0 +1,21 @@
"use client";
import { AppShell } from "@mantine/core";
import React from "react";
import ComponentVote_HeaderTamplate from "../../component/header_tamplate";
export default function LayoutVote_DetailSemuaRiwayat({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<AppShell
header={<ComponentVote_HeaderTamplate title="Detail Riwayat" />}
>
{children}
</AppShell>
</>
);
}

18
src/app_modules/vote/detail/semua_riwayat/page.tsx Normal file
View File

@@ -0,0 +1,18 @@
"use client";
import { Stack } from "@mantine/core";
import ComponentVote_DetailDataTanpaVote from "../../component/detail/detail_data_tanpa_vote";
import ComponentVote_HasilVoting from "../../component/detail/hasil_voting";
import ComponentVote_DaftarVoter from "../../component/detail/daftar_voter";
export default function Vote_DetailSemuaRiwayat() {
return (
<>
<Stack>
<ComponentVote_DetailDataTanpaVote />
<ComponentVote_HasilVoting/>
<ComponentVote_DaftarVoter/>
</Stack>
</>
);
}