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

91
src/app_modules/vote/component/card_view_publish.tsx Normal file
View File

@@ -0,0 +1,91 @@
"use client";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
import {
Card,
Stack,
Grid,
Avatar,
Divider,
Badge,
Group,
Text,
Title,
} from "@mantine/core";
import moment from "moment";
import { useRouter } from "next/navigation";
export default function ComponentVote_CardViewPublish({
path,
pilihanSaya,
}: {
path: string;
pilihanSaya?: boolean;
}) {
const router = useRouter();
return (
<>
<Card shadow="lg" withBorder p={30} radius={"md"}>
{/* Header name */}
<Card.Section>
<ComponentGlobal_AuthorNameOnHeader />
</Card.Section>
{/* Isi deskripsi */}
<Card.Section py={"sm"} onClick={() => router.push(path)}>
<Stack>
<Text fw={"bold"}>Voting Pemilihan Tempat Makan</Text>
<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>
<Grid>
<Grid.Col span={6}>
<Stack align="center" spacing={"xs"}>
<Text fz={10}>Voting A</Text>
<Avatar radius={100} variant="outline" color="blue">
2
</Avatar>
</Stack>
</Grid.Col>
<Grid.Col span={6}>
<Stack align="center" spacing={"xs"}>
<Text fz={10}>Voting B</Text>
<Avatar radius={100} variant="outline" color="red">
3
</Avatar>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</Stack>
</Card.Section>
{pilihanSaya ? (
<Card.Section py={"sm"}>
<Stack align="center">
<Title order={5}>Pilihan Saya : A</Title>
</Stack>
</Card.Section>
) : (
""
)}
</Card>
</>
);
}

86
src/app_modules/vote/component/card_view_status.tsx Normal file
View File

@@ -0,0 +1,86 @@
"use client";
import {
Card,
Stack,
Title,
Badge,
Group,
Radio,
Grid,
Center,
Text,
} from "@mantine/core";
import moment from "moment";
import { useRouter } from "next/navigation";
export default function ComponentVote_CardViewStatus({
path,
}: {
path: string;
}) {
const router = useRouter();
return (
<>
<Card
shadow="lg"
withBorder
p={30}
radius={"md"}
onClick={() => router.push(path)}
>
{/* Isi deskripsi */}
<Card.Section >
<Stack>
<Text fw={"bold"} truncate>Judul Voting : Pemilihan tempat wisata</Text>
<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.Section py={"sm"}>
<Stack>
<Radio.Group>
<Grid>
<Grid.Col span={"auto"}>
<Center>
<Text>
Nama Voting {""}
<Text fw={"bold"} inherit span>
A
</Text>
</Text>
</Center>
</Grid.Col>
<Grid.Col span={"auto"}>
<Center>
<Text>
Nama Voting {""}
<Text fw={"bold"} inherit span>
B
</Text>
</Text>
</Center>
</Grid.Col>
</Grid>
</Radio.Group>
</Stack>
</Card.Section> */}
</Card>
</>
);
}

53
src/app_modules/vote/component/detail/daftar_voter.tsx Normal file
View File

@@ -0,0 +1,53 @@
"use client";
import {
Card,
Stack,
Center,
Title,
Badge,
Group,
Radio,
Grid,
Text,
Avatar,
Divider,
} from "@mantine/core";
import moment from "moment";
export default function ComponentVote_DaftarVoter() {
return (
<>
<Card shadow="lg" withBorder p={30}>
<Card.Section>
<Stack>
<Center>
<Title order={5}>Daftar Voting</Title>
</Center>
{Array(5)
.fill(0)
.map((e, i) => (
<Stack spacing={"xs"} key={i}>
<Grid>
<Grid.Col span={2}>
<Avatar radius={"xl"} />
</Grid.Col>
<Grid.Col span={8}>
<Stack justify="center" h={"100%"}>
<Text truncate>Nama User</Text>
</Stack>
</Grid.Col>
<Grid.Col span={2}>
<Stack justify="center" h={"100%"}>
<Text truncate>A</Text>
</Stack>
</Grid.Col>
</Grid>
<Divider />
</Stack>
))}
</Stack>
</Card.Section>
</Card>
</>
);
}

92
src/app_modules/vote/component/detail/detail_data.tsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import {
Card,
Stack,
Center,
Title,
Badge,
Group,
Radio,
Grid,
Text,
} from "@mantine/core";
import moment from "moment";
export default function ComponentVote_DetailData() {
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>
</>
);
}

51
src/app_modules/vote/component/detail/detail_data_tanpa_vote.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { Badge, Card, Center, Group, Stack, Text, Title } from "@mantine/core";
import moment from "moment";
export default function ComponentVote_DetailDataTanpaVote() {
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>
</>
);
}

76
src/app_modules/vote/component/detail/hasil_voting.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import {
Avatar,
Box,
Card,
Center,
Grid,
Group,
List,
Stack,
Text,
Title,
} from "@mantine/core";
export default function ComponentVote_HasilVoting() {
return (
<>
<Card shadow="lg" withBorder p={30}>
<Card.Section>
<Stack>
<Center>
<Title order={5}>Hasil Voting</Title>
</Center>
{/* <Group position="center">
<Group>
<Text>
Voting A :{" "}
<Text span inherit fw={"bold"}>
10
</Text>
</Text>
</Group>
<Group>
<Text>
Voting B :{" "}
<Text span inherit fw={"bold"}>
12
</Text>
</Text>
</Group>
</Group> */}
<Grid>
<Grid.Col span={6}>
<Stack align="center">
<Avatar
radius={100}
size={100}
variant="outline"
color="blue"
>
2
</Avatar>
<Text>Voting A</Text>
</Stack>
</Grid.Col>
<Grid.Col span={6}>
<Stack align="center">
<Avatar
radius={100}
size={100}
variant="outline"
color="red"
>
3
</Avatar>
<Text>Voting B</Text>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</Card.Section>
</Card>
</>
);
}

69
src/app_modules/vote/component/header_tamplate.tsx Normal file
View File

@@ -0,0 +1,69 @@
"use client";
import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export default function ComponentVote_HeaderTamplate({
hideBack,
changeIconBack,
route,
route2,
title,
icon,
bg,
}: {
hideBack?: boolean;
changeIconBack?: any;
route?: any;
route2?: any;
title: string;
icon?: any;
bg?: any;
}) {
const router = useRouter();
return (
<>
<Header
height={50}
sx={{ borderStyle: "none" }}
bg={bg === null ? "" : bg}
>
<Group h={50} position="apart" px={"md"}>
{hideBack ? (
<ActionIcon variant="transparent" disabled></ActionIcon>
) : (
<ActionIcon
variant="transparent"
onClick={() => {
if (route === null || route === undefined) {
return router.back();
} else {
return router.push(route);
}
}}
>
{changeIconBack ? changeIconBack : <IconChevronLeft />}
</ActionIcon>
)}
<Title order={5}>{title}</Title>
{(() => {
if (route2 === null || route2 === undefined) {
return <ActionIcon disabled variant="transparent"></ActionIcon>;
} else {
return (
<ActionIcon
variant="transparent"
onClick={() => router.push(route2)}
>
{icon}
</ActionIcon>
);
}
})()}
</Group>
</Header>
</>
);
}