Menu Desa, Sub Menu Yang Tersisa Tinga Tinggal Profile Aja

src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/edit/page.tsx

@@ -0,0 +1,103 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditPelayananPendudukNonPermanent() {
+  const router = useRouter();
+  const params = useParams()
+  const statePendudukNonPermanent = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)
+  const [formData, setFormData] = useState({
+    name: statePendudukNonPermanent.findById.data?.name || '',
+    deskripsi: statePendudukNonPermanent.findById.data?.deskripsi || '',
+  })
+
+  useEffect(() => {
+    const loadPelayananPerizinan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await statePendudukNonPermanent.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pelayanan perizinan berusaha:", error);
+        toast.error("Gagal memuat data pelayanan perizinan berusaha");
+      }
+    };
+    loadPelayananPerizinan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    if (statePendudukNonPermanent.findById.data) {
+      statePendudukNonPermanent.findById.data.name = formData.name;
+      statePendudukNonPermanent.findById.data.deskripsi = formData.deskripsi;
+      statePendudukNonPermanent.update.update(statePendudukNonPermanent.findById.data)
+    }
+    router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Pelayanan Penduduk Non Permanent</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <TextInput
+                value={formData.name}
+                onChange={(val) => {
+                  setFormData({
+                    ...formData,
+                    name: val.target.value,
+                  })
+                }}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => {
+                  setFormData({
+                    ...formData,
+                    deskripsi: val,
+                  })
+                }}
+              />
+              
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  loading={statePendudukNonPermanent.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditPelayananPendudukNonPermanent;

src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/page.tsx

@@ -1,40 +1,48 @@
-import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateLayananDesa from '../../../_state/desa/layananDesa';
 
 function SuratKeterangan() {
+  const router = useRouter()
+  const pelayananPendudukNonPermanen = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)
+
+  useShallowEffect(() => {
+    pelayananPendudukNonPermanen.findById.load('1')
+  }, [])
+
+  if (!pelayananPendudukNonPermanen.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
-          title='List Pelayanan Penduduk Non-Permanent'
-          href='/admin/desa/layanan/pelayanan_penduduk_non_permanent/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>Pelayanan Penduduk Non-Permanent</TableTd>
-              <TableTd>Deskripsi Pelayanan Penduduk Non-Permanent</TableTd>
-              <TableTd>
-                <Text>
-                  <Button>
-                    <IconDeviceImac size={20} />
+        <Paper bg={colors['BG-trans']} p={'md'}>
+          <Box py={15}>
+            <Stack gap={"xs"}>
+              <Grid>
+                <GridCol span={{ base: 12, md: 11 }}>
+                  <Text fz={"h4"} fw={"bold"}>Preview Pelayanan Perizinan Berusaha</Text>
+                </GridCol>
+                <GridCol span={{ base: 12, md: 1 }}>
+                  <Button bg={colors['blue-button']} onClick={() => router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent/edit')}>
+                    <IconEdit size={16} />
                   </Button>
-                </Text>
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>
+                </GridCol>
+              </Grid>
+            </Stack>
+          </Box>
+          <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>{pelayananPendudukNonPermanen.findById.data.name}</Text>
+          <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }} dangerouslySetInnerHTML={{ __html: pelayananPendudukNonPermanen.findById.data.deskripsi }} />
+        </Paper>
       </Paper>
     </Box>
   );