UI Admin Menu Desa Sub Menu Profile

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

@@ -10,7 +10,7 @@ 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>';
+  '<p>Dokumen yang berisi kebijakan dan regulasi desa</p>';
 
 export function PPIDEditor({ onSubmit, onChange, showSubmit = true }: { 
   onSubmit?: (val: string) => void, 

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,11 +1,10 @@
 'use client'
+import colors from '@/con/colors';
 import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import stateDaftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
-import { PPIDEditor } from '../_com/ppid_Editor';
-import colors from '@/con/colors';
-import { useShallowEffect } from '@mantine/hooks';
+import { PPIDTextEditor } from '../_com/PPIDTextEditor';
 
 function Page() {
   const daftarInformasi = useProxy(stateDaftarInformasiPublik.daftarInformasi)
@@ -30,7 +29,7 @@ function Page() {
                   daftarInformasi.create.form.jenisInformasi = val.target.value
                 }}
               />
-              <PPIDEditor
+              <PPIDTextEditor
                 showSubmit={false}
                 onChange={(val) => {
                   daftarInformasi.create.form.deskripsi = val
@@ -68,46 +67,50 @@ function ListDaftarInformasi() {
   if (!listData.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 fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
-      <Table
-        suppressHydrationWarning
-        striped
-        highlightOnHover
-        withTableBorder
-        withColumnBorders
-        bg={colors['white-1']}
-      >
-        <TableThead>
-          <TableTr>
-            <TableTh>
-              No
-            </TableTh>
-            <TableTh>
-              Jenis Informasi
-            </TableTh>
-            <TableTh>
-              Deskripsi
-            </TableTh>
-            <TableTh>
-              Tanggal Publikasi
-            </TableTh>
-          </TableTr>
-        </TableThead>
-        <TableTbody>
-          {listData.findMany.data?.map((item) => (
-            <TableTr key={item.id}>
-              <TableTd>{item.nomor}</TableTd>
-              <TableTd>{item.jenisInformasi}</TableTd>
-              <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-              <TableTd>{item.tanggal}</TableTd>
-            </TableTr>
-          ))}
-        </TableTbody>
-      </Table>
-    </Stack>
-  </Paper>
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
+          <Table
+            suppressHydrationWarning
+            striped
+            highlightOnHover
+            withTableBorder
+            withColumnBorders
+            bg={colors['white-1']}
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh>
+                  No
+                </TableTh>
+                <TableTh>
+                  Jenis Informasi
+                </TableTh>
+                <TableTh>
+                  Deskripsi
+                </TableTh>
+                <TableTh>
+                  Tanggal Publikasi
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {listData.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.nomor}</TableTd>
+                  <TableTd>{item.jenisInformasi}</TableTd>
+                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                  <TableTd>{item.tanggal}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Stack>
+      </Paper>
+    </Box>
+  )
 }
 
 export default Page;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/page.tsx

@@ -1,4 +1,4 @@
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
 import colors from '@/con/colors';
 import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan_masyarakat/page';
@@ -8,9 +8,10 @@ import GrafikBerdasarakanUmur from './_ui/grafik_berdasarkan_umur/page';
 
 function Page() {
   return (
-    <Stack>
-      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
-        <TabsList>
+    <Stack >
+      <Title order={3}>Indeks Kepuasan Masyarakat (IKM) Desa Darmasaba</Title>
+      <Tabs  color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
           <TabsTab value="Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik">
             Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
           </TabsTab>

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/jenisInformasi.tsx

@@ -1,41 +0,0 @@
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-import { useShallowEffect } from '@mantine/hooks';
-import { Group, Select, Skeleton } from '@mantine/core';
-
-function JenisInformasi({ onChange }: {
-  onChange: (value: Prisma.JenisInformasiDimintaGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const jenisInformasiState = useProxy(statePermohonanInformasi.jenisInformasiDiminta)
-  useShallowEffect(() => {
-    jenisInformasiState.findMany.load()
-  }, [])
-
-  if (!jenisInformasiState.findMany.data) return <Skeleton h={40} />
-  return (
-    <Group>
-      <Select
-        placeholder='pilih jenis informasi'
-        label={'select jenis informasi'}
-        data={jenisInformasiState.findMany.data.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))}
-        onChange={(v) => {
-          const data = jenisInformasiState.findMany.data?.find((item) => item.id === v)
-          if (!data) return
-          onChange(data)
-        }}
-      />
-    </Group>
-  );
-}
-
-export default JenisInformasi;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/memperolehInformasi.tsx

@@ -1,38 +0,0 @@
-import { Group, Select } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-
-function MemperolehInformasi({ onChange }: {
-  onChange: (value: Prisma.CaraMemperolehInformasiGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const memperolehInformasiState = useProxy(statePermohonanInformasi.caraMemperolehInformasi)
-  
-  useShallowEffect(() => {
-    memperolehInformasiState.findMany.load()
-  }, [])
-  return (
-    <Group>
-      <Select
-        placeholder='pilih katagori'
-        label={"select katagori"}
-        data={memperolehInformasiState.findMany.data?.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))} onChange={(v) => {
-          const data = memperolehInformasiState.findMany.data?.find((item) => item.id === v)
-          if (!data) return
-          onChange(data)
-        }} />
-    </Group>
-  );
-}
-
-export default MemperolehInformasi;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/memperolehSalinan.tsx

@@ -1,45 +0,0 @@
-import { Group, Select, Skeleton } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-
-function MemperolehSalinan({ onChange }: {
-  onChange: (value: Prisma.CaraMemperolehSalinanInformasiGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const memperolehSalinanInformasiState = useProxy(statePermohonanInformasi.caraMemperolehSalinanInformasi)
-  useShallowEffect(() => {
-    memperolehSalinanInformasiState.findMany.load()
-  }, [])
-
-  if (!memperolehSalinanInformasiState.findMany.data) return <Skeleton h={40} />
-  return (
-    <Group>
-      <Select
-        placeholder='pilih salinan informasi'
-        label={'select salinan informasi'}
-        data={memperolehSalinanInformasiState.findMany.data.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))}
-        onChange={(v) => {
-          if (!v) return
-          const selectedItem = memperolehSalinanInformasiState.findMany.data?.find(item => item.id === v)
-          if (selectedItem) {
-            onChange({
-              id: selectedItem.id,
-              name: selectedItem.name
-            })
-          }
-        }}
-      />
-    </Group>
-  );
-}
-export default MemperolehSalinan;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -1,115 +1,57 @@
 'use client'
-import { Box, Button, Group, Paper, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-import JenisInformasi from './jenisInformasi';
-import MemperolehInformasi from './memperolehInformasi';
-import MemperolehSalinan from './memperolehSalinan';
 import colors from '@/con/colors';
+import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
 
 function Page() {
+  const permohonanInformasiPublikState = useProxy(statepermohonanInformasiPublikForm)
+  useShallowEffect(() => {
+    permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
+  }, [])
+  if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
   return (
-    <Box>
-      <Stack>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <PermohonanInformasiPublikCreate />
-        </SimpleGrid>
-      </Stack>
+    <Box py={5}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Permohonan Informasi Publik</Title>
+          <Box p={"xl"}>
+            <Table striped withRowBorders withColumnBorders withTableBorder>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>NIK</TableTh>
+                  <TableTh>Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh>Cara Memperoleh Informasi</TableTh>
+                  <TableTh>Cara Memperoleh Salinan Informasi</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data?.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{index + 1}</TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>{item.nik}</TableTd>
+                    <TableTd>{item.notelp}</TableTd>
+                    <TableTd>{item.email}</TableTd>
+                    <TableTd>{item.jenisInformasiDiminta?.name}</TableTd>
+                    <TableTd>{item.caraMemperolehInformasi?.name}</TableTd>
+                    <TableTd>{item.caraMemperolehSalinanInformasi?.name}</TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table> </Box>
+        </Stack>
+      </Paper>
     </Box>
   );
 }
 
-function PermohonanInformasiPublikCreate() {
-  const permohonanInformasiPublikState = useProxy(statePermohonanInformasi)
-  const submitForms = () => {
-    // Tambahkan log untuk debugging
-    console.log("Form data sebelum submit:", {
-      name: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name,
-      nik: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik,
-      notelp: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp,
-      alamat: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat,
-      email: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email,
-      jenisInformasiDimintaId: permohonanInformasiPublikState.jenisInformasiDiminta,
-      caraMemperolehInformasiId: permohonanInformasiPublikState.caraMemperolehInformasi,
-      caraMemperolehSalinanInformasiId: permohonanInformasiPublikState.caraMemperolehSalinanInformasi
-    });
-
-    if (permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email &&
-      permohonanInformasiPublikState.jenisInformasiDiminta &&
-      permohonanInformasiPublikState.caraMemperolehInformasi &&
-      permohonanInformasiPublikState.caraMemperolehSalinanInformasi) {
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.create()
-    } else {
-      console.log("Validasi gagal, form tidak lengkap");
-      // Tampilkan pesan error ke pengguna di sini
-    }
-  }
-  return (
-    <Box py={5}>
-      <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"10"}>
-        <Title order={3}>Permohonan Informasi Publik</Title>
-        <TextInput
-          label="Nama Lengkap"
-          placeholder="masukkan nama lengkap"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name = val.target.value
-          }}
-        />
-        <TextInput
-          label="NIK"
-          placeholder="masukkan NIK"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik = val.target.value
-          }}
-        />
-        <TextInput
-          label="No.Telp"
-          placeholder="masukkan no telp"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp = val.target.value
-          }}
-        />
-        <TextInput
-          label="Alamat"
-          placeholder="masukkan alamat"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat = val.target.value
-          }}
-        />
-        <TextInput
-          label="Email"
-          placeholder="masukkan email"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email = val.target.value
-          }}
-        />
-        <JenisInformasi
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.jenisInformasiDimintaId = val.id
-          }}
-        />
-        <MemperolehInformasi
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.caraMemperolehInformasiId = val.id
-          }}
-        />
-        <MemperolehSalinan
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.caraMemperolehSalinanInformasiId = val.id
-          }}
-        />
-        <Group>
-          <Button onClick={submitForms}>Submit</Button>
-        </Group>
-      </Stack>
-    </Paper>
-    </Box >
-  )
-}
-
 export default Page;

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -1,73 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi';
-import { useShallowEffect } from '@mantine/hooks';
 
 function Page() {
-  return (
-    <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <PermohonanKeberatanInformasiCreate />
-        <PermohonanKeberatanInformasiList />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-function PermohonanKeberatanInformasiCreate() {
-  const state = useProxy(statePermohonanKeberatan.permohonanKeberatanInformasiForm)
-  const submit = () => {
-    if (state.create.form.name && state.create.form.email && state.create.form.notelp && state.create.form.alasan) {
-      state.create.create()
-    }
-  }
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Permohonan Keberatan Informasi Publik</Title>
-          <TextInput
-            label="Nama"
-            placeholder="masukkan nama lengkap"
-            onChange={(val) => {
-              state.create.form.name = val.target.value
-            }}
-          />
-          <TextInput
-            label="Email"
-            placeholder="masukkan email"
-            onChange={(val) => {
-              state.create.form.email = val.target.value
-            }}
-          />
-          <TextInput
-            label="Nomor Telepon"
-            placeholder="masukkan nomor telepon"
-            onChange={(val) => {
-              state.create.form.notelp = val.target.value
-            }}
-          />
-          <TextInput
-            label="Alasan Keberatan"
-            placeholder="masukkan alasan keberatan"
-            onChange={(val) => {
-              state.create.form.alasan = val.target.value
-            }}
-          />
-          <Group>
-            <Button onClick={submit} bg={colors['blue-button']}>Kirim Permohonan</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-function PermohonanKeberatanInformasiList() {
-  const listState = useProxy(statePermohonanKeberatan.permohonanKeberatanInformasiForm)
+  const listState = useProxy(statePermohonanKeberatan)
   useShallowEffect(() => {
     listState.findMany.load()
   }, [])
@@ -75,24 +14,36 @@ function PermohonanKeberatanInformasiList() {
   if (!listState.findMany.data) return <Stack>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={3}>Permohonan Keberatan Informasi Publik</Title>
-          {listState.findMany.data?.map((item) => (
-            <Box key={item.id}>
-              <Text>Nama: {item.name}</Text>
-              <Text>Email: {item.email}</Text>
-              <Text>Telepon: {item.notelp}</Text>
-              <Text>Alasan: {item.alasan}</Text>
-            </Box>
-          ))}
+          <Table striped withRowBorders withColumnBorders withTableBorder>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Email</TableTh>
+                <TableTh>Telepon</TableTh>
+                <TableTh>Alasan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {listState.findMany.data?.map((item, index) => (
+                <TableTr key={item.id}>
+                  <TableTd>{index + 1}</TableTd>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.email}</TableTd>
+                  <TableTd>{item.notelp}</TableTd>
+                  <TableTd dangerouslySetInnerHTML={{ __html: item.alasan }} />
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
         </Stack>
       </Paper>
     </Box>
-  )
+  );
 }
-
 export default Page;

src/app/admin/(dashboard)/ppid/profile-ppid/biodata/page.tsx

@@ -1,18 +1,18 @@
 'use client'
 import { Box, Group, Text } from '@mantine/core';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
+import ApiFetch from '@/lib/api-fetch';
+import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
 import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
-import { IconUpload, IconX, IconPhoto } from '@tabler/icons-react';
-import ApiFetch from '@/lib/api-fetch';
-
 
 function Biodata() {
   const biodataState = useProxy(stateProfilePPID)
   const [loading, setLoading] = useState(false);
+  
   return (<Box>
     <Text fw={"bold"}>Biodata</Text>
     <Dropzone
@@ -55,6 +55,9 @@ function Biodata() {
         </div>
       </Group>
     </Dropzone>
+    
+    
+    
     <PPIDTextEditor
       key={biodataState.findById.data?.id ?? 'new'}
       showSubmit={false}
@@ -67,8 +70,7 @@ function Biodata() {
     />
    
   </Box>
-
   );
 }
 
-export default Biodata;
+export default Biodata;

src/app/admin/(dashboard)/ppid/profile-ppid/listPage.tsx

@@ -25,19 +25,16 @@ function ProfileList() {
         <Title order={3}>List Profile PPID</Title>
         {dataArray.map((item) => (
           <Box key={item.id}>
-            <Box>
-              <Text fw={"bold"}>Gambar</Text>
-              {item.imageUrl ? (
+            {item.imageUrl && (
+              <Box mb={20}>
+                <Text fw={"bold"} mb={5}>Preview Gambar:</Text>
                 <Image
                   src={item.imageUrl}
-                  alt="Foto Profil"
+                  alt="Profile"
                   w={200}
-                  radius="md"
                 />
-              ) : (
-                <Text c="dimmed">Belum ada foto</Text>
-              )}
-            </Box>
+              </Box>
+            )}
             <Box>
               <Text fw={"bold"}>Nama</Text>
               <Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>