98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
'use client'
|
|
import colors from '@/con/colors'
|
|
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core'
|
|
import { useShallowEffect } from '@mantine/hooks'
|
|
import { IconDeviceImacCog, IconInfoCircle, IconMail, IconPhone, IconUser } from '@tabler/icons-react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useProxy } from 'valtio/utils'
|
|
import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
|
|
|
|
function Page() {
|
|
const listState = useProxy(statePermohonanKeberatan)
|
|
const router = useRouter()
|
|
useShallowEffect(() => {
|
|
listState.findMany.load()
|
|
}, [])
|
|
|
|
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="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>
|
|
<IconInfoCircle size={20} stroke={1.5} />
|
|
</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}><IconInfoCircle size={16} /> Detail</Group></TableTh>
|
|
</TableTr>
|
|
</TableThead>
|
|
<TableTbody>
|
|
{data.map((item, index) => (
|
|
<TableTr key={item.id}>
|
|
<TableTd>{index + 1}</TableTd>
|
|
<TableTd>
|
|
<Text lineClamp={1} fw={500}>{item.name}</Text>
|
|
</TableTd>
|
|
<TableTd>
|
|
<Text size="sm">{item.email || '-'}</Text>
|
|
</TableTd>
|
|
<TableTd>
|
|
<Text>{item.notelp || '-'}</Text>
|
|
</TableTd>
|
|
<TableTd>
|
|
<Button
|
|
size="xs"
|
|
radius="md"
|
|
variant="light"
|
|
color="blue"
|
|
leftSection={<IconDeviceImacCog size={16} />}
|
|
onClick={() => router.push(`/admin/ppid/permohonan-keberatan-informasi-publik/${item.id}`)}
|
|
>
|
|
Detail
|
|
</Button>
|
|
</TableTd>
|
|
</TableTr>
|
|
))}
|
|
</TableTbody>
|
|
</Table>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|
|
export default Page;
|