Profile PPID, Visi Misi, dan Dasar Hukum

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

@@ -0,0 +1,64 @@
+'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/listData/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
+import { useShallowEffect } from '@mantine/hooks';
+import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import colors from '@/con/colors';
+
+function ListDataDasarHukum() {
+  const dataList = useProxy(stateDasarHukumPPID)
+  useShallowEffect(() => {
+    dataList.findById.load("")
+  }, [])
+
+  if(!dataList.findById.data) return <Stack>
+    {Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
+const dataArray = Array.isArray(dataList.findById.data)
+  ? dataList.findById.data
+  : [dataList.findById.data];
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+    <Stack gap={"xs"}>
+    <Title order={3}>List Dasar Hukum PPID</Title>
+    {dataArray.map((item) => (
+      <Box key={item.id}>
+        <Text fw={"bold"}>Judul</Text>
+        <Text dangerouslySetInnerHTML={{ __html: item.judul }}></Text>
+        <Text fw={"bold"}>Content</Text>
+        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+      </Box>
+    ))}
+    </Stack>
+    </Paper>
+  );
+}
+
+export default ListDataDasarHukum;

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

@@ -1,11 +1,24 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import CreateDasarHukum from './create/page';
+import ListDataDasarHukum from './listData/page';
 
 function Page() {
+
   return (
-    <div>
-      dasar-hukum
-    </div>
-  );
+    <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/>
+          </Paper>
+        </Box>
+        <ListDataDasarHukum/>
+      </SimpleGrid>
+    </Stack>
+  )
 }
 
 export default Page;