Api Admin Menu Desa Sub Menu Layanan Tabs 3 Pelayanan Done

prisma/data/desa/layanan/pelayananPerizinanBerusaha.json

@@ -0,0 +1,8 @@
+[
+    {
+      "id": "1",
+      "name": "I.B Surya Prabhawa Manuaba, S.H., M.H.",
+      "deskripsi": "<p>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</p>",
+      "link" : "https://oss.go.id/"
+    }
+]   

prisma/schema.prisma

@@ -365,27 +365,48 @@ model GalleryVideo {
 
 // ========================================= LAYANAN DESA ========================================= //
 model PelayananSuratKeterangan {
-  id        String   @id @default(cuid())
+  id        String      @id @default(cuid())
   name      String
-  deskripsi String   @db.Text
+  deskripsi String      @db.Text
-  image FileStorage @relation(fields: [imageId], references: [id])
+  image     FileStorage @relation(fields: [imageId], references: [id])
-  imageId String
+  imageId   String
-  createdAt DateTime @default(now())
+  createdAt DateTime    @default(now())
-  updatedAt DateTime @updatedAt
+  updatedAt DateTime    @updatedAt
-  deletedAt DateTime @default(now())
+  deletedAt DateTime    @default(now())
-  isActive  Boolean  @default(true)
+  isActive  Boolean     @default(true)
 }
 
 model PelayananTelunjukSaktiDesa {
   id        String   @id @default(cuid())
   name      String
   deskripsi String   @db.Text
+  link      String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
 
+model PelayananPerizinanBerusaha {
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  link      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model PelayananPendudukNonPermanen {
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
 
 // ========================================= MENU KESEHATAN ========================================= //
 // ========================================= DATA KESEHATAN WARGA ========================================= //

prisma/seed.ts

@@ -10,6 +10,7 @@ import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
 import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
 import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
 import strukturPPID from "./data/ppid/struktur-ppid/strukturPPID.json";
+import pelayananPerizinanBerusaha from "./data/desa/layanan/pelayananPerizinanBerusaha.json";
 
 (async () => {
   for (const l of layanan) {
@@ -28,6 +29,27 @@ import strukturPPID from "./data/ppid/struktur-ppid/strukturPPID.json";
 
   console.log("layanan success ...");
 
+  for (const l of pelayananPerizinanBerusaha) {
+    await prisma.pelayananPerizinanBerusaha.upsert({
+      where: {
+        id: l.id,
+      },
+      update: {
+        name: l.name,
+        deskripsi: l.deskripsi,
+        link: l.link,
+      },
+      create: {
+        id: l.id,
+        name: l.name,
+        deskripsi: l.deskripsi,
+        link: l.link,
+      },
+    });
+  }
+
+  console.log("pelayanan perizinan berusaha success ...");
+
   for (const s of strukturPPID) {
     await prisma.strukturPPID.upsert({
       where: {

src/app/admin/(dashboard)/_state/desa/layananDesa.ts

@@ -16,6 +16,41 @@ const suratKeteranganForm = {
   imageId: "",
 };
 
+const telunjukSaktiDesaForm = {
+  name: "",
+  deskripsi: "",
+  link: "",
+};
+
+const templateTelunjukSaktiDesaForm = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+
+const templatePelayananPerizinanBerusaha = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  link: z.string().min(3, "Link minimal 3 karakter"),
+});
+
+type pelayananPerizinanBerusahaForm =
+  Prisma.PelayananPerizinanBerusahaGetPayload<{
+    select: {
+      id: true;
+      name: true;
+      deskripsi: true;
+      link: true;
+    };
+  }>;
+
+const pelayananPerizinanBerusahaForm = {
+  name: "",
+  deskripsi: "",
+  link: "",
+};
+
+
 const suratKeterangan = proxy({
   create: {
     form: { ...suratKeteranganForm },
@@ -173,20 +208,25 @@ const suratKeterangan = proxy({
       }
       try {
         suratKeterangan.edit.loading = true;
-        const response = await fetch(`/api/desa/layanan/pelayanansuratketerangan/${this.id}`, {
+        const response = await fetch(
-          method: "PUT",
+          `/api/desa/layanan/pelayanansuratketerangan/${this.id}`,
-          headers: {
+          {
-            "Content-Type": "application/json",
+            method: "PUT",
-          },
+            headers: {
-          body: JSON.stringify({
+              "Content-Type": "application/json",
-            name: this.form.name,
+            },
-            deskripsi: this.form.deskripsi,
+            body: JSON.stringify({
-            imageId: this.form.imageId,
+              name: this.form.name,
-          }),
+              deskripsi: this.form.deskripsi,
-        });
+              imageId: this.form.imageId,
+            }),
+          }
+        );
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
-          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
         }
         const result = await response.json();
         if (result.success) {
@@ -194,11 +234,17 @@ const suratKeterangan = proxy({
           await suratKeterangan.findMany.load(); // refresh list
           return true;
         } else {
-          throw new Error(result.message || "Gagal mengupdate surat keterangan");
+          throw new Error(
+            result.message || "Gagal mengupdate surat keterangan"
+          );
         }
       } catch (error) {
         console.error("Error updating surat keterangan:", error);
-        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update surat keterangan");
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update surat keterangan"
+        );
         return false;
       } finally {
         suratKeterangan.edit.loading = false;
@@ -207,9 +253,329 @@ const suratKeterangan = proxy({
   },
 });
 
+const pelayananTelunjukSaktiDesa = proxy({
+  create: {
+    form: { ...telunjukSaktiDesaForm },
+    loading: false,
+    async create() {
+      const cek = templateTelunjukSaktiDesaForm.safeParse(
+        pelayananTelunjukSaktiDesa.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        pelayananTelunjukSaktiDesa.create.loading = true;
+        const res = await ApiFetch.api.desa.layanan.pelayanantelunjuksaktidesa[
+          "create"
+        ].post(pelayananTelunjukSaktiDesa.create.form);
+        if (res.status === 200) {
+          pelayananTelunjukSaktiDesa.findMany.load();
+          return toast.success("Telunjuk Sakti Desa berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan telunjuk sakti desa");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        pelayananTelunjukSaktiDesa.create.loading = false;
+      }
+    },
+    resetForm() {
+      pelayananTelunjukSaktiDesa.create.form = { ...telunjukSaktiDesaForm };
+    },
+  },
+  findMany: {
+    data: [] as Prisma.PelayananTelunjukSaktiDesaGetPayload<{
+      omit: { isActive: true };
+    }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.layanan.pelayanantelunjuksaktidesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        pelayananTelunjukSaktiDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PelayananTelunjukSaktiDesaGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/desa/layanan/pelayanantelunjuksaktidesa/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          pelayananTelunjukSaktiDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch telunjuk sakti desa:", res.statusText);
+          pelayananTelunjukSaktiDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching telunjuk sakti desa:", error);
+        pelayananTelunjukSaktiDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        pelayananTelunjukSaktiDesa.delete.loading = true;
+        const response = await fetch(
+          `/api/desa/layanan/pelayanantelunjuksaktidesa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Telunjuk Sakti Desa berhasil dihapus");
+          await pelayananTelunjukSaktiDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus telunjuk sakti desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus telunjuk sakti desa");
+      } finally {
+        pelayananTelunjukSaktiDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...telunjukSaktiDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/desa/layanan/pelayanantelunjuksaktidesa/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            link: data.link,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching telunjuk sakti desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateTelunjukSaktiDesaForm.safeParse(
+        pelayananTelunjukSaktiDesa.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        pelayananTelunjukSaktiDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/desa/layanan/pelayanantelunjuksaktidesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              link: this.form.link,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Telunjuk Sakti Desa berhasil diupdate");
+          await pelayananTelunjukSaktiDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate telunjuk sakti desa"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating telunjuk sakti desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update telunjuk sakti desa"
+        );
+        return false;
+      } finally {
+        pelayananTelunjukSaktiDesa.edit.loading = false;
+      }
+    },
+  },
+})
+
+const pelayananPerizinanBerusaha = proxy({
+  findById: {
+    data: null as pelayananPerizinanBerusahaForm | null,
+    loading: false,
+    initialize() {
+      pelayananPerizinanBerusaha.findById.data = {
+        id: "",
+        name: "",
+        deskripsi: "",
+        link: "",
+      } as pelayananPerizinanBerusahaForm;
+    },
+    async load(id: string) {
+      try {
+        pelayananPerizinanBerusaha.findById.loading = true;
+        const res = await fetch(
+          `/api/desa/layanan/pelayananperizinanberusaha/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          pelayananPerizinanBerusaha.findById.data = data.data ?? null;
+        } else {
+          console.error(
+            "Failed to fetch pelayanan perizinan berusaha:",
+            res.statusText
+          );
+          pelayananPerizinanBerusaha.findById.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching pelayanan perizinan berusaha:", error);
+        pelayananPerizinanBerusaha.findById.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...pelayananPerizinanBerusahaForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak boleh kosong");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/desa/layanan/pelayananperizinanberusaha/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          pelayananPerizinanBerusaha.update.id = data.id;
+          pelayananPerizinanBerusaha.update.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            link: data.link,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching pelayanan perizinan berusaha:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update(data: pelayananPerizinanBerusahaForm) {
+      const cek = templatePelayananPerizinanBerusaha.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        pelayananPerizinanBerusaha.update.loading = true;
+        const res = await fetch(
+          `/api/desa/layanan/pelayananperizinanberusaha/${data.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data),
+          }
+        );
+        if (res.ok) {
+          toast.success("Pelayanan perizinan berusaha berhasil diupdate");
+          await pelayananPerizinanBerusaha.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengupdate pelayanan perizinan berusaha");
+        }
+      } catch (error) {
+        console.error("Error updating pelayanan perizinan berusaha:", error);
+        toast.error(
+          "Terjadi kesalahan saat mengupdate pelayanan perizinan berusaha"
+        );
+      } finally {
+        pelayananPerizinanBerusaha.update.loading = false;
+      }
+    },
+  },
+});
+
 const stateLayananDesa = proxy({
   suratKeterangan,
+  pelayananPerizinanBerusaha,
+  pelayananTelunjukSaktiDesa,
 });
 
 export default stateLayananDesa;
-

src/app/admin/(dashboard)/desa/gallery/lib/youtube-utils.ts

@@ -0,0 +1,18 @@
+export function convertYoutubeUrlToEmbed(url: string): string | null {
+    const watchRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/;
+    const shortRegex = /(?:https?:\/\/)?youtu\.be\/([^?]+)/;
+  
+    const matchWatch = url.match(watchRegex);
+    const matchShort = url.match(shortRegex);
+  
+    if (matchWatch) {
+      return `https://www.youtube.com/embed/${matchWatch[1]}`;
+    }
+  
+    if (matchShort) {
+      return `https://www.youtube.com/embed/${matchShort[1]}`;
+    }
+  
+    return null;
+  }
+  

src/app/admin/(dashboard)/desa/gallery/lib/youtubeEmbed.tsx

@@ -0,0 +1,33 @@
+// components/YoutubeEmbed.tsx
+"use client";
+
+import { Box, Text } from "@mantine/core";
+
+type YoutubeEmbedProps = {
+  url?: string;
+  showRawUrl?: boolean; // opsional, buat nampilin URL mentahnya
+};
+
+export default function YoutubeEmbed({ url, showRawUrl = false }: YoutubeEmbedProps) {
+  if (!url || !url.includes("embed")) {
+    return <Text c="red">Link embed Youtube tidak valid</Text>;
+  }
+
+  return (
+    <Box>
+      <Box
+        component="iframe"
+        src={url}
+        width="100%"
+        height={300}
+        allowFullScreen
+        style={{ borderRadius: 8 }}
+      />
+      {showRawUrl && (
+        <Text fz="sm" c="dimmed" mt={5}>
+          {url}
+        </Text>
+      )}
+    </Box>
+  );
+}

src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx

@@ -3,18 +3,19 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Flex, Group, Image, Modal, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
+import { convertYoutubeUrlToEmbed } from '../../../lib/youtube-utils';
 
 
 
 function EditVideo() {
   const router = useRouter();
-  const [modalHapus, setModalHapus] = useState(false);
+  const [embedLink, setEmbedLink] = useState("");
   const videoState = useProxy(stateGallery.video)
   const params = useParams()
   const [formData, setFormData] = useState({
@@ -35,6 +36,8 @@ function EditVideo() {
             deskripsi: data.deskripsi || '',
             linkVideo: data.linkVideo || '',
           });
+          const embed = convertYoutubeUrlToEmbed(data.linkVideo);
+          setEmbedLink(embed || "");
         }
       } catch (error) {
         console.error('Error loading video:', error);
@@ -52,6 +55,11 @@ function EditVideo() {
         deskripsi: formData.deskripsi,
         linkVideo: formData.linkVideo,
       };
+      const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
+      if (!converted) {
+        toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
+        return;
+      }
       await videoState.update.update();
       toast.success('Video berhasil diperbarui!');
       router.push('/admin/desa/gallery/video');
@@ -85,22 +93,30 @@ function EditVideo() {
           />
           <Box>
             <TextInput
-              label={<Text fw={"bold"} fz={"sm"}>Link Video Youtube <Text span c="red" inherit>*</Text></Text>}
+              label="Link Video YouTube"
-              placeholder='Masukkan link video youtube'
+              placeholder="https://www.youtube.com/watch?v=abc123"
               value={formData.linkVideo}
-              onChange={(val) => {
+              onChange={(e) => {
                 setFormData({
                   ...formData,
-                  linkVideo: val.target.value,
+                  linkVideo: e.currentTarget.value,
                 })
+                const embed = convertYoutubeUrlToEmbed(e.currentTarget.value);
+                setEmbedLink(embed || "");
               }}
+              required
             />
-            <Flex pt={5} align={"center"} gap={"xs"}>
+
-              <Text c={"dimmed"} fw={"bold"} fz={"xs"}>Cara mendapatkan link video youtube</Text>
+            {embedLink && (
-              <ActionIcon size={"xs"} radius={"xl"} color='black' variant='filled' onClick={() => setModalHapus(true)}>
+              <iframe
-                <Text fw={"bold"} fz={"xs"} c="white">?</Text>
+                className="rounded"
-              </ActionIcon>
+                width="100%"
-            </Flex>
+                height="200"
+                src={embedLink}
+                title="Preview Video"
+                allowFullScreen
+              ></iframe>
+            )}
           </Box>
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
@@ -119,36 +135,6 @@ function EditVideo() {
           </Group>
         </Stack>
       </Paper>
-
-      {/* Modal Konfirmasi Hapus */}
-      <Modal
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        title={<Text fw={"bold"} fz={"xl"}>Cara mendapatkan link video youtube</Text>}
-      >
-        <Stack gap={"xs"}>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 1</Text>
-          <Text fz={"sm"}>Buka video youtube yang ingin Anda bagikan lalu klik icon titik tiga</Text>
-          <Image src="/video.png" w={300} alt="" />
-          </Box>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 2</Text>
-          <Text fz={"sm"}>Klik bagikan</Text>
-          <Image src="/Share.png" w={300} alt="" />
-          </Box>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 3</Text>
-          <Text fz={"sm"}>Klik dibagian sematkan</Text>
-          <Image src="/bagikanPostingan.png" w={300} alt="" />
-          </Box>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 4</Text>
-          <Text fz={"sm"}>Lalu copy pada bagaian srcnya aja</Text>
-          <Image src="/sematkan.png" w={300} alt="" />
-          </Box>
-        </Stack>
-      </Modal>
     </Box>
   );
 }

src/app/admin/(dashboard)/desa/gallery/video/[id]/page.tsx

@@ -9,6 +9,7 @@ import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
+
 function DetailVideo() {
   const videoState = useProxy(stateGallery.video)
   const [modalHapus, setModalHapus] = useState(false);
@@ -55,9 +56,17 @@ function DetailVideo() {
                   <Text fz={"lg"}>{videoState.findUnique.data?.name}</Text>
                 </Box>
                 <Box>
-                  <Text fw={"bold"} fz={"lg"}>Link Video</Text>
+                  <Text fw={"bold"} fz={"lg"}>Video</Text>
-                  <Text fz={"lg"}>{videoState.findUnique.data?.linkVideo}</Text>
+                  <Box component="iframe"
+                    src={convertToEmbedUrl(videoState.findUnique.data?.linkVideo)}
+                    width="100%"
+                    height={300}
+                    allowFullScreen
+                    style={{ borderRadius: 8 }}
+                  />
+
                 </Box>
+
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Tanggal Video</Text>
                   <Text fz={"lg"}>{new Date(videoState.findUnique.data?.createdAt).toDateString()}</Text>
@@ -105,7 +114,20 @@ function DetailVideo() {
         text='Apakah anda yakin ingin menghapus berita ini?'
       />
     </Box>
+
   );
+  function convertToEmbedUrl(youtubeUrl: string): string {
+    try {
+      const url = new URL(youtubeUrl);
+      const videoId = url.searchParams.get("v");
+      if (!videoId) return youtubeUrl;
+
+      return `https://www.youtube.com/embed/${videoId}`;
+    } catch (err) {
+      console.error("Error converting YouTube URL to embed:", err);
+      return youtubeUrl;
+    }
+  }
 }
 
 export default DetailVideo;

src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx

@@ -2,18 +2,21 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Flex, Group, Image, Modal, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
+import { convertYoutubeUrlToEmbed } from '../../lib/youtube-utils';
 
 
 
 function CreateVideo() {
   const videoState = useProxy(stateGallery.video)
   const router = useRouter();
-  const [modalHapus, setModalHapus] = useState(false);
+  const [link, setLink] = useState("");
+  const [embedLink, setEmbedLink] = useState("");
 
   const resetForm = () => {
     videoState.create.form = {
@@ -22,8 +25,12 @@ function CreateVideo() {
       linkVideo: "",
     };
   };
-
   const handleSubmit = async () => {
+    const converted = convertYoutubeUrlToEmbed(videoState.create.form.linkVideo);
+    if (!converted) {
+      toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
+      return;
+    }
     await videoState.create.create();
     resetForm();
     router.push("/admin/desa/gallery/video")
@@ -49,20 +56,28 @@ function CreateVideo() {
             }}
           />
           <Box>
-            <TextInput
+            <Stack gap={"xs"}>
-              label={<Text fw={"bold"} fz={"sm"}>Link Video Youtube <Text span c="red" inherit>*</Text></Text>}
+              <TextInput
-              placeholder='Masukkan link video youtube'
+                label="Link Video YouTube"
-              value={videoState.create.form.linkVideo}
+                placeholder="https://www.youtube.com/watch?v=abc123"
-              onChange={(val) => {
+                value={link}
-                videoState.create.form.linkVideo = val.target.value;
+                onChange={(e) => {
-              }}
+                  setLink(e.currentTarget.value);
-            />
+                  const embed = convertYoutubeUrlToEmbed(e.currentTarget.value);
-            <Flex pt={5} align={"center"} gap={"xs"}>
+                  setEmbedLink(embed || "");
-              <Text c={"dimmed"} fw={"bold"} fz={"xs"}>Cara mendapatkan link video youtube</Text>
+                }}
-              <ActionIcon size={"xs"} radius={"xl"} color='black' variant='filled' onClick={() => setModalHapus(true)}>
+                required
-                <Text fw={"bold"} fz={"xs"} c="white">?</Text>
+              />
-              </ActionIcon>
+
-            </Flex>
+              {embedLink && (
+                <iframe
+                  style={{ borderRadius: 10, width: "100%", height: 400 }}
+                  src={embedLink}
+                  title="Preview Video"
+                  allowFullScreen
+                ></iframe>
+              )}
+            </Stack>
           </Box>
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
@@ -78,36 +93,6 @@ function CreateVideo() {
           </Group>
         </Stack>
       </Paper>
-
-      {/* Modal Konfirmasi Hapus */}
-      <Modal
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        title={<Text fw={"bold"} fz={"xl"}>Cara mendapatkan link video youtube</Text>}
-      >
-        <Stack gap={"xs"}>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 1</Text>
-          <Text fz={"sm"}>Buka video youtube yang ingin Anda bagikan lalu klik icon titik tiga</Text>
-          <Image src="/video.png" w={300} alt="" />
-          </Box>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 2</Text>
-          <Text fz={"sm"}>Klik bagikan</Text>
-          <Image src="/Share.png" w={300} alt="" />
-          </Box>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 3</Text>
-          <Text fz={"sm"}>Klik dibagian sematkan</Text>
-          <Image src="/bagikanPostingan.png" w={300} alt="" />
-          </Box>
-          <Box>
-          <Text fw={"bold"} fz={"lg"}>Langkah 4</Text>
-          <Text fz={"sm"}>Lalu copy pada bagaian srcnya aja</Text>
-          <Image src="/sematkan.png" w={300} alt="" />
-          </Box>
-        </Stack>
-      </Modal>
     </Box>
   );
 }

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

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

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

@@ -1,40 +1,94 @@
-import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Group, Paper, Skeleton, Stack, Stepper, StepperCompleted, StepperStep, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import stateLayananDesa from '../../../_state/desa/layananDesa';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
 
 function PerizinanBerusaha() {
+  const router = useRouter()
+  const pelayananPerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
+  const [active, setActive] = useState(1);
+  const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
+  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+  useShallowEffect(() => {
+    pelayananPerizinanBerusaha.findById.load('1')
+  }, [])
+
+  if(!pelayananPerizinanBerusaha.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
+        <Paper bg={colors['BG-trans']} p={'md'}>
-          title='List Pelayanan Perizinan Berusaha'
+          <Box py={15}>
-          href='/admin/desa/layanan/pelayanan_perizinan_berusaha/create'
+            <Stack gap={"xs"}>
-          placeholder='pencarian'
+              <Grid>
-          searchIcon={<IconSearch size={16} />}
+                <GridCol span={{ base: 12, md: 11 }}>
-        />
+                  <Text fz={"h4"} fw={"bold"}>Preview Pelayanan Perizinan Berusaha</Text>
-        <Table striped withTableBorder withRowBorders>
+                </GridCol>
-          <TableThead>
+                <GridCol span={{ base: 12, md: 1 }}>
-            <TableTr>
+                  <Button bg={colors['blue-button']} onClick={() => router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha/edit')}>
-              <TableTh>Nama</TableTh>
+                    <IconEdit size={16} />
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            <TableTr>
-              <TableTd>Pelayanan Perizinan Berusaha</TableTd>
-              <TableTd>Deskripsi Pelayanan Perizinan Berusaha</TableTd>
-              <TableTd>
-                <Text>
-                  <Button>
-                    <IconDeviceImac size={20} />
                   </Button>
-                </Text>
+                </GridCol>
-              </TableTd>
+              </Grid>
-            </TableTr>
+            </Stack>
-          </TableTbody>
+          </Box>
-        </Table>
+            <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>{pelayananPerizinanBerusaha.findById.data.name}</Text>
+          <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }} dangerouslySetInnerHTML={{__html: pelayananPerizinanBerusaha.findById.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={pelayananPerizinanBerusaha.findById.data.link}>{pelayananPerizinanBerusaha.findById.data.link}</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
+          </Box>
+        </Paper>
       </Paper>
     </Box>
   );

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

@@ -0,0 +1,103 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditPelayananTelunjukSakti() {
+  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const router = useRouter()
+  const params = useParams()
+  const [formData, setFormData] = useState({
+    name: stateTelunjukDesa.edit.form.name,
+    deskripsi: stateTelunjukDesa.edit.form.deskripsi,
+    link: stateTelunjukDesa.edit.form.link,
+  })
+
+  useEffect(() => {
+    const loadPelayananTelunjukSakti = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await stateTelunjukDesa.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name,
+            deskripsi: data.deskripsi,
+            link: data.link,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pelayanan telunjuk sakti:", error);
+        toast.error("Gagal memuat data pelayanan telunjuk sakti");
+      }
+    };
+    loadPelayananTelunjukSakti();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateTelunjukDesa.edit.form = {
+        ...stateTelunjukDesa.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        link: formData.link,
+      }
+      await stateTelunjukDesa.edit.update()
+      toast.success("Pelayanan telunjuk sakti berhasil diperbarui!")
+      router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
+    } catch (error) {
+      console.error("Error updating pelayanan telunjuk sakti:", error);
+      toast.error("Terjadi kesalahan saat memperbarui pelayanan telunjuk sakti");
+    }
+  }
+
+  return (
+    <Box>
+          <Box mb={10}>
+            <Button variant="subtle" onClick={() => router.back()}>
+              <IconArrowBack color={colors['blue-button']} size={25} />
+            </Button>
+          </Box>
+          <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Edit Surat Keterangan</Title>
+              <TextInput
+                value={formData.name}
+                onChange={(val) => {
+                  setFormData({ ...formData, name: val.target.value });
+                }}
+                label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
+                placeholder="masukkan nama surat keterangan"
+              />
+              <TextInput
+                value={formData.link}
+                onChange={(val) => {
+                  setFormData({ ...formData, link: val.target.value });
+                }}
+                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>
+        </Box>
+  );
+}
+
+export default EditPelayananTelunjukSakti;

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

@@ -0,0 +1,109 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailPelayananTelunjukSakti() {
+  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    telunjukSaktiState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      telunjukSaktiState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
+    }
+  }
+
+  if (!telunjukSaktiState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Pelayanan Telunjuk Sakti Desa</Text>
+          {telunjukSaktiState.findUnique.data ? (
+            <Paper key={telunjukSaktiState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Link</Text>
+                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.link}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}dangerouslySetInnerHTML={{ __html: telunjukSaktiState.findUnique.data?.deskripsi }}></Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (telunjukSaktiState.findUnique.data) {
+                        setSelectedId(telunjukSaktiState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={telunjukSaktiState.delete.loading || !telunjukSaktiState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (telunjukSaktiState.findUnique.data) {
+                        router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${telunjukSaktiState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!telunjukSaktiState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailPelayananTelunjukSakti;

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

@@ -0,0 +1,70 @@
+'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';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function CreatePelayananTelunjukDesa() {
+  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateTelunjukDesa.create.form = {
+      name: "",
+      deskripsi: "",
+      link: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateTelunjukDesa.create.create()
+    resetForm()
+    router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
+
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Pelayanan Telunjuk Sakti Desa</Title>
+          <TextInput
+            value={stateTelunjukDesa.create.form.name}
+            onChange={(val) => {
+              stateTelunjukDesa.create.form.name = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Pelayanan Telunjuk Sakti Desa</Text>}
+            placeholder="masukkan nama pelayanan telunjuk sakti desa"
+          />
+          <TextInput
+            value={stateTelunjukDesa.create.form.link}
+            onChange={(val) => {
+              stateTelunjukDesa.create.form.link = val.target.value;
+            }}
+            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>
+    </Box>
+  );
+}
+
+export default CreatePelayananTelunjukDesa;

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

@@ -1,9 +1,29 @@
+'use client'
 import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+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 { useRouter } from 'next/navigation';
+
+function PelayananTelunjukSakti() {
+  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    telunjukSaktiState.findMany.load()
+  }, [])
+
+  if (!telunjukSaktiState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
 
-function SuratKeterangan() {
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -22,17 +42,19 @@ function SuratKeterangan() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
+            {telunjukSaktiState.findMany.data?.map((item) => (
-              <TableTd>Pelayanan Telunjuk Sakti Desa</TableTd>
+              <TableTr key={item.id}>
-              <TableTd>Deskripsi Pelayanan Telunjuk Sakti Desa</TableTd>
+              <TableTd>{item.name}</TableTd>
+              <TableTd><Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} /></TableTd>
               <TableTd>
                 <Text>
-                  <Button>
+                  <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`)}>
                     <IconDeviceImac size={20} />
                   </Button>
                 </Text>
               </TableTd>
             </TableTr>
+            ))}
           </TableTbody>
         </Table>
       </Paper>
@@ -40,4 +62,4 @@ function SuratKeterangan() {
   );
 }
 
-export default SuratKeterangan;
+export default PelayananTelunjukSakti;

src/app/api/[[...slugs]]/_lib/desa/layanan/index.ts

@@ -1,7 +1,13 @@
 import Elysia from "elysia";
 import PelayananSuratKeterangan from "./pelayanan_surat_keterangan";
+import PelayananTelunjukSaktiDesa from "./pelayanan_telunjuk_sakti_desa";
+import PelayananPerizinanBerusaha from "./pelayanan_perizinan_berusaha";
+import PelayananPendudukNonPermanen from "./pelayanan_penduduk_non_permanen";
 
 const LayananDesa = new Elysia({ prefix: "/layanan", tags: ["Desa/Layanan"] })
 .use(PelayananSuratKeterangan)
+.use(PelayananTelunjukSaktiDesa)
+.use(PelayananPerizinanBerusaha)
+.use(PelayananPendudukNonPermanen)
 
 export default LayananDesa

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_penduduk_non_permanen/findUnique.ts

@@ -0,0 +1,60 @@
+import prisma from "@/lib/prisma";
+
+export default async function pelayananPendudukNonPermanenFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split("/");
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return Response.json(
+            {
+                success: false,
+                message: "ID tidak boleh kosong",
+            },
+            { status: 400 }
+        );
+    }
+
+    try {
+        if (typeof id !== "string") {
+            return Response.json(
+                {
+                    success: false,
+                    message: "ID tidak valid",
+                },
+                { status: 400 }
+            );
+        }
+        const data = await prisma.pelayananPendudukNonPermanen.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return Response.json(
+                {
+                    success: false,
+                    message: "Pelayanan penduduk non permanen tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        return Response.json(
+            {
+                success: true,
+                message: "Success fetch pelayanan penduduk non permanen by ID",
+                data,
+            },
+            { status: 200 }
+        );
+    } catch (e) {
+        console.error("Find by ID error:", e);
+        return Response.json(
+            {
+                success: false,
+                message: "Gagal mengambil pelayanan penduduk non permanen: " + (e instanceof Error ? e.message : 'Unknown error'),
+            },
+            { status: 500 }
+        );
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_penduduk_non_permanen/index.ts

@@ -0,0 +1,20 @@
+import Elysia, { t } from "elysia";
+import pelayananPendudukNonPermanenFindUnique from "./findUnique";
+import pelayananPendudukNonPermanenUpdate from "./updt";
+
+const PelayananPendudukNonPermanen = new Elysia({ prefix: "/pelayananpenduduknonpermanen", tags: ["Desa/Layanan/Pelayanan Penduduk Non Permanen"] })
+.get("/:id", async (context) => {
+    const response = await pelayananPendudukNonPermanenFindUnique(new Request(context.request));
+    return response;
+})
+.put("/:id", async (context) => {
+    const response = await pelayananPendudukNonPermanenUpdate(context);
+    return response;
+},
+{
+    body: t.Object({
+        name: t.String(),
+        deskripsi: t.String(),
+    }),
+})
+export default PelayananPendudukNonPermanen;

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_penduduk_non_permanen/updt.ts

@@ -0,0 +1,72 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormUpdate = Prisma.PelayananPendudukNonPermanenGetPayload<{
+    select: {
+        name: true;
+        deskripsi: true;
+    };
+}>;
+export default async function pelayananPendudukNonPermanenUpdate(context: Context) {
+    try {
+        const id = context.params?.id;
+        const body = (await context.body) as Omit<FormUpdate, "id">;
+
+        const { name, deskripsi } = body;
+
+        if (!id) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "ID tidak diberikan",
+            }), {
+                status: 400,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+        }
+        const existing = await prisma.pelayananPendudukNonPermanen.findUnique({
+            where: { id },
+        });
+
+        if (!existing) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "Pelayanan penduduk non permanen tidak ditemukan",
+            }), {
+                status: 404,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+        }
+
+        const updated = await prisma.pelayananPendudukNonPermanen.update({
+            where: { id },
+            data: { name, deskripsi },
+        });
+
+        return new Response(JSON.stringify({
+            success: true,
+            message: "Success update pelayanan penduduk non permanen",
+            data: updated,
+        }), {
+            status: 200,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    } catch (e) {
+        console.error("Update error:", e);
+        return new Response(JSON.stringify({
+            success: false,
+            message: "Gagal mengupdate pelayanan penduduk non permanen: " + (e instanceof Error ? e.message : 'Unknown error'),
+        }), {
+            status: 500,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_perizinan_berusaha/findUnique.ts

@@ -0,0 +1,64 @@
+import prisma from "@/lib/prisma";
+
+export default async function pelayananPerizinanBerusahaFindUnique(
+  request: Request
+) {
+  const url = new URL(request.url);
+  const pathSegments = url.pathname.split("/");
+  const id = pathSegments[pathSegments.length - 1];
+
+  if (!id) {
+    return Response.json(
+      {
+        success: false,
+        message: "ID tidak boleh kosong",
+      },
+      { status: 400 }
+    );
+  }
+
+  try {
+    if (typeof id !== "string") {
+      return Response.json(
+        {
+          success: false,
+          message: "ID tidak valid",
+        },
+        { status: 400 }
+      );
+    }
+    const data = await prisma.pelayananPerizinanBerusaha.findUnique({
+      where: { id },
+    });
+
+    if (!data) {
+      return Response.json(
+        {
+          success: false,
+          message: "Pelayanan perizinan berusaha tidak ditemukan",
+        },
+        { status: 404 }
+      );
+    }
+
+    return Response.json(
+      {
+        success: true,
+        message: "Success fetch pelayanan perizinan berusaha by ID",
+        data,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Find by ID error:", error);
+    return Response.json(
+      {
+        success: false,
+        message:
+          "Gagal mengambil pelayanan perizinan berusaha: " +
+          (error instanceof Error ? error.message : "Unknown error"),
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_perizinan_berusaha/index.ts

@@ -0,0 +1,21 @@
+import Elysia, { t } from "elysia";
+import pelayananPerizinanBerusahaFindUnique from "./findUnique";
+import pelayananPerizinanBerusahaUpdate from "./updt";
+
+const PelayananPerizinanBerusaha = new Elysia({ prefix: "/pelayananperizinanberusaha", tags: ["Desa/Layanan/Pelayanan Perizinan Berusaha"] })
+.get("/:id", async (context) => {
+    const response = await pelayananPerizinanBerusahaFindUnique(new Request(context.request));
+    return response;
+})
+.put("/:id", async (context) => {
+    const response = await pelayananPerizinanBerusahaUpdate(context);
+    return response;
+},
+{
+    body: t.Object({
+        name: t.String(),
+        deskripsi: t.String(),
+        link: t.String(),
+    }),
+})
+export default PelayananPerizinanBerusaha;

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_perizinan_berusaha/updt.ts

@@ -0,0 +1,77 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormUpdate = Prisma.PelayananPerizinanBerusahaGetPayload<{
+    select: {
+        name: true;
+        deskripsi: true;
+        link: true;
+    };
+}>;
+export default async function pelayananPerizinanBerusahaUpdate(context: Context) {
+    try {
+        const id = context.params?.id;
+        const body = (await context.body) as Omit<FormUpdate, "id">;
+
+        const { name, deskripsi, link } = body;
+
+        if (!id) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "ID tidak diberikan",
+            }), {
+                status: 400,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+        }
+        const existing = await prisma.pelayananPerizinanBerusaha.findUnique({
+            where: { id },
+        });
+
+        if (!existing) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "Pelayanan perizinan berusaha tidak ditemukan",
+            }), {
+                status: 404,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+        }
+
+        const updated = await prisma.pelayananPerizinanBerusaha.update({
+            where: { id },
+            data: {
+                name,
+                deskripsi,
+                link,
+            },
+        });
+
+        return new Response(JSON.stringify({
+            success: true,
+            message: "Success update pelayanan perizinan berusaha",
+            data: updated,
+        }), {
+            status: 200,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    } catch (error) {
+        console.error("Error updating pelayanan perizinan berusaha:", error);
+        return new Response(JSON.stringify({
+            success: false,
+            message: "Terjadi kesalahan saat mengupdate pelayanan perizinan berusaha",
+        }), {
+            status: 500,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_telunjuk_sakti_desa/create.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.PelayananTelunjukSaktiDesaGetPayload<{
+    select: {
+        name: true;
+        deskripsi: true;
+        link: true;
+    };
+}>;
+export default async function pelayananTelunjukSaktiDesaCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.pelayananTelunjukSaktiDesa.create({
+        data: {
+            name: body.name,
+            deskripsi: body.deskripsi,
+            link: body.link,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create pelayanan telunjuk sakti desa",
+        data: {
+            ...body,
+        },
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_telunjuk_sakti_desa/del.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function pelayananTelunjukSaktiDesaDelete(context: Context) {
+    const id = context.params?.id as string;
+
+    if (!id) {
+        return {
+            status: 400,
+            body: "ID tidak diberikan",
+        };
+    }
+
+    const pelayananTelunjukSaktiDesa = await prisma.pelayananTelunjukSaktiDesa.findUnique({
+        where: { id },
+    });
+
+    if (!pelayananTelunjukSaktiDesa) {
+        return {
+            status: 404,
+            body: "Pelayanan telunjuk sakti desa tidak ditemukan",
+        };
+    }
+
+    await prisma.pelayananTelunjukSaktiDesa.delete({
+        where: { id },
+    });
+
+    return {
+        status: 200,
+        body: "Pelayanan telunjuk sakti desa berhasil dihapus",
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_telunjuk_sakti_desa/find-many.ts

@@ -0,0 +1,21 @@
+import prisma from "@/lib/prisma";
+
+export default async function pelayananTelunjukSaktiDesaFindMany() {
+    try {
+        const data = await prisma.pelayananTelunjukSaktiDesa.findMany({
+            where: { isActive: true },
+        });
+
+        return {
+            success: true,
+            message: "Success fetch pelayanan telunjuk sakti desa",
+            data,
+        };
+    } catch (e) {
+        console.error("Find many error:", e);
+        return {
+            success: false,
+            message: "Failed fetch pelayanan telunjuk sakti desa",
+        };
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_telunjuk_sakti_desa/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function pelayananTelunjukSaktiDesaFindUnique(request: Request){
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+
+    if(!id){
+        return Response.json({
+            success: false,
+            message: "ID tidak boleh kosong",
+        }, { status: 400 });
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, { status: 400 });
+        }
+
+        const data = await prisma.pelayananTelunjukSaktiDesa.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Pelayanan telunjuk sakti desa tidak ditemukan",
+            }, { status: 404 });
+        }
+
+        return Response.json({
+            success: true,
+            message: "Success fetch pelayanan telunjuk sakti desa by ID",
+            data,
+        }, { status: 200 });
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return Response.json({
+            success: false,
+            message: "Gagal mengambil pelayanan telunjuk sakti desa: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }, { status: 500 });
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_telunjuk_sakti_desa/index.ts

@@ -0,0 +1,33 @@
+import Elysia, { t } from "elysia";
+import pelayananTelunjukSaktiDesaFindUnique from "./findUnique";
+import pelayananTelunjukSaktiDesaUpdate from "./updt";
+import pelayananTelunjukSaktiDesaCreate from "./create";
+import pelayananTelunjukSaktiDesaDelete from "./del";
+import pelayananTelunjukSaktiDesaFindMany from "./find-many";
+
+const pelayananTelunjukSaktiDesa = new Elysia({ prefix: "/pelayanantelunjuksaktidesa", tags: ["Desa/Layanan/Pelayanan Telunjuk Sakti Desa"] })
+.get("/find-many", pelayananTelunjukSaktiDesaFindMany)
+.get("/:id", async (context) => {
+    const response = await pelayananTelunjukSaktiDesaFindUnique(new Request(context.request));
+    return response;
+})
+.put("/:id", async (context) => {
+    const response = await pelayananTelunjukSaktiDesaUpdate(context);
+    return response;
+},
+{
+    body: t.Object({
+        name: t.String(),
+        deskripsi: t.String(),
+        link: t.String(),
+    }),
+})
+.post("/create", pelayananTelunjukSaktiDesaCreate, {
+    body: t.Object({
+        name: t.String(),
+        deskripsi: t.String(),
+        link: t.String(),
+    }),
+})
+.delete("/:id", pelayananTelunjukSaktiDesaDelete)
+export default pelayananTelunjukSaktiDesa;

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_telunjuk_sakti_desa/updt.ts

@@ -0,0 +1,83 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormUpdate = Prisma.PelayananTelunjukSaktiDesaGetPayload<{
+    select: {
+        name: true;
+        deskripsi: true;
+        link: true;
+    };
+}>;
+export default async function pelayananTelunjukSaktiDesaUpdate(context: Context) {
+    try {
+        const id = context.params?.id;
+        const body = (await context.body) as Omit<FormUpdate, "id">;
+
+        const { name, deskripsi, link } = body;
+
+        if (!id) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "ID tidak diberikan",
+            }), {
+                status: 400,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+        }
+
+        const data = await prisma.pelayananTelunjukSaktiDesa.update({
+            where: { id },
+            data: {
+                name,
+                deskripsi,
+                link,
+            },
+        });
+
+        if (!data) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "Gagal update pelayanan telunjuk sakti desa",
+            }), {
+                status: 404,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+        }
+
+        const updated = await prisma.pelayananTelunjukSaktiDesa.update({
+            where: { id },
+            data: {
+                name,
+                deskripsi,
+                link,
+            },
+        });
+
+        return new Response(JSON.stringify({
+            success: true,
+            message: "Success update pelayanan telunjuk sakti desa",
+            data: updated,
+        }), {
+            status: 200,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    } catch (error) {
+        console.error(error);
+        return new Response(JSON.stringify({
+            success: false,
+            message: "Gagal update pelayanan telunjuk sakti desa",
+        }), {
+            status: 500,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+}