Nico 21 Mei :

Yang udah dikerjakan:
Tampilan UI Menu DesaTampilan UI Menu Kesehatan

Yang Akan dikerjakan:
Tampilan UI Keamanan, dan Menu Selanjutnya
Memperbaiki eror di bagian inputan dimana saat nginput data outputnya ikut ke ganti seharusnya di submit dulu

src/app/admin/(dashboard)/ppid/dasar-hukum/create/create.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { Box, Stack, Text } from '@mantine/core';
+import dynamic from 'next/dynamic';
+
+const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
+  ssr: false,
+});
+
+function CreateDasarHukum({
+  valueJudul,
+  valueContent,
+  onJudulChange,
+  onContentChange,
+  error
+} : {
+  valueJudul: string;
+  valueContent: string;
+  onJudulChange: (val: string) => void;
+  onContentChange: (val: string) => void;
+  error?: string;
+}) {
+  
+  return (
+    <Box>
+     <Stack gap={"xs"}>
+     <Text fw={"bold"}>Judul</Text>
+      <PPIDTextEditor
+        showSubmit={false}
+        onChange={onJudulChange}
+        initialContent={valueJudul}
+      />
+      <Text fw={"bold"}>Content</Text>
+      <PPIDTextEditor
+        showSubmit={false}
+        onChange={onContentChange}
+        initialContent={valueContent}
+      />
+      {error && <Text c="red" size="sm">{error}</Text>}
+     </Stack>
+    </Box>
+  );
+}
+
+export default CreateDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/create/page.tsx

@@ -1,64 +0,0 @@
-'use client'
-import { Box, Button, Group, Stack, Text } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
-import dynamic from 'next/dynamic';
-import colors from '@/con/colors';
-import { useShallowEffect } from '@mantine/hooks';
-
-const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
-  ssr: false,
-});
-function CreateDasarHukum() {
-  const dasarHukumState = useProxy(stateDasarHukumPPID)
-  useShallowEffect(() => {
-    if (!dasarHukumState.findById.data) {
-      dasarHukumState.findById.load(""); // biar masuk ke `findFirst` route kamu
-    }
-  }, []);
-
-  const submit = () => {
-    if (dasarHukumState.findById.data?.judul && dasarHukumState.findById.data?.content) {
-      dasarHukumState.update.save(dasarHukumState.findById.data)
-    }
-  }
-  return (
-    <Box>
-     <Stack gap={"xs"}>
-     <Text fw={"bold"}>Judul</Text>
-      <PPIDTextEditor
-        showSubmit={false}
-        key={`judul-${dasarHukumState.findById.data?.id ?? 'new'}`}
-        onChange={(val) => {
-          if (dasarHukumState.findById.data) {
-            dasarHukumState.findById.data.judul = val
-          }
-        }}
-        initialContent={dasarHukumState.findById.data?.judul ?? ''}
-      />
-      <Text fw={"bold"}>Content</Text>
-      <PPIDTextEditor
-        showSubmit={false}
-        key={`content-${dasarHukumState.findById.data?.id ?? 'baru'}`}
-        onChange={(val) => {
-          if (dasarHukumState.findById.data) {
-            dasarHukumState.findById.data.content = val
-          }
-        }}
-        initialContent={dasarHukumState.findById.data?.content ?? ''}
-      />
-      <Group>
-        <Button
-          bg={colors['blue-button']}
-          onClick={submit}
-          loading={dasarHukumState.update.loading}
-        >
-          Submit
-        </Button>
-      </Group>
-     </Stack>
-    </Box>
-  );
-}
-
-export default CreateDasarHukum;

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

@@ -1,21 +1,59 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import CreateDasarHukum from './create/page';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import CreateDasarHukum from './create/create';
 import ListDataDasarHukum from './listData/page';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import stateDasarHukumPPID from '../../_state/ppid/dasar_hukum/dasarHukum';
+import { useEffect, useState } from 'react';
 
 function Page() {
+  const dasarHukumState = useProxy(stateDasarHukumPPID)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!dasarHukumState.findById.data) {
+      dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (dasarHukumState.findById.data) {
+      setJudul(dasarHukumState.findById.data.judul ?? '')
+      setContent(dasarHukumState.findById.data.content ?? '')
+    }
+  }, [dasarHukumState.findById.data])
+
+  const submit = () => {
+    if (dasarHukumState.findById.data) {
+      dasarHukumState.findById.data.judul = judul;
+      dasarHukumState.findById.data.content = content;
+      dasarHukumState.update.save(dasarHukumState.findById.data)
+    }
+  }
 
   return (
     <Stack gap={"xs"}>
       <SimpleGrid cols={{ base: 1, md: 2 }}>
         <Box>
           <Paper bg={colors['white-1']} p={'md'} radius={10}>
-          <Title order={3}>Dasar Hukum PPID</Title>
-          <CreateDasarHukum/>
+            <Title order={3}>Dasar Hukum PPID</Title>
+            <CreateDasarHukum onJudulChange={setJudul} onContentChange={setContent} valueJudul={judul} valueContent={content} />
+            <Group>
+              <Button
+                mt={10}
+                bg={colors['blue-button']}
+                onClick={submit}
+                loading={dasarHukumState.update.loading}
+              >
+                Submit
+              </Button>
+            </Group>
           </Paper>
         </Box>
-        <ListDataDasarHukum/>
+        <ListDataDasarHukum />
       </SimpleGrid>
     </Stack>
   )