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)/keamanan/_com/keamananEditor.tsx

@@ -0,0 +1,93 @@
+'use client'
+import colors from '@/con/colors';
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+const content =
+  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+
+export function KeamananEditor({showSubmit = true} : {
+  showSubmit: boolean
+}) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+        >
+          Submit
+        </Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/keamanan/_com/keamananEdtorText.tsx

@@ -0,0 +1,95 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+
+function KeamananEditorText({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}
+
+export default KeamananEditorText;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -1,10 +1,35 @@
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import CreateKeamananLingkungan from './ui/tambah_keamanan_lingkungan/page';
+import ListKeamananLingkungan from './ui/list_keamanan_lingkungan/page';
+
 
 function Page() {
   return (
-    <div>
+    <Box>
-      keamanan-lingkungan-pecalang-patwal
+     <Stack gap={'xs'}>
-    </div>
+      <Title order={3}>Keamanan Lingkungan </Title>
+      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
+        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
+          <TabsTab value="create" >
+            Tambah Keamanan Lingkungan 
+          </TabsTab>
+          <TabsTab value="list" >
+            List Keamanan Lingkungan 
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="create">
+          <CreateKeamananLingkungan/>
+        </TabsPanel>
+
+        <TabsPanel value="list">
+          <ListKeamananLingkungan/>
+        </TabsPanel>
+      </Tabs>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/list_keamanan_lingkungan/page.tsx

@@ -0,0 +1,33 @@
+import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import React from 'react';
+
+function ListKeamananLingkungan() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'} radius={10}>
+        <Stack gap={'xs'}>
+          <Title order={3}>List Keamanan Lingkungan</Title>
+          <Box>
+            <Table striped withTableBorder withColumnBorders withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Nama Keamanan Lingkungan</TableTh>
+                  <TableTh>Deskripsi Keamanan Lingkungan</TableTh>
+                  <TableTh>Aksi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/ui/tambah_keamanan_lingkungan/page.tsx

@@ -0,0 +1,46 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+import { KeamananEditor } from '../../../_com/keamananEditor';
+
+
+function KeamananLingkungan() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Tambah Keamanan Lingkungan</Title>
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+                  <IconImageInPicture size={50} />
+                </Box>
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
+                  placeholder='Masukkan nama keamanan lingkungan'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi Keamanan Lingkungan</Text>
+                  <KeamananEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Group>
+                  <Button bg={colors['blue-button']}>Submit</Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default KeamananLingkungan;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -1,10 +1,35 @@
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import CreatePolsekTerdekat from './ui/tambah_polsek_terdekat/page';
+import ListPolsekTerdekat from './ui/list_polsek_terdekat/page';
+
 
 function Page() {
   return (
-    <div>
+    <Box>
-      polsek-terdekat
+     <Stack gap={'xs'}>
-    </div>
+      <Title order={3}>Polsek Terdekat</Title>
+      <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
+        <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
+          <TabsTab value="create" >
+            Tambah Polsek Terdekat
+          </TabsTab>
+          <TabsTab value="list" >
+            List Polsek Terdekat
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="create">
+          <CreatePolsekTerdekat/>
+        </TabsPanel>
+
+        <TabsPanel value="list">
+          <ListPolsekTerdekat/>
+        </TabsPanel>
+      </Tabs>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/list_polsek_terdekat/page.tsx

@@ -0,0 +1,36 @@
+import { Box, Paper, Stack, Table, TableTbody, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import React from 'react';
+
+function ListPolsekTerdekat() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'} radius={10}>
+        <Stack gap={'xs'}>
+          <Title order={3}>List Polsek Terdekat</Title>
+          <Box>
+            <Table striped withTableBorder withColumnBorders withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Polsek Terdekat</TableTh>
+                  <TableTh>Jarak Polsek Terdekat</TableTh>
+                  <TableTh>Alamat Polsek Terdekat</TableTh>
+                  <TableTh>Nomor Telepon Polsek Terdekat</TableTh>
+                  <TableTh>Jam Aktif</TableTh>
+                  <TableTh>Deskripsi Polsek Terdekat</TableTh>
+                  <TableTh>Aksi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListPolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/ui/tambah_polsek_terdekat/page.tsx

@@ -0,0 +1,56 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import { KeamananEditor } from '../../../_com/keamananEditor';
+
+
+function CreatePolsekTerdekat() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Tambah Polsek Terdekat</Title>
+                <TextInput
+                label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
+                placeholder='Masukkan nama polsek terdekat'
+                />
+                <TextInput
+                label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
+                placeholder='Masukkan jarak polsek terdekat'
+                />
+                <TextInput
+                label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
+                placeholder='Masukkan alamat polsek terdekat'
+                />
+                <TextInput
+                label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
+                placeholder='Masukkan nomor telepon polsek terdekat'
+                />
+                <TextInput
+                label={<Text fw={"bold"} fz={"sm"}>Jam Aktif</Text>}
+                placeholder='Masukkan jam aktif polsek terdekat'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi Polsek Terdekat</Text>
+                  <KeamananEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Group>
+                  <Button bg={colors['blue-button']}>Submit</Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreatePolsekTerdekat;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -9,14 +9,14 @@ function Page() {
   return (
     <Box>
      <Stack gap={'xs'}>
-      <Title order={3}>Wabah Penyakit</Title>
+      <Title order={3}>Info Wabah/Penyakit</Title>
       <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
         <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
           <TabsTab value="create" >
-            Tambah Wabah Penyakit
+            Tambah Info Wabah/Penyakit
           </TabsTab>
           <TabsTab value="list" >
-            List Wabah Penyakit
+            List Info Wabah/Penyakit
           </TabsTab>
         </TabsList>
 

src/app/admin/(dashboard)/ppid/_com/PPIDTextEditor.tsx

@@ -8,6 +8,7 @@ import TextAlign from '@tiptap/extension-text-align';
 import Underline from '@tiptap/extension-underline';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { useEffect } from 'react';
 
 
 export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
@@ -32,6 +33,12 @@ export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialC
     }
   });
 
+  useEffect(() => {
+    if (editor && initialContent !== editor.getHTML()) {
+      editor.commands.setContent(initialContent || '<p></p>');
+    }
+  }, [initialContent, editor]);
+
   return (
     <Stack>
       <RichTextEditor editor={editor}>

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 { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import CreateDasarHukum from './create/page';
+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>
+            <Title order={3}>Dasar Hukum PPID</Title>
-          <CreateDasarHukum/>
+            <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>
   )

src/app/admin/(dashboard)/ppid/visi-misi-ppid/misiPPID/misi-PPID.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
+
+function MisiPPID({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  return (
+    <Box>
+      <Text fw={'bold'}>Misi PPID</Text>
+      <PPIDTextEditor
+        showSubmit={false}
+        initialContent={value}
+        onChange={onChange}
+      />
+      {error && <Text c="red" size="sm">{error}</Text>}
+    </Box>
+  );
+}
+
+export default MisiPPID;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/misiPPID/page.tsx

@@ -1,26 +0,0 @@
-'use client'
-import { Box, Text } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
-
-function MisiPPID() {
-  const misiState = useProxy(stateVisiMisiPPID)
-  return (
-    <Box>
-      <Text fw={"bold"}>Misi PPID</Text>
-      <PPIDTextEditor
-      key={misiState.findById.data?.id ?? 'new'}
-      showSubmit={false}
-      onChange={(val) => {
-        if(misiState.findById.data){
-          misiState.findById.data.misi = val
-        }
-      }}
-      initialContent={misiState.findById.data?.misi ?? ''}
-      />
-    </Box>
-  );
-}
-
-export default MisiPPID;

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

@@ -1,11 +1,16 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import {
+  Box, Button, Group, Paper, SimpleGrid, 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 MisiPPID from './misiPPID/page';
+import VisiPPID from './visiPPID/visi-PPID';
-import VisiPPID from './visiPPID/page';
+import MisiPPID from './misiPPID/misi-PPID';
+
+
 
 function Page() {
   return (
@@ -19,26 +24,38 @@ function Page() {
 }
 
 function VisiMisiPPIDCreate() {
-  const visiMisi = useProxy(stateVisiMisiPPID)
+  const visiMisi = useProxy(stateVisiMisiPPID);
+  const [draftVisi, setDraftVisi] = useState('');
+  const [draftMisi, setDraftMisi] = useState('');
 
   useShallowEffect(() => {
-    if(!visiMisi.findById.data){
+    if (!visiMisi.findById.data) {
-      visiMisi.findById.initialize()
+      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?.misi && visiMisi.findById.data?.visi){
+    if (visiMisi.findById.data) {
-      visiMisi.update.save(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"}>
+      <Stack gap={'xs'}>
         <Title order={3}>Visi Misi PPID</Title>
-        <VisiPPID />
+        <VisiPPID value={draftVisi} onChange={setDraftVisi} />
-        <MisiPPID />
+        <MisiPPID value={draftMisi} onChange={setDraftMisi} />
         <Group>
           <Button
             bg={colors['blue-button']}
@@ -50,34 +67,48 @@ function VisiMisiPPIDCreate() {
         </Group>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 function VisiMisiPPIDList() {
-  const listVisiMisi = useProxy(stateVisiMisiPPID)
+  const listVisiMisi = useProxy(stateVisiMisiPPID);
   useShallowEffect(() => {
-    listVisiMisi.findById.load("1")
+    listVisiMisi.findById.load('1');
-  }, [])
+  }, []);
 
-  if(!listVisiMisi.findById.data) return <Stack>
+  if (!listVisiMisi.findById.data) {
-    {Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
+    return (
-  </Stack>
+      <Stack>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
+      </Stack>
+    );
+  }
 
   return (
     <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"xs"}>
+      <Stack gap={'xs'}>
         <Title order={3}>List Visi Misi PPID</Title>
         <Box>
-          <Text fw={"bold"}>Visi PPID</Text>
+          <Text fw={'bold'}>Visi PPID</Text>
-          <Text dangerouslySetInnerHTML={{__html: listVisiMisi.findById.data?.visi}}></Text>
+          <Text
+            dangerouslySetInnerHTML={{
+              __html: listVisiMisi.findById.data.visi,
+            }}
+          ></Text>
         </Box>
         <Box>
-          <Text fw={"bold"}>Misi PPID</Text>
+          <Text fw={'bold'}>Misi PPID</Text>
-          <Text dangerouslySetInnerHTML={{__html: listVisiMisi.findById.data?.misi}}></Text>
+          <Text
+            dangerouslySetInnerHTML={{
+              __html: listVisiMisi.findById.data.misi,
+            }}
+          ></Text>
         </Box>
       </Stack>
     </Paper>
-  )
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/visiPPID/page.tsx

@@ -1,26 +0,0 @@
-'use client'
-import { Box, Text } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
-
-function VisiPPID() {
-  const visiState = useProxy(stateVisiMisiPPID)
-  return (
-    <Box>
-      <Text fw={"bold"}>Visi PPID</Text>
-      <PPIDTextEditor
-      key={visiState.findById.data?.id ?? 'new'}
-      showSubmit={false}
-      onChange={(val) => {
-        if(visiState.findById.data){
-          visiState.findById.data.visi = val
-        }
-      }}
-      initialContent={visiState.findById.data?.visi ?? ''}
-      />
-    </Box>
-  );
-}
-
-export default VisiPPID;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/visiPPID/visi-PPID.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
+
+function VisiPPID({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  return (
+    <Box>
+      <Text fw={'bold'}>Visi PPID</Text>
+      <PPIDTextEditor
+        showSubmit={false}
+        initialContent={value}
+        onChange={onChange}
+      />
+      {error && <Text c="red" size="sm">{error}</Text>}
+    </Box>
+  );
+}
+
+export default VisiPPID;