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

127
src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx
View File

@@ -1,21 +1,11 @@
'use client'
'use client';
import colors from '@/con/colors';
import {
Box,
Button,
Center,
Grid,
GridCol,
Image,
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 { useProxy } from 'valtio/utils';
import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
function VisiMisiPPIDList() {
@@ -25,56 +15,99 @@ function VisiMisiPPIDList() {
listVisiMisi.findById.load('1');
}, []);
if (listVisiMisi.findById.loading) {
return (
<Center py={40}>
<Skeleton radius="md" height={800} width="100%" />
</Center>
);
}
if (!listVisiMisi.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 visi misi PPID</Text>
</Stack>
</Center>
);
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack pos={"relative"} 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={3}>Preview Visi Misi PPID</Title>
<Title order={3} c={colors['blue-button']}>Preview Visi Misi PPID</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/visi-misi-ppid/edit')}>
<IconEdit size={16} />
</Button>
<Tooltip label="Edit Visi Misi PPID" withArrow>
<Button
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push('/admin/ppid/visi-misi-ppid/edit')}
>
Edit
</Button>
</Tooltip>
</GridCol>
</Grid>
<Box>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box pb={30}>
<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='' />
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
</Center>
<Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} fw={"bold"}>
</GridCol>
<GridCol span={12}>
<Text ta="center" fz={{ base: '1.2rem', md: '1.8rem' }} fw="bold" c={colors['blue-button']}>
MOTO PPID DESA DARMASABA
</Text>
<Text ta={"center"} fz={{ base: "h4", md: "h3" }} >
<Text ta="center" fz={{ base: '1rem', md: '1.2rem' }} c="dimmed" mt="sm">
MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
</Text>
</Box>
<Box px={{ base: 20, md: 50 }} pb={30}>
<Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
VISI PPID
</Text>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }} />
</Box>
<Box px={{ base: 20, md: 50 }}>
<Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
MISI PPID
</Text>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }} />
</Box>
</Paper>
</Stack>
</Box>
</GridCol>
</Grid>
<Divider my="xl" color={colors['blue-button']} />
<Box>
<Text fz={{ base: '1.5rem', md: '1.75rem' }} fw="bold" ta="center" mb="lg" c={colors['blue-button']}>
VISI PPID
</Text>
<Box
className="prose max-w-none"
dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }}
style={{
fontSize: '1.1rem',
lineHeight: 1.7,
textAlign: 'justify'
}}
/>
</Box>
<Divider my="xl" color={colors['blue-button']} />
<Box mt="xl">
<Text fz={{ base: '1.5rem', md: '1.75rem' }} fw="bold" ta="center" mb="lg" c={colors['blue-button']}>
MISI PPID
</Text>
<Box
className="prose max-w-none"
dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }}
style={{
fontSize: '1.1rem',
lineHeight: 1.7,
textAlign: 'justify'
}}
/>
</Box>
</Box>
</Paper>
</Stack>
</Paper>
);