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

85
src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
'use client';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
import { Box, Button, Group, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import dynamic from 'next/dynamic';
import { useEffect, useState } from 'react';
@@ -41,45 +41,70 @@ function EditDasarHukum() {
router.push('/admin/ppid/dasar-hukum')
}
return (
<Box>
<Stack gap={'xs'}>
<Box>
<Button
variant={'subtle'}
onClick={() => router.back()}
>
<IconArrowBack color={colors['blue-button']} size={20} />
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Box>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
<Stack gap={'xs'}>
<Title order={3}>Edit Dasar Hukum PPID</Title>
<Text fw={"bold"}>Judul</Text>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Dasar Hukum PPID
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="xl">
<Box>
<Text fw="bold" fz="sm" mb={6}>
Judul
</Text>
<Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
<PPIDTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
<Text fw={"bold"}>Content</Text>
</Box>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Konten
</Text>
<Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
<PPIDTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={dasarHukumState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
</Box>
</Box>
<Group justify="flex-end" mt="md">
<Button
onClick={submit}
loading={dasarHukumState.update.loading}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}

90
src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
'use client';
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -14,38 +14,78 @@ function Page() {
listDasarHukum.findById.load('1')
}, [])
if (listDasarHukum.findById.loading) {
return (
<Center py={40}>
<Skeleton radius="md" height={800} width="100%" />
</Center>
);
}
if (!listDasarHukum.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
</Stack>
)
<Center py={60}>
<Stack align="center" gap="sm">
<Text fw={500} c="dimmed">Belum ada data dasar hukum PPID</Text>
</Stack>
</Center>
);
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"22"}>
<Grid>
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
<Stack gap="md">
<Grid align="center">
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Dasar Hukum PPID</Title>
<Title order={3} c={colors['blue-button']}>Preview Dasar Hukum PPID</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/dasar-hukum/edit')}>
<IconEdit size={16} />
</Button>
<Tooltip label="Edit Dasar Hukum" withArrow>
<Button
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push('/admin/ppid/dasar-hukum/edit')}
>
Edit
</Button>
</Tooltip>
</GridCol>
</Grid>
<Box>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box px={{ base: 0, md: 30 }}>
<Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }} />
</Box>
</Paper>
</Stack>
</Box>
<Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
<Box px={{ base: 'sm', md: 100 }}>
<Grid>
<GridCol span={12}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
</Center>
</GridCol>
<GridCol span={12}>
<Text
ta="center"
fz={{ base: '1.5rem', md: '2rem' }}
fw="bold"
c={colors['blue-button']}
dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }}
/>
</GridCol>
</Grid>
<Divider my="xl" color={colors['blue-button']} />
<Box
className="prose max-w-none"
dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }}
style={{
fontSize: '1.1rem',
lineHeight: 1.7,
textAlign: 'justify'
}}
/>
</Box>
</Paper>
</Stack>
</Paper>
)