wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Fix UI Admin Menu Landing Page & PPID

Browse Source
This commit is contained in:
nico
2025-09-01 16:14:28 +08:00
parent 22ec8d942d
commit 7ae83788b4
74 changed files with 4312 additions and 2798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
View File

@@ -1,9 +1,10 @@
'use client'
import colors from '@/con/colors';
import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi';
import colors from '@/con/colors'
import { Box, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconInfoCircle, IconMail, IconMessage, IconPhone, IconUser } from '@tabler/icons-react'
import { useProxy } from 'valtio/utils'
import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
function Page() {
const listState = useProxy(statePermohonanKeberatan)
@@ -11,38 +12,90 @@ function Page() {
listState.findMany.load()
}, [])
if (!listState.findMany.data)
return <Stack pos={"relative"} bg={colors.Bg}>
<Skeleton radius={5} h={200} />
</Stack>
if (!listState.findMany.data) {
return (
<Stack pos="relative" bg={colors.Bg} p="lg" align="center">
<Skeleton radius="md" h={40} w="60%" />
<Skeleton radius="md" h={200} w="100%" />
</Stack>
)
}
const data = listState.findMany.data
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={3}>Permohonan Keberatan Informasi Publik</Title>
<Table striped withRowBorders withColumnBorders withTableBorder>
<TableThead>
<TableTr>
<TableTh>No</TableTh>
<TableTh>Nama</TableTh>
<TableTh>Email</TableTh>
<TableTh>Telepon</TableTh>
<TableTh>Alasan</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{listState.findMany.data?.map((item, index) => (
<TableTr key={item.id}>
<TableTd>{index + 1}</TableTd>
<TableTd>{item.name}</TableTd>
<TableTd>{item.email}</TableTd>
<TableTd>{item.notelp}</TableTd>
<TableTd dangerouslySetInnerHTML={{ __html: item.alasan }} />
</TableTr>
))}
</TableTbody>
</Table>
<Box py="md">
<Paper bg={colors['white-1']} p="lg" radius="xl" shadow="sm" withBorder>
<Stack gap="md">
<Group justify="space-between">
<Title order={2} c="dark">Daftar Permohonan Keberatan Informasi Publik</Title>
<Tooltip label="Data permohonan keberatan atas informasi yang diajukan masyarakat" position="bottom">
<IconInfoCircle size={20} stroke={1.5} />
</Tooltip>
</Group>
{data.length === 0 ? (
<Stack align="center" py="xl">
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
<Text fw={500} c="dimmed">Belum ada permohonan keberatan yang tercatat</Text>
</Stack>
) : (
<Box style={{ overflowX: 'auto' }}>
<Table
highlightOnHover
withRowBorders
withColumnBorders
withTableBorder
striped
stickyHeader
>
<TableThead>
<TableTr>
<TableTh>No</TableTh>
<TableTh><Group gap={5}><IconUser size={16} /> Nama</Group></TableTh>
<TableTh><Group gap={5}><IconMail size={16} /> Email</Group></TableTh>
<TableTh><Group gap={5}><IconPhone size={16} /> Telepon</Group></TableTh>
<TableTh><Group gap={5}><IconMessage size={16} /> Alasan Keberatan</Group></TableTh>
</TableTr>
</TableThead>
<TableTbody>
{data.map((item, index) => (
<TableTr key={item.id}>
<TableTd>{index + 1}</TableTd>
<TableTd>
<Tooltip label={item.name}>
<Text lineClamp={1} fw={500}>{item.name}</Text>
</Tooltip>
</TableTd>
<TableTd>
<Text size="sm">{item.email || '-'}</Text>
</TableTd>
<TableTd>
<Text>{item.notelp || '-'}</Text>
</TableTd>
<TableTd>
<Tooltip label={item.alasan?.replace(/<[^>]*>?/gm, '')}>
<div
style={{
maxWidth: '300px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
dangerouslySetInnerHTML={{
__html: item.alasan ?
item.alasan.replace(/<[^>]*>?/gm, '').substring(0, 50) + '...' :
'-'
}}
/>
</Tooltip>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
)}
</Stack>
</Paper>
</Box>