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

fix responsive admin voting

Browse Source 
deskripsi:
- fix detail voting
This commit is contained in:
Bagasbanuna02
2025-04-17 16:45:45 +08:00
parent 1d902a3f2d
commit 35b8281741
8 changed files with 96 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app_modules/admin/vote/child/riwayat/index.tsx
View File

@@ -210,7 +210,6 @@ function TableStatus() {
verticalSpacing={"md"} verticalSpacing={"md"}
horizontalSpacing={"md"} horizontalSpacing={"md"}
p={"md"} p={"md"}
w={1500}
> >
<thead> <thead>
<tr> <tr>

49
src/app_modules/admin/vote/component/comp_detail.tsx
View File

@@ -1,8 +1,9 @@
"use client"; "use client";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface"; import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { Badge, Grid, Stack, Text, Title } from "@mantine/core"; import { Badge, ScrollArea, Stack, Text } from "@mantine/core";
import moment from "moment"; import moment from "moment";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
interface Props { interface Props {
data: MODEL_VOTING; data: MODEL_VOTING;
@@ -35,7 +36,11 @@ export function AdminVoting_ComponentDetail({ data }: Props) {
{ {
title: "Status", title: "Status",
value: ( value: (
<Badge variant="light">{data.Voting_Status.name === "Publish" && cekHari < 0 ? "Riwayat" : data.Voting_Status.name}</Badge> <Badge variant="light">
{data.Voting_Status.name === "Publish" && cekHari < 0
? "Riwayat"
: data.Voting_Status.name}
</Badge>
), ),
}, },
]; ];
@@ -44,34 +49,20 @@ export function AdminVoting_ComponentDetail({ data }: Props) {
<> <>
<Stack> <Stack>
{listData.map((item, index) => ( {listData.map((item, index) => (
<Grid key={index}> <Admin_V3_ComponentDetail item={item} key={index} />
<Grid.Col span={3}>
<Text>{item.title}</Text>
</Grid.Col>
<Grid.Col span={1}>
<Text>:</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{item.value}</Text>
</Grid.Col>
</Grid>
))} ))}
<Admin_V3_ComponentDetail
<Grid> item={{
<Grid.Col span={3}> label: <Text>Daftar Pilihan</Text>,
<Text>Daftar Pilihan</Text> value: (
</Grid.Col> <Stack>
<Grid.Col span={1}> {data.Voting_DaftarNamaVote.map((e, i) => (
<Text>:</Text> <Text key={i}>- {e.value}</Text>
</Grid.Col> ))}
<Grid.Col span={"auto"}> </Stack>
<Stack> ),
{data.Voting_DaftarNamaVote.map((e, i) => ( }}
<Text key={i}>- {e.value}</Text> />
))}
</Stack>
</Grid.Col>
</Grid>
</Stack> </Stack>
</> </>
); );

18
src/app_modules/admin/vote/component/comp_detail_publish.tsx
View File

@@ -1,22 +1,26 @@
"use client"; "use client";
import { SimpleGrid, Title } from "@mantine/core"; import { ScrollArea, SimpleGrid, Title } from "@mantine/core";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle"; import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { AdminVoting_ComponentDetail } from "./comp_detail"; import { AdminVoting_ComponentDetail } from "./comp_detail";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface"; import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { AdminVoting_ComponentKontributorList } from "./comp_kontributor"; import { AdminVoting_ComponentKontributorList } from "./comp_kontributor";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
interface Props { interface Props {
data: MODEL_VOTING; data: MODEL_VOTING;
} }
export function AdminVoting_ComponentDetailPublish({ data }: Props) { export function AdminVoting_ComponentDetailPublish({ data }: Props) {
return ( return (
<SimpleGrid cols={2}> <Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle > <Admin_ComponentBoxStyle style={{ maxHeight: 700 }}>
<AdminVoting_ComponentDetail data={data} /> <ScrollArea h={650}>
<AdminVoting_ComponentDetail data={data} />
</ScrollArea>
</Admin_ComponentBoxStyle> </Admin_ComponentBoxStyle>
<AdminVoting_ComponentKontributorList dataHasil={data.Voting_DaftarNamaVote}/> <AdminVoting_ComponentKontributorList
</SimpleGrid> dataHasil={data.Voting_DaftarNamaVote}
/>
</Admin_V3_ComponentBreakpoint>
); );
} }

32
src/app_modules/admin/vote/component/comp_detail_reject.tsx
View File

@@ -1,11 +1,14 @@
"use client"; "use client";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface"; import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { Grid, SimpleGrid, Text } from "@mantine/core"; import { Grid, SimpleGrid, Stack, Text } from "@mantine/core";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle"; import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { AdminVoting_ComponentDetail } from "./comp_detail"; import { AdminVoting_ComponentDetail } from "./comp_detail";
import { AdminVoting_ComponentDetailRejectButton } from "./button/comp_button_detail_reject"; import { AdminVoting_ComponentDetailRejectButton } from "./button/comp_button_detail_reject";
import { useState } from "react"; import { useState } from "react";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { MainColor } from "@/app_modules/_global/color";
import { Admin_V3_ComponentDetail } from "../../_components_v3/comp_detail_data";
interface Props { interface Props {
data: MODEL_VOTING; data: MODEL_VOTING;
@@ -14,10 +17,12 @@ export function AdminVoting_ComponentDetailReject({ data }: Props) {
const [newData, setNewData] = useState<MODEL_VOTING>(data); const [newData, setNewData] = useState<MODEL_VOTING>(data);
return ( return (
<SimpleGrid cols={2}> <Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle> <Admin_ComponentBoxStyle>
<AdminVoting_ComponentDetail data={newData} /> <Stack>
<ReportNote catatan={newData.catatan} /> <AdminVoting_ComponentDetail data={newData} />
<ReportNote catatan={newData.catatan} />
</Stack>
<AdminVoting_ComponentDetailRejectButton <AdminVoting_ComponentDetailRejectButton
data={newData} data={newData}
onUpdateData={(val) => { onUpdateData={(val) => {
@@ -28,24 +33,19 @@ export function AdminVoting_ComponentDetailReject({ data }: Props) {
}} }}
/> />
</Admin_ComponentBoxStyle> </Admin_ComponentBoxStyle>
</SimpleGrid> </Admin_V3_ComponentBreakpoint>
); );
} }
function ReportNote({ catatan }: { catatan: string }) { function ReportNote({ catatan }: { catatan: string }) {
return ( return (
<> <>
<Grid mt={"md"}> <Admin_V3_ComponentDetail
<Grid.Col span={3}> item={{
<Text>Catatan report</Text> label: <Text>Catatan report</Text>,
</Grid.Col> value: <Text>{catatan}</Text>,
<Grid.Col span={1}> }}
<Text>:</Text> />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{catatan}</Text>
</Grid.Col>
</Grid>
</> </>
); );
} }

10
src/app_modules/admin/vote/component/comp_detail_review.tsx
View File

@@ -1,21 +1,21 @@
"use client"; "use client";
import { MODEL_VOTING } from "@/app_modules/vote/model/interface"; import { MODEL_VOTING } from "@/app_modules/vote/model/interface";
import { Button, Group, SimpleGrid } from "@mantine/core";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle"; import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { AdminVoting_ComponentDetail } from "./comp_detail"; import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { AdminVoting_ComponentDetailReviewButton } from "./button/comp_button_detail_review"; import { AdminVoting_ComponentDetailReviewButton } from "./button/comp_button_detail_review";
import { AdminVoting_ComponentDetail } from "./comp_detail";
interface Props { interface Props {
data: MODEL_VOTING; data: MODEL_VOTING;
} }
export function AdminVoting_ComponentDetailReview({ data }: Props) { export function AdminVoting_ComponentDetailReview({ data }: Props) {
return ( return (
<SimpleGrid cols={2}> <Admin_V3_ComponentBreakpoint>
<Admin_ComponentBoxStyle> <Admin_ComponentBoxStyle>
<AdminVoting_ComponentDetail data={data} /> <AdminVoting_ComponentDetail data={data} />
<AdminVoting_ComponentDetailReviewButton data={data}/> <AdminVoting_ComponentDetailReviewButton data={data} />
</Admin_ComponentBoxStyle> </Admin_ComponentBoxStyle>
</SimpleGrid> </Admin_V3_ComponentBreakpoint>
); );
} }

59
src/app_modules/admin/vote/component/comp_kontributor.tsx
View File

@@ -13,7 +13,7 @@ import {
ScrollArea, ScrollArea,
Stack, Stack,
Text, Text,
Title Title,
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash"; import _ from "lodash";
@@ -21,6 +21,8 @@ import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle"; import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
import { apiGetAdminKontibutorVotingById } from "../lib/api_fetch_admin_voting"; import { apiGetAdminKontibutorVotingById } from "../lib/api_fetch_admin_voting";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { MainColor } from "@/app_modules/_global/color";
interface Props { interface Props {
dataHasil: MODEL_VOTING_DAFTAR_NAMA_VOTE[]; dataHasil: MODEL_VOTING_DAFTAR_NAMA_VOTE[];
@@ -55,20 +57,23 @@ export function AdminVoting_ComponentKontributorList({ dataHasil }: Props) {
Hasil Kontributor Hasil Kontributor
</Title> </Title>
<Grid justify="center"> <Admin_V3_ComponentBreakpoint
cols={dataHasil.length}
sm={2}
md={2}
lg={2}
>
{dataHasil?.map((e: MODEL_VOTING_DAFTAR_NAMA_VOTE, i) => ( {dataHasil?.map((e: MODEL_VOTING_DAFTAR_NAMA_VOTE, i) => (
<Grid.Col span={3} key={i}> <Stack key={i} p={"md"} align="center">
<Stack p={"md"} align="center"> <Paper withBorder p={"xl"}>
<Paper withBorder p={"xl"}> <Text fz={30}>{e.jumlah}</Text>
<Text fz={30}>{e.jumlah}</Text> </Paper>
</Paper> <Text lineClamp={2} fz={"sm"}>
<Text lineClamp={2} fz={"sm"}> {e.value}
{e.value} </Text>
</Text> </Stack>
</Stack>
</Grid.Col>
))} ))}
</Grid> </Admin_V3_ComponentBreakpoint>
{!data ? ( {!data ? (
<CustomSkeleton height={100} /> <CustomSkeleton height={100} />
@@ -79,19 +84,31 @@ export function AdminVoting_ComponentKontributorList({ dataHasil }: Props) {
</Text> </Text>
</Center> </Center>
) : ( ) : (
<Box h={450} px={"sm"}> <Box h={450}>
<ScrollArea h={430} w={"100%"} p={"sm"}> <ScrollArea h={430} w={"100%"}>
<Stack p={"sm"}> <Stack p={"sm"}>
{data?.map((e, i) => ( {data?.map((e, i) => (
<Stack spacing={"xs"} key={i}> <Stack
spacing={"xs"}
key={i}
bg={MainColor.soft_darkblue}
p={"sm"}
>
<Grid> <Grid>
<Grid.Col span={5}> <Grid.Col span={5}>
<Stack justify="center" h={"100%"}> <Stack justify="center" h={"100%"} align="center">
<Text truncate fz={"sm"} fw={"bold"}> <Box w={100}>
{e ? e?.Author?.username : "Nama kontributor"} <Text
</Text> truncate
fz={"sm"}
fw={"bold"}
>
{e ? e?.Author?.username : "Nama kontributor"}
</Text>
</Box>
</Stack> </Stack>
</Grid.Col> </Grid.Col>
<Grid.Col span={5}> <Grid.Col span={5}>
<Center> <Center>
<Badge> <Badge>
@@ -109,7 +126,7 @@ export function AdminVoting_ComponentKontributorList({ dataHasil }: Props) {
</Center> </Center>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Divider /> {/* <Divider /> */}
</Stack> </Stack>
))} ))}
</Stack> </Stack>

10
src/app_modules/admin/vote/detail/detail_voting.tsx
View File

@@ -12,10 +12,11 @@ import { AdminVoting_ComponentDetailPublish } from "../component/comp_detail_pub
import { apiGetOneVotingById } from "../lib/api_fetch_admin_voting"; import { apiGetOneVotingById } from "../lib/api_fetch_admin_voting";
import { AdminVoting_ComponentDetailReview } from "../component/comp_detail_review"; import { AdminVoting_ComponentDetailReview } from "../component/comp_detail_review";
import { AdminVoting_ComponentDetailReject } from "../component/comp_detail_reject"; import { AdminVoting_ComponentDetailReject } from "../component/comp_detail_reject";
import { Admin_V3_ComponentSkeletonBreakpoint } from "../../_components_v3/comp_skeleton_breakpoint";
export function AdminVote_DetailVoting() { export function AdminVote_DetailVoting() {
const param = useParams<{ id: string }>(); const param = useParams<{ id: string }>();
const [data, setData] = useState<MODEL_VOTING | null>(); const [data, setData] = useState<MODEL_VOTING | null>(null);
useShallowEffect(() => { useShallowEffect(() => {
handleLoadData(); handleLoadData();
@@ -43,10 +44,9 @@ export function AdminVote_DetailVoting() {
<ComponentAdminGlobal_HeaderTamplate name="Detail voting" /> <ComponentAdminGlobal_HeaderTamplate name="Detail voting" />
<AdminGlobal_ComponentBackButton /> <AdminGlobal_ComponentBackButton />
{data === undefined && ( {data === undefined || !data && (
<SimpleGrid cols={2}> <Admin_V3_ComponentSkeletonBreakpoint skeletonRequest={2}/>
<CustomSkeleton height={500} />
</SimpleGrid>
)} )}
{data && data.Voting_Status.name === "Publish" ? ( {data && data.Voting_Status.name === "Publish" ? (