Tambahan Di menu PPID

This commit is contained in:
2025-05-09 10:35:30 +08:00
parent 795c79dd5f
commit 8a34a122d0
47 changed files with 1788 additions and 381 deletions

View File

@@ -0,0 +1,24 @@
'use client'
import { Box, Text } from '@mantine/core';
import React from 'react';
import { useProxy } from 'valtio/utils';
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
import { PPIDEditor } from '../../_com/ppid_Editor';
function Biodata() {
const biodataState = useProxy(stateProfilePPID.profilePPID)
return (<Box>
<Text fw={"bold"}>Biodata</Text>
<PPIDEditor
showSubmit={false}
onChange={(val) => {
biodataState.create.form.biodata = val
}}
/>
</Box>
);
}
export default Biodata;

View File

@@ -1,11 +1,102 @@
import React from 'react';
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
import Biodata from './biodata/page';
import PengalamanOrganisasi from './pengalaman_organisasi/page';
import RiwayatKarir from './riwayat_karir/page';
import ProgramKerjaUnggulan from './program_kerja_unggulan/page';
import { useProxy } from 'valtio/utils';
import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
import { useShallowEffect } from '@mantine/hooks';
function Page() {
return (
<div>
profile-ppid
</div>
<Box>
<SimpleGrid cols={{ base: 1, md: 2 }}>
<ProfileCreate />
<ProfileList />
</SimpleGrid>
</Box>
);
}
function ProfileCreate() {
const allState = useProxy(stateProfilePPID)
const submit = () => {
if (
allState.profilePPID.create.form.name &&
allState.profilePPID.create.form.biodata &&
allState.profilePPID.create.form.riwayat &&
allState.profilePPID.create.form.pengalaman &&
allState.profilePPID.create.form.unggulan) {
allState.profilePPID.create.create()
}
}
return (
<Paper bg={colors['white-1']} p={'md'} radius={10}>
<Stack gap={"xs"}>
<Title order={3}>Profile PPID</Title>
<TextInput
label={<Text fw={"bold"}>Nama Perbekel</Text>}
placeholder="masukkan nama perbekel"
onChange={(val) => {
allState.profilePPID.create.form.name = val.currentTarget.value
}}
/>
<Biodata />
<RiwayatKarir />
<PengalamanOrganisasi />
<ProgramKerjaUnggulan />
<Group>
<Button bg={colors['blue-button']} onClick={submit}>Submit</Button>
</Group>
</Stack>
</Paper>
)
}
function ProfileList() {
const allList = useProxy(stateProfilePPID)
useShallowEffect(() => {
allList.profilePPID.findMany.load()
}, [])
if (!allList.profilePPID.findMany.data) return <Stack>
{Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
</Stack>
return (
<Paper bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={3}>List Profile PPID</Title>
{allList.profilePPID.findMany.data?.map((item) => (
<Box key={item.id}>
<Box>
<Text fw={"bold"}>Nama</Text>
<Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>
</Box>
<Box>
<Text fw={"bold"}>Biodata</Text>
<Text dangerouslySetInnerHTML={{ __html: item.biodata }}></Text>
</Box>
<Box>
<Text fw={"bold"}>Riwayat</Text>
<Text dangerouslySetInnerHTML={{ __html: item.riwayat }}></Text>
</Box>
<Box>
<Text fw={"bold"}>Pengalaman</Text>
<Text dangerouslySetInnerHTML={{ __html: item.pengalaman }}></Text>
</Box>
<Box>
<Text fw={"bold"}>Program Kerja Unggulan</Text>
<Text dangerouslySetInnerHTML={{ __html: item.unggulan }}></Text>
</Box>
</Box>
))}
</Stack>
</Paper>
)
}
export default Page;

View File

@@ -0,0 +1,22 @@
'use client'
import { Box, Text } from '@mantine/core';
import React from 'react';
import { useProxy } from 'valtio/utils';
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
import { PPIDEditor } from '../../_com/ppid_Editor';
function PengalamanOrganisasi() {
const pengalamanOrganisasiState = useProxy(stateProfilePPID.profilePPID)
return (<Box>
<Text fw={"bold"}>Pengalaman Organisasi</Text>
<PPIDEditor
showSubmit={false}
onChange={(val) => {
pengalamanOrganisasiState.create.form.pengalaman = val
}}
/>
</Box>
);
}
export default PengalamanOrganisasi;

View File

@@ -0,0 +1,22 @@
'use client'
import { Box, Text } from '@mantine/core';
import React from 'react';
import { useProxy } from 'valtio/utils';
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
import { PPIDEditor } from '../../_com/ppid_Editor';
function ProgramKerjaUnggulan() {
const programKerjaUnggulanState = useProxy(stateProfilePPID.profilePPID)
return (<Box>
<Text fw={"bold"}>Program Kerja Unggulan</Text>
<PPIDEditor
showSubmit={false}
onChange={(val) => {
programKerjaUnggulanState.create.form.unggulan = val
}}
/>
</Box>
);
}
export default ProgramKerjaUnggulan;

View File

@@ -0,0 +1,30 @@
'use client';
import { Box, Text } from '@mantine/core';
import React from 'react';
import { useProxy } from 'valtio/utils';
import dynamic from 'next/dynamic';
import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
// ini penting
const PPIDEditor = dynamic(() => import('../../_com/ppid_Editor').then(mod => mod.PPIDEditor), {
ssr: false, // disable server side rendering
});
function RiwayatKarir() {
const biodataState = useProxy(stateProfilePPID.profilePPID);
return (
<Box>
<Text fw={"bold"}>Riwayat Karir</Text>
<PPIDEditor
showSubmit={false}
onChange={(val) => {
biodataState.create.form.riwayat = val;
}}
/>
</Box>
);
}
export default RiwayatKarir;