Sinkronisasi ADMIN & USER Menu Landing Page, Submenu Layanan

prisma/data/desa/layanan/pelayananSuratKeterangan.json

@@ -0,0 +1,57 @@
+[
+    {
+        "id" : "cmdxyb9zi0010vniiaeyi55ui",
+        "name" : "Surat Keterangan Beda Biodata Diri",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li><li><p>Fotocopy dokumen bersangkutan yang terdapat perbedaan biodata diri misal : Sertifikat Tanah/Ijazah/Polis Asuransi dan lainnya.</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxycqz40014vniidftrixvf",
+        "name" : "Surat Keterangan Yatim Piatu",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau KIA atau Kartu Keluarga</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdwx3wph0003vnr74us2t7h7",
+        "name" : "Surat Keterangan Domisili Organisasi",
+        "deskripsi" : "<p>Persyaratan Dokumen:</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy Surat Keterangan Terdaftar (SKT) organisasi atau Pengukuhan Kelompok</p></li><li><p>Jika Pengajuan baru pembuatan SKT maka melengkapi Susunan Pengurus lengkap dengan Kop Organisasi</p></li><li><p>Tanggal berdiri/Tahun berdiri/Sejak kapan berdirinya organisasi</p></li></ul><p>Alur Pelayanan:</p>"
+    },
+    {
+        "id" : "cmdxxv3i80004vniidg1mrucc",
+        "name" : "Surat Keterangan Penghasilan",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP orang tua atau Fotocopy Kartu keluarga</p></li><li><p>Membuat Surat Pernyataan Penghasilan bermaterai (disertai jumlah penghasilan)</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxxwp070008vnii9jbdcto7",
+        "name" : "Surat Keterangan Tidak Mampu",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP/KIA atau Kartu Keluarga</p></li><li><p>Fotocopy Kartu Indonesia Pintar/Kartu Perlindungan Sosial/Terdaftar dalam DTKS</p></li><li><p>Jika tidak memiliki Kartu tersebut diatas diwajibkan membuat Surat Pernyataan Tidak Mampu</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxxyfkl000cvnii1bxinnfi",
+        "name" : "Surat Keterangan Kelahiran",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy Surat lahir dari dokter/bidan (jika ada)</p></li><li><p>Fotocopy Kartu Keluarga</p></li><li><p>Fotocopy KTP 2 orang saksi</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxy23pl000gvniihsg38aq4",
+        "name" : "Surat Keterangan Usaha",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li><li><p>Foto Lokasi dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxy4mgt000kvniib1nemjem",
+        "name" : "Surat Keterangan Kematian",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li><li><p>Surat Kematian dari rumah sakit atau dokter (jika ada)</p></li><li><p>tanggal kematian</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxy61a1000ovniif4ytb9hs",
+        "name" : "Surat Keterangan Tempat Usaha",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li><li><p>Foto Lokasi&nbsp;dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</p></li><li><p>Surat Perjanjian Sewa/Kontrak atau Kwintansi Pembayaran Sewa 3 bulan terakhir bagi yang mengontrak tempat usaha, apabila tempat usaha milik sendiri lampiri dengan dokumen kepemilikan tempat usaha (dapat berupa fotocopy sppt atau Fotocopy Sertipikat Hak Milik)</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxy754q000svniiiz8oqyo0",
+        "name" : "Surat Keterangan Belum Kawin",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li><li><p>Khusus bagi yang berstatus duda atau janda melampirkan fotocopy akta cerai atau dokumen pendukung lainnya</p></li></ul><p>Alur Pelayanan :</p>"
+    },
+    {
+        "id" : "cmdxy8pi2000wvnii48fc1sxd",
+        "name" : "Surat Keterangan Kelakuan Baik",
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li></ul><p>Alur Pelayanan :</p>"
+    }
+]

prisma/data/desa/layanan/pelayananTelunjukSaktiDesa.json

@@ -0,0 +1,20 @@
+[
+    {
+        "id": "cmdy0dwx10000vnnb6nmt06rv",
+        "name": "Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download",
+        "deskripsi": "Akta Kelahiran",
+        "link": "https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KELAHIRAN_(dengan%20contoh%20Formulir).pdf"
+    },
+    {
+        "id": "cmdy0ttpz0001vnnbrvr9jb3z",
+        "name": "Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download",
+        "deskripsi": "Akta Perkawinan",
+        "link": "https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20PERKAWINAN_(dengan%20contoh%20Formulir).pdf"
+    },
+    {
+        "id": "cmdy0vjic0002vnnbcp0e9lgq",
+        "name": "Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download",
+        "deskripsi": "Akta Kematian",
+        "link": "https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KEMATIAN_(dengan%20contoh%20Formulir).pdf"
+    }
+]

prisma/seed.ts

@@ -4,6 +4,7 @@ import programInovasi from "./data/landing-page/profile/programInovasi.json";
 import mediaSosial from "./data/landing-page/profile/mediaSosial.json";
 import sdgsDesa from "./data/landing-page/sdgs-desa/sdgs-desa.json";
 import apbdes from "./data/landing-page/apbdes/apbdes.json";
+import pelayananSuratKeterangan from "./data/desa/layanan/pelayananSuratKeterangan.json";
 import categoryPengumuman from "./data/category-pengumuman.json";
 import kategoriBerita from "./data/kategori-berita.json";
 import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
@@ -98,6 +99,23 @@ import pegawaiPPID from "./data/ppid/struktur-ppid/pegawai-PPID.json";
       },
     });
   }
+  console.log("media sosial success ...");
+
+   // =========== LAYANAN DESA ===========
+   for (const p of pelayananSuratKeterangan) {
+    await prisma.pelayananSuratKeterangan.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+        deskripsi: p.deskripsi,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        deskripsi: p.deskripsi,
+      },
+    });
+  }
   console.log("media sosial success ...");
 
   // =========== LAYANAN ===========

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

@@ -111,7 +111,7 @@ function ListSuratKeterangan({ search }: { search: string }) {
                 </TableTd>  
                 <TableTd>
                   <Box w={300}>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                   </Box>
                 </TableTd>
                 <TableTd>

src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/edit/page.tsx

@@ -1,6 +1,5 @@
 '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, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
@@ -76,6 +75,14 @@ function EditPelayananTelunjukSakti() {
                 label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
                 placeholder="masukkan nama surat keterangan"
               />
+                <TextInput
+                   value={formData.deskripsi}
+                   onChange={(val) => {
+                     setFormData({ ...formData, deskripsi: val.target.value });
+                   }}
+                   label={<Text fz={"sm"} fw={"bold"}>Tautan Link</Text>}
+                   placeholder="masukkan tautan link"
+                 />
               <TextInput
                 value={formData.link}
                 onChange={(val) => {
@@ -84,15 +91,6 @@ function EditPelayananTelunjukSakti() {
                 label={<Text fz={"sm"} fw={"bold"}>Link</Text>}
                 placeholder="masukkan link"
               />
-              <Box>
-                <Text fz={"sm"} fw={"bold"}>Konten</Text>
-                <EditEditor
-                  value={formData.deskripsi}
-                  onChange={(htmlContent) => {
-                    setFormData({ ...formData, deskripsi: htmlContent });
-                  }}
-                />
-              </Box>
               <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
             </Stack>
           </Paper>

src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/page.tsx

@@ -58,11 +58,24 @@ function DetailPelayananTelunjukSakti() {
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Link</Text>
-                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.link}</Text>
+                  <Text
+                    component="a"
+                    href={telunjukSaktiState.findUnique.data?.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{
+                      display: 'block',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap'
+                    }}
+                  >
+                    {telunjukSaktiState.findUnique.data?.link}
+                  </Text>
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"}dangerouslySetInnerHTML={{ __html: telunjukSaktiState.findUnique.data?.deskripsi }}></Text>
+                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.deskripsi}</Text>
                 </Box>
                 <Flex gap={"xs"} mt={10}>
                   <Button

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

@@ -1,5 +1,4 @@
 'use client'
-import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
@@ -43,6 +42,14 @@ function CreatePelayananTelunjukDesa() {
             label={<Text fz={"sm"} fw={"bold"}>Nama Pelayanan Telunjuk Sakti Desa</Text>}
             placeholder="masukkan nama pelayanan telunjuk sakti desa"
           />
+          <TextInput
+            value={stateTelunjukDesa.create.form.deskripsi}
+            onChange={(val) => {
+              stateTelunjukDesa.create.form.deskripsi = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Tautan Link</Text>}
+            placeholder="masukkan tautan link"
+          />
           <TextInput
             value={stateTelunjukDesa.create.form.link}
             onChange={(val) => {
@@ -51,15 +58,6 @@ function CreatePelayananTelunjukDesa() {
             label={<Text fz={"sm"} fw={"bold"}>Link</Text>}
             placeholder="masukkan link"
           />
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
-            <CreateEditor
-              value={stateTelunjukDesa.create.form.deskripsi}
-              onChange={(htmlContent) => {
-                stateTelunjukDesa.create.form.deskripsi = htmlContent;
-              }}
-            />
-          </Box>
           <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>

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

@@ -1,14 +1,14 @@
 'use client'
-import JudulListTab from '@/app/admin/(dashboard)/_com/judulListTab';
 import colors from '@/con/colors';
 import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import { useProxy } from 'valtio/utils';
-import stateLayananDesa from '../../../_state/desa/layananDesa';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import stateLayananDesa from '../../../_state/desa/layananDesa';
 
 function PelayananTelunjukSakti() {
   const [search, setSearch] = useState("");
@@ -53,25 +53,33 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
+        <JudulList
           title='List Pelayanan Telunjuk Sakti Desa'
           href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
         />
         <Table striped withTableBorder withRowBorders>
           <TableThead>
             <TableTr>
               <TableTh>Nama</TableTh>
-              <TableTh>Deskripsi</TableTh>
+              <TableTh>Link</TableTh>
               <TableTh>Detail</TableTh>
             </TableTr>
           </TableThead>
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-              <TableTd>{item.name}</TableTd>
-              <TableTd><Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} /></TableTd>
+                <TableTd>
+                  <Box w={100}>
+                    <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.name }} />
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={100}>
+                  <a href={item.link} target="_blank" rel="noopener noreferrer">
+                    <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
+                  </a>
+                  </Box>
+                </TableTd>
                 <TableTd>
                   <Text>
                     <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`)}>

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-beda-biodata-diri/page.tsx

@@ -1,42 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Beda Biodata Diri
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: "h2" }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Fotocopy dokumen bersangkutan yang terdapat perbedaan biodata diri misal : Sertifikat Tanah/Ijazah/Polis Asuransi dan lainnya.</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: "h2" }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-belum-kawin/page.tsx

@@ -1,42 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Belum Kawin
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: "h2" }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Khusus bagi yang berstatus duda atau janda melampirkan fotocopy akta cerai atau dokumen pendukung lainnya</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: "h2" }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-domisili/page.tsx

@@ -1,42 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Center, Container, Image, List, ListItem, Stack, Text } from '@mantine/core';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Domisili Organisasi
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0} >
-          <Text fz={{ base: "h4", md: "h2" }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Fotocopy Surat Keterangan Terdaftar (SKT) organisasi atau Pengukuhan Kelompok</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Jika Pengajuan baru pembuatan SKT maka melengkapi Susunan Pengurus lengkap dengan Kop Organisasi</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Tanggal berdiri/Tahun berdiri/Sejak kapan berdirinya organisasi</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: "h2" }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-kelahiran/page.tsx

@@ -1,43 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Group, Center } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }}>
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Kelahiran
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: "h2" }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Fotocopy Surat lahir dari dokter/bidan (jika ada)</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Fotocopy Kartu Keluarga</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Fotocopy KTP 2 orang saksi</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: "h2" }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-kelahiran-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-kelakuan-baik/page.tsx

@@ -1,41 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Kelakuan Baik (Pengantar SKCK)
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: "h2" }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Fotocopy Ktp atau Kartu Keluarga</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: "h2" }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-kematian/page.tsx

@@ -1,43 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }}>
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Kematian
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: "h2" }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Fotocopy KTP atau Kartu keluarga</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Surat Kematian dari rumah sakit atau dokter (jika ada)</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Tanggal dan Waktu Kematian</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: "h2" }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-penghasilan/page.tsx

@@ -1,42 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Penghasilan
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{base:"h4", md: "h2"}} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{base:"sm", md: "h3"}}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{base:"sm", md: "h3"}}>Fotocopy KTP orang tua atau Fotocopy Kartu keluarga</ListItem>
-            <ListItem fz={{base:"sm", md: "h3"}}>Membuat Surat Pernyataan Penghasilan bermaterai (disertai jumlah penghasilan)</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{base:"h4", md: "h2"}} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-tempat-usaha/page.tsx

@@ -1,43 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Tempat Usaha
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: 'h2' }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Fotocopy KTP atau Kartu keluarga</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Foto Lokasi dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Surat Perjanjian Sewa/Kontrak atau Kwintansi Pembayaran Sewa 3 bulan terakhir bagi yang mengontrak tempat usaha, apabila tempat usaha milik sendiri lampiri dengan dokumen kepemilikan tempat usaha (dapat berupa fotocopy sppt atau Fotocopy Sertipikat Hak Milik)</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: 'h2' }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-tempat-usaha-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-tidak-mampu/page.tsx

@@ -1,44 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Tidak Mampu
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: "h2" }} py={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Fotocopy KTP/KIA atau Kartu Keluarga</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Fotocopy Kartu Indonesia Pintar/Kartu Perlindungan Sosial/Terdaftar dalam DTKS</ListItem>
-            <ListItem fz={{ base: "sm", md: "h3" }}>Jika tidak memiliki Kartu tersebut diatas diwajibkan membuat Surat Pernyataan Tidak Mampu
-            </ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: "h2" }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-tidak-mampu-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-usaha/page.tsx

@@ -1,42 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Usaha
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: 'h2' }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Fotocopy KTP atau Kartu keluarga</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Foto Lokasi dan Kegiatan Usaha di cetak dalam selembar kertas (diparaf dan stempel oleh Kelian Banjar Dinas)</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: 'h2' }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack >
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/(detail)/surat-keterangan-yatim-piatu/page.tsx

@@ -1,41 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, List, ListItem, Box, Text, Image, Button, Center, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={"22"}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Text fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} ta={"center"} fw={"bold"}>
-          Surat Keterangan Yatim Piatu
-        </Text>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
-          <Text fz={{ base: "h4", md: 'h2' }} pb={20}>
-            Persyaratan Dokumen:
-          </Text>
-          <List>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</ListItem>
-            <ListItem fz={{ base: "sm", md: 'h3' }}>Fotocopy Ktp, KIA atau Kartu Keluarga</ListItem>
-          </List>
-          <Box py={20}>
-            <Text fz={{ base: "h4", md: 'h2' }} py={20}>
-              Alur Pelayanan:
-            </Text>
-            <Center>
-              <Image src="/api/img/flowchart-suket-beda-biodatadiri-removebg-preview.png" alt='' />
-            </Center>
-          </Box>
-          <Group justify='center'>
-            <Button radius={"lg"} fz={'h4'} bg={colors['blue-button']}>Ajukan Permohonan</Button>
-          </Group>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/layanan/[id]/page.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import { useParams } from 'next/navigation';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import { Box, Button, Center, Container, Group, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../_com/BackButto';
+
+interface LayananData {
+  id: string;
+  name: string;
+  deskripsi: string;
+  imageId: string;
+  image2Id: string;
+  image?: {
+    id: string;
+    link: string;
+  };
+  image2?: {
+    id: string;
+    link: string;
+  };
+}
+
+function Page() {
+  const params = useParams<{ id: string }>();
+  const id = Array.isArray(params.id) ? params.id[0] : params.id;
+  const state = useProxy(stateLayananDesa);
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<LayananData | null>(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      if (!id) return;
+
+      try {
+        setLoading(true);
+        await state.suratKeterangan.findUnique.load(id);
+        const result = state.suratKeterangan.findUnique.data as unknown as LayananData;
+        setData(result);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, [id]);
+
+  if (loading) {
+    return (
+      <Center>
+        <Skeleton height={500} />
+      </Center>
+    );
+  }
+
+  if (!data) {
+    return (
+      <Center>
+        <Text>Data tidak ditemukan</Text>
+      </Center>
+    );
+  }
+
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container w={{ base: "100%", md: "50%" }}>
+        <Text
+          fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }}
+          ta="center"
+          fw="bold"
+        >
+          {data.name}
+        </Text>
+      </Container>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={0}>
+          <Text
+            dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+            fz={{ base: "h4", md: "h2" }}
+            pb={20}
+          />
+          {data.image2?.link && (
+            <Center>
+              <Image src={data.image2.link} alt={data.name} />
+            </Center>
+          )}
+          <Group justify='center' mt="md">
+            <Button radius="lg" fz="h4" bg={colors['blue-button']}>
+              Ajukan Permohonan
+            </Button>
+          </Group>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/layanan/[sub]/page.tsx

@@ -1,10 +0,0 @@
-import { Stack } from "@mantine/core";
-
-export default async function Page({ params }: { params: Promise<{ sub: string }> }) {
-    const { sub } = await params
-    return (
-        <Stack>
-            {sub}
-        </Stack>
-    )
-}

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPendudukNonPermanent.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import { ActionIcon, Box, Divider, Flex, Skeleton, Text } from '@mantine/core';
+import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
+import React, { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function PelayananPendudukNonPermanent() {
+  const state = useProxy(stateLayananDesa)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true)
+        await state.pelayananPendudukNonPermanen.findById.load('1')
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  const data = state.pelayananPendudukNonPermanen.findById.data
+  return (
+    <Box>
+      {loading ? (
+        <Skeleton h={500} />
+      ) : (
+        <Box>
+          <Box py={15}>
+            <Text fz={{ base: "h4", md: "h3" }} fw={"bold"}>{data?.name}</Text>
+          </Box>
+          <Text pb={20} fz={{ base: "sm", md: 'h3' }} ta={"justify"} dangerouslySetInnerHTML={{__html: data?.deskripsi || ''}} />
+          <Divider color={colors["blue-button"]} />
+          <Flex justify={"space-between"} py={20}>
+            <Text fz={{ base: "sm", md: 'h3' }}>25 May 2021 . Darmasaba</Text>
+            <Box>
+              <Flex gap={"lg"}>
+                <ActionIcon variant='transparent'>
+                  <IconBrandFacebook color={colors["blue-button"]} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandInstagram color={colors["blue-button"]} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandTwitter color={colors["blue-button"]} size={"30"} />
+                </ActionIcon>
+                <ActionIcon variant='transparent'>
+                  <IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
+                </ActionIcon>
+              </Flex>
+            </Box>
+          </Flex>
+          <Divider color={colors["blue-button"]} pb={50} />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default PelayananPendudukNonPermanent;

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPerizinanBerusaha.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import { Box, Button, Center, Group, Skeleton, Stepper, StepperCompleted, StepperStep, Text } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function PelayananPerizinanBerusaha() {
+  const state = useProxy(stateLayananDesa)
+  const [loading, setLoading] = useState(false)
+  const [active, setActive] = useState(1);
+  const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
+  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        await state.pelayananPerizinanBerusaha.findById.load('1')
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData()
+  }, [])
+
+  const data = state.pelayananPerizinanBerusaha.findById.data;
+  
+  if (!data) {
+    return (
+      <Center>
+        <Text>Data tidak tersedia</Text>
+      </Center>
+    );
+  }
+
+  return (
+    <Box>
+      {loading ? (
+        <Center>
+          <Skeleton h={250} />
+        </Center>
+      ) : (
+        <Box>
+          <Box py={15}>
+            <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
+          </Box>
+          <Text 
+            py={10} 
+            ta={"justify"} 
+            fz={{ base: "sm", md: 'h3' }} 
+            dangerouslySetInnerHTML={{ __html: data.deskripsi || '' }} 
+          />
+          <Text py={10} fz={{ base: "sm", md: 'h3' }}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
+          <Box p={"xl"} w={{ base: "100%", md: "100%" }}>
+            <Stepper active={active} onStepClick={setActive} orientation="vertical"
+              styles={{
+                separator: {
+                  marginLeft: 25
+                },
+                step: {
+                  padding: '12px 0'
+                }
+              }}>
+              <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
+                Pendaftaran akun pada portal OSS
+              </StepperStep>
+              <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
+                Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
+              </StepperStep>
+              <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI">
+                Memilih KBLI dengan jenis usaha yang akan didaftarkan
+              </StepperStep>
+              <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
+                Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
+              </StepperStep>
+              <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
+                Proses verifikasi dan persetujuan oleh instansi terkait
+              </StepperStep>
+              <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
+                Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
+              </StepperStep>
+              <StepperCompleted>
+                Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
+              </StepperCompleted>
+            </Stepper>
+
+            <Group justify="center" mt="xl">
+              <Button variant="default" onClick={prevStep}>Back</Button>
+              <Button onClick={nextStep}>Next step</Button>
+            </Group>
+            <Text py={35} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>
+              Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
+              seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
+              resmi OSS <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default PelayananPerizinanBerusaha;

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { useProxy } from 'valtio/utils';
+
+function PelayananSuratKeterangan({ search }: { search: string }) {
+  const [loading, setLoading] = useState(false);
+  const router = useRouter()
+  const state = useProxy(stateLayananDesa)
+  const filteredData = useMemo(() => {
+    if (!state.suratKeterangan.findMany.data) return [];
+    return state.suratKeterangan.findMany.data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.name?.toLowerCase().includes(keyword)
+      );
+    })
+  }, [state.suratKeterangan.findMany.data, search]);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        await state.suratKeterangan.findMany.load()
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData()
+  }, [])
+  return (
+    <Box pb={10}>
+      <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Surat Keterangan</Text>
+      <SimpleGrid
+        py={20}
+        cols={{
+          base: 1,
+          sm: 3
+        }}
+      >
+        {loading ? (
+          <Center>
+            <Skeleton h={250} />
+          </Center>
+        ) : (
+          filteredData.map((v, k) => {
+            return (
+              <BackgroundImage
+                key={k}
+                src={v.image?.link || ''}
+                h={250}
+                radius={16}
+                pos={"relative"}
+              >
+                <Box
+                  style={{
+                    borderRadius: 16,
+                    zIndex: 0
+                  }}
+                  pos={"absolute"}
+                  w={"100%"}
+                  h={"100%"}
+                  bg={colors.trans.dark[2]}
+                />
+                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
+                  <Box p={"lg"}>
+                    <Text
+                      c={"white"}
+                      size={"1.5rem"}
+                      style={{
+                        textAlign: "center",
+                      }}>{v.name}</Text>
+                  </Box>
+                  <Group justify="center">
+                    <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
+                      onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}>
+                      Detail
+                    </Button>
+                  </Group>
+                </Stack>
+              </BackgroundImage>
+            )
+          })
+        )}
+      </SimpleGrid>
+    </Box>
+
+  );
+}
+
+export default PelayananSuratKeterangan;

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananTelunjukSaktiDesa.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import { Box, Flex, Skeleton, Text, Title } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+interface ServiceItem {
+  name: string;
+  deskripsi: string;
+  link: string;
+}
+
+function PelayananTelunjukSaktiDesa() {
+  const state = useProxy(stateLayananDesa)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true)
+        await state.pelayananTelunjukSaktiDesa.findMany.load()
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  const data = state.pelayananTelunjukSaktiDesa.findMany.data as Array<{
+    name: string;
+    id: string;
+    deskripsi: string;
+    link: string;
+    items: ServiceItem[];
+    createdAt: Date;
+    updatedAt: Date;
+    deletedAt: Date | null;
+  }>
+  return (
+    <Box>
+      <Title fz="h2" py={10} mb="md">Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. Layanan Telunjuk Sakti Desa meliputi :</Title>
+      {loading ? (
+        <Skeleton h={500} />
+      ) : (
+        data.map((v, k) => {
+          return (
+            <Box key={k}>
+              <Box py={10}>
+                <Flex gap={"3"} align={"center"}>
+                  <Text fz={{ base: "h4", md: "h3" }} fw={"bold"}>{v.name}
+                  </Text>
+                  <Text span fz={{ base: "h4", md: "h3" }}>
+                    <a href={v.link} target="_blank" rel="noopener noreferrer" style={{ color: '#228be6' }}>{v.deskripsi}</a>
+                  </Text>
+                </Flex>
+              </Box>
+            </Box>
+          )
+        })
+      )}
+    </Box>
+  );
+}
+
+export default PelayananTelunjukSaktiDesa;

src/app/darmasaba/(pages)/desa/layanan/page.tsx

@@ -1,85 +1,19 @@
 'use client'
 import colors from "@/con/colors";
-import { ActionIcon, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text, TextInput } from "@mantine/core";
-import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp, IconSearch } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
+import { Box, Container, Stack, Text, TextInput } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
 import BackButton from "./_com/BackButto";
+import PelayananPerizinanBerusaha from "./_com/pelayananPerizinanBerusaha";
+import PelayananSuratKeterangan from "./_com/pelayananSuratKeterangan";
+import PelayananTelunjukSaktiDesa from "./_com/pelayananTelunjukSaktiDesa";
+import PelayananPendudukNonPermanent from "./_com/pelayananPendudukNonPermanent";
 
-const data = [
-    {
-        id: 1,
-        images: "/api/img/test.png",
-        name: "Surat Keterangan Domisili Organisasi",
-        link: "/darmasaba/desa/layanan/surat-keterangan-domisili"
-    },
-    {
-        id: 2,
-        images: "/api/img/test-3.jpeg",
-        name: "Surat Keterangan Penghasilan",
-        link: "/darmasaba/desa/layanan/surat-keterangan-penghasilan"
-    },
-    {
-        id: 3,
-        images: "/api/img/domisili.jpeg",
-        name: "Surat Keterangan Tidak Mampu",
-        link: "/darmasaba/desa/layanan/surat-keterangan-tidak-mampu"
-    },
-    {
-        id: 4,
-        images: "/api/img/kelahiran.jpeg",
-        name: "Surat Keterangan Kelahiran",
-        link: "/darmasaba/desa/layanan/surat-keterangan-kelahiran"
-    },
-    {
-        id: 5,
-        images: "/api/img/keterangan-usaha.jpeg",
-        name: "Surat Keterangan Usaha",
-        link: "/darmasaba/desa/layanan/surat-keterangan-usaha"
-    },
-    {
-        id: 6,
-        images: "/api/img/kematian.jpeg",
-        name: "Surat Keterangan Kematian",
-        link: "/darmasaba/desa/layanan/surat-keterangan-kematian"
-    },
-    {
-        id: 7,
-        images: "/api/img/tempatusaha.jpeg",
-        name: "Surat Keterangan Tempat Usaha",
-        link: "/darmasaba/desa/layanan/surat-keterangan-tempat-usaha"
-    },
-    {
-        id: 8,
-        images: "/api/img/belumkawin.jpeg",
-        name: "Surat Keterangan Belum Kawin",
-        link: "/darmasaba/desa/layanan/surat-keterangan-belum-kawin"
-    },
-    {
-        id: 9,
-        images: "/api/img/berkelakuan-baik.jpeg",
-        name: "Surat Keterangan Kelakuan Baik",
-        link: "/darmasaba/desa/layanan/surat-keterangan-kelakuan-baik"
-    },
-    {
-        id: 10,
-        images: "/api/img/biodata.jpeg",
-        name: "Surat Keterangan Beda Biodata Diri",
-        link: "/darmasaba/desa/layanan/surat-keterangan-beda-biodata-diri"
-    },
-    {
-        id: 11,
-        images: "/api/img/yatim.jpeg",
-        name: "Surat Keterangan Yatim Piatu",
-        link: "/darmasaba/desa/layanan/surat-keterangan-yatim-piatu"
-    }
 
-]
 export default function Page() {
-    const router = useRouter()
-    const [active, setActive] = useState(1);
-    const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
-    const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+    const [search, setSearch] = useState("")
+    
+
     return (
         <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
             <Box px={{ base: 'md', md: 100 }}>
@@ -100,149 +34,20 @@ export default function Page() {
                         w={{ base: "70%", md: "50%" }}
                         placeholder="Cari Layanan"
                         leftSection={<IconSearch size={20} />}
-
+                        value={search}
+                        onChange={(e) => setSearch(e.currentTarget.value)}
                     />
                 </Stack>
             </Container>
             <Box px={{ base: "md", md: 100 }}>
                 {/* Bagian Pelayanan Surat Keterangan */}
-                <Box pb={10}>
-                    <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Surat Keterangan</Text>
-                </Box>
-                <SimpleGrid
-                    py={20}
-                    cols={{
-                        base: 1,
-                        sm: 3
-                    }}
-                >
-                    {data.map((v, k) => {
-                        return (
-                            <BackgroundImage
-                                key={k}
-                                src={v.images}
-                                h={250}
-                                radius={16}
-                                pos={"relative"}
-                            >
-                                <Box
-                                    style={{
-                                        borderRadius: 16,
-                                        zIndex: 0
-                                    }}
-                                    pos={"absolute"}
-                                    w={"100%"}
-                                    h={"100%"}
-                                    bg={colors.trans.dark[2]}
-                                />
-                                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                                    <Box p={"lg"}>
-                                        <Text
-                                            c={"white"}
-                                            size={"1.5rem"}
-                                            style={{
-                                                textAlign: "center",
-                                            }}>{v.name}</Text>
-                                    </Box>
-                                    <Group justify="center">
-                                        <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
-                                            onClick={() => router.push(v.link)}>
-                                            Detail
-                                        </Button>
-                                    </Group>
-                                </Stack>
-                            </BackgroundImage>
-                        )
-                    })}
-                </SimpleGrid>
+                <PelayananSuratKeterangan search={search} />
                 {/* Bagian Pelayanan Perizinan Berusaha */}
-                <Box py={15}>
-                    <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
-                </Box>
-                <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS)
-                    merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha,
-                    Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas
-                    Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349
-                    Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</Text>
-                <Text py={10} fz={{ base: "sm", md: 'h3' }}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
-                <Box p={"xl"} w={{ base: "100%", md: "100%" }} >
-                    <Stepper active={active} onStepClick={setActive} orientation="vertical"
-                        styles={{
-                            separator: {
-                                marginLeft: 25
-                            },
-
-                            step: {
-                                padding: '12px 0'
-                            }
-                        }}>
-                        <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
-                            Pendaftaran akun pada portal OSS
-                        </StepperStep>
-                        <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
-                            Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
-                        </StepperStep>
-                        <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
-                            Memilih KBLI dengan jenis usaha yang akan didaftarkan
-                        </StepperStep>
-                        <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
-                            Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
-                        </StepperStep>
-                        <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
-                            Proses verifikasi dan persetujuan oleh instansi terkait
-                        </StepperStep>
-                        <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
-                            Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
-                        </StepperStep>
-                        <StepperCompleted >
-                            Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
-                        </StepperCompleted>
-                    </Stepper>
-
-                    <Group justify="center" mt="xl">
-                        <Button variant="default" onClick={prevStep}>Back</Button>
-                        <Button onClick={nextStep}>Next step</Button>
-                    </Group>
-                    <Text py={35} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
-                        seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
-                        resmi OSS <a href={"https://oss.go.id/"}>(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
-                </Box>
+                <PelayananPerizinanBerusaha/>
                 {/* Bagian Pelayanan Telunjuk Sakti Desa */}
-                <Box py={15}>
-                    <Text fz={{base: "h4", md: "h3"}} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
-                </Box>
-                <Text fz={{ base: "sm", md: 'h3' }} py={10}>Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. layanan telunjuk sakti Desa meliputi :</Text>
-                <List type="ordered" pb={20}>
-                    <ListItem fz={{ base: "sm", md: 'h3' }}>Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KELAHIRAN_(dengan%20contoh%20Formulir).pdf">Akta Kelahiran</a>)</ListItem>
-                    <ListItem fz={{ base: "sm", md: 'h3' }}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20PERKAWINAN_(dengan%20contoh%20Formulir).pdf">Akta Perkawinan</a>)</ListItem>
-                    <ListItem fz={{ base: "sm", md: 'h3' }}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KEMATIAN_(dengan%20contoh%20Formulir).pdf">Akata Kematian</a>)</ListItem>
-                </List>
-                {/* Bagian Pelayanan Telunjuk Sakti Desa */}
-                <Box py={15}>
-                    <Text fz={{base: "h4", md: "h3"}} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
-                </Box>
-                <Text pb={20} fz={{ base: "sm", md: 'h3' }} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
-                <Divider color={colors["blue-button"]} />
-                <Flex justify={"space-between"} py={20}>
-                    <Text fz={{ base: "sm", md: 'h3' }}>25 May 2021 . Darmasaba</Text>
-                    <Box>
-                        <Flex gap={"lg"}>
-                            <ActionIcon variant='transparent'>
-                                <IconBrandFacebook color={colors["blue-button"]} size={"30"} />
-                            </ActionIcon>
-                            <ActionIcon variant='transparent'>
-                                <IconBrandInstagram color={colors["blue-button"]} size={"30"} />
-                            </ActionIcon>
-                            <ActionIcon variant='transparent'>
-                                <IconBrandTwitter color={colors["blue-button"]} size={"30"} />
-                            </ActionIcon>
-                            <ActionIcon variant='transparent'>
-                                <IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
-                            </ActionIcon>
-                        </Flex>
-                    </Box>
-                </Flex>
-                <Divider color={colors["blue-button"]} pb={50} />
+                <PelayananTelunjukSaktiDesa/>
+                 {/* Bagian Pelayanan Penduduk Non Permanent */}
+                 <PelayananPendudukNonPermanent/>
             </Box>
         </Stack>
     )

src/app/darmasaba/_com/main-page/layanan/index.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
+import stateLayananDesa from "@/app/admin/(dashboard)/_state/desa/layananDesa";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";
 import { Carousel } from "@mantine/carousel";
@@ -19,78 +21,10 @@ import Autoplay from "embla-carousel-autoplay";
 import _ from "lodash";
 import { useTransitionRouter } from "next-view-transitions";
 import Link from "next/link";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
+import { useProxy } from "valtio/utils";
 
-const data = [
-  {
-    id: 1,
-    images: "/api/img/test.png",
-    name: "Surat Keterangan Domisili Organisasi",
-    link: "/darmasaba/desa/layanan/surat-keterangan-domisili"
-},
-{
-    id: 2,
-    images: "/api/img/test-3.jpeg",
-    name: "Surat Keterangan Penghasilan",
-    link: "/darmasaba/desa/layanan/surat-keterangan-penghasilan"
-},
-{
-    id: 3,
-    images: "/api/img/domisili.jpeg",
-    name: "Surat Keterangan Tidak Mampu",
-    link: "/darmasaba/desa/layanan/surat-keterangan-tidak-mampu"
-},
-{
-    id: 4,
-    images: "/api/img/kelahiran.jpeg",
-    name: "Surat Keterangan Kelahiran",
-    link: "/darmasaba/desa/layanan/surat-keterangan-kelahiran"
-},
-{
-    id: 5,
-    images: "/api/img/keterangan-usaha.jpeg",
-    name: "Surat Keterangan Usaha",
-    link: "/darmasaba/desa/layanan/surat-keterangan-usaha"
-},
-{
-    id: 6,
-    images: "/api/img/kematian.jpeg",
-    name: "Surat Keterangan Kematian",
-    link: "/darmasaba/desa/layanan/surat-keterangan-kematian"
-},
-{
-    id: 7,
-    images: "/api/img/tempatusaha.jpeg",
-    name: "Surat Keterangan Tempat Usaha",
-    link: "/darmasaba/desa/layanan/surat-keterangan-tempat-usaha"
-},
-{
-    id: 8,
-    images: "/api/img/belumkawin.jpeg",
-    name: "Surat Keterangan Belum Kawin",
-    link: "/darmasaba/desa/layanan/surat-keterangan-belum-kawin"
-},
-{
-    id: 9,
-    images: "/api/img/berkelakuan-baik.jpeg",
-    name: "Surat Keterangan Kelakuan Baik",
-    link: "/darmasaba/desa/layanan/surat-keterangan-kelakuan-baik"
-},
-{
-    id: 10,
-    images: "/api/img/biodata.jpeg",
-    name: "Surat Keterangan Beda Biodata Diri",
-    link: "/darmasaba/desa/layanan/surat-keterangan-beda-biodata-diri"
-},
-{
-    id: 11,
-    images: "/api/img/yatim.jpeg",
-    name: "Surat Keterangan Yatim Piatu",
-    link: "/darmasaba/desa/layanan/surat-keterangan-yatim-piatu"
-}
-
-]
 const textHeading = {
  title: "Layanan",
  des: "Layanan adalah fitur yang membantu warga desa mengakses berbagai kebutuhan administrasi, informasi, dan bantuan secara cepat, mudah, dan transparan. Dengan fitur ini, semua layanan desa ada dalam genggaman Anda!",
@@ -135,15 +69,33 @@ function Layanan() {
 
 const height = 720;
 function Slider() {
+ const state = useProxy(stateLayananDesa)
+ const [loading, setLoading] = useState(false);
  const theme = useMantineTheme();
  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
  const autoplay = useRef(Autoplay({ delay: 2000 }));
  const router = useTransitionRouter()
 
+ useEffect(()=> {
+   const loadData = async () => {
+     try {
+       setLoading(true);
+       await state.suratKeterangan.findMany.load()
+     } catch (error) {
+       console.error('Error loading data:', error);
+     } finally {
+       setLoading(false);
+     }
+   }
+   loadData()
+ }, [])
+
+ const data = (state.suratKeterangan.findMany.data || []).slice(0, 8);
+
  const slides = data.map((item) => (
    <Carousel.Slide key={item.id} >
      <Paper h={"100%"} pos={"relative"} style={{
-        backgroundImage: `url(${item.images}) `,
+       backgroundImage: `url(${item.image?.link})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
@@ -173,7 +125,7 @@ function Slider() {
            </Text>
          </Box>
          <Group justify="center">
-            <Button component={Link} href={item.link} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+           <Button component={Link} href={`/darmasaba/desa/layanan/${item.id}`} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
              Detail
            </Button>
          </Group>
@@ -200,3 +152,4 @@ function Slider() {
 }
 
 export default Layanan;
+