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

Fix UI PPID:

Browse Source 
Visi Misi PPID, Dasar Hukum, Daftar Informasi Publik
This commit is contained in:
nico
2025-06-09 12:09:00 +08:00
parent 46748205fd
commit 41ae92774d
23 changed files with 1142 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,76 +1,25 @@
'use client'
import colors from '@/con/colors';
import {
Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title
Box,
Button,
Center,
Grid,
GridCol,
Image,
Paper,
Skeleton, Stack, Text,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import { useEffect, useState } from 'react';
import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
import VisiPPID from './visiPPID/visi-PPID';
import MisiPPID from './misiPPID/misi-PPID';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
function Page() {
return (
<Box>
<SimpleGrid cols={{ base: 1, md: 2 }}>
<VisiMisiPPIDCreate />
<VisiMisiPPIDList />
</SimpleGrid>
</Box>
);
}
function VisiMisiPPIDCreate() {
const visiMisi = useProxy(stateVisiMisiPPID);
const [draftVisi, setDraftVisi] = useState('');
const [draftMisi, setDraftMisi] = useState('');
useShallowEffect(() => {
if (!visiMisi.findById.data) {
visiMisi.findById.initialize();
}
}, []);
useEffect(() => {
if (visiMisi.findById.data) {
setDraftVisi(visiMisi.findById.data.visi ?? '');
setDraftMisi(visiMisi.findById.data.misi ?? '');
}
}, [visiMisi.findById.data]);
const submit = () => {
if (visiMisi.findById.data) {
// update nilai di state global hanya saat submit
visiMisi.findById.data.visi = draftVisi;
visiMisi.findById.data.misi = draftMisi;
visiMisi.update.save(visiMisi.findById.data);
}
};
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={'xs'}>
<Title order={3}>Visi Misi PPID</Title>
<VisiPPID value={draftVisi} onChange={setDraftVisi} />
<MisiPPID value={draftMisi} onChange={setDraftMisi} />
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={visiMisi.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
);
}
function VisiMisiPPIDList() {
const router = useRouter()
const listVisiMisi = useProxy(stateVisiMisiPPID);
useShallowEffect(() => {
listVisiMisi.findById.load('1');
@@ -79,36 +28,56 @@ function VisiMisiPPIDList() {
if (!listVisiMisi.findById.data) {
return (
<Stack>
{Array.from({ length: 10 }).map((_, k) => (
<Skeleton key={k} h={40} />
))}
<Skeleton radius={10} h={800} />
</Stack>
);
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={'xs'}>
<Title order={3}>List Visi Misi PPID</Title>
<Box>
<Text fw={'bold'}>Visi PPID</Text>
<Text
dangerouslySetInnerHTML={{
__html: listVisiMisi.findById.data.visi,
}}
></Text>
</Box>
<Box>
<Text fw={'bold'}>Misi PPID</Text>
<Text
dangerouslySetInnerHTML={{
__html: listVisiMisi.findById.data.misi,
}}
></Text>
<Stack pos={"relative"} gap={"22"}>
<Grid>
<GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>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>
</GridCol>
</Grid>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box pb={30}>
<Center>
<Image src={"/api/img/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
</Center>
<Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} fw={"bold"}>
MOTO PPID DESA DARMASABA
</Text>
<Text ta={"center"} fz={{ base: "h4", md: "h3" }} >
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>
</Stack>
</Paper>
);
}
export default Page;
export default VisiMisiPPIDList;