API & UI Menu Landing Page, Submenu SDGs Desa & APBDes

src/app/admin/(dashboard)/_state/landing-page/apbdes.ts

@@ -0,0 +1,242 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateapbDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+  fileId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultapbdesForm = {
+  name: "",
+  jumlah: "",
+  imageId: "",
+  fileId: "",
+};
+
+const apbdes = proxy({
+  create: {
+    form: { ...defaultapbdesForm },
+    loading: false,
+    async create() {
+      const cek = templateapbDesaForm.safeParse(
+        apbdes.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        apbdes.create.loading = true;
+        const res = await ApiFetch.api.landingpage.apbdes[
+          "create"
+        ].post({
+          ...apbdes.create.form,
+        });
+
+        if (res.status === 200) {
+          apbdes.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        apbdes.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.APBDesGetPayload<{
+        include: {
+          image: true;
+          file: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.apbdes[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        apbdes.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.APBDesGetPayload<{
+      include: {
+        image: true;
+        file: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/apbdes/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          apbdes.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          apbdes.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        apbdes.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        apbdes.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/apbdes/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "apbdes berhasil dihapus");
+          await apbdes.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus apbdes");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus apbdes");
+      } finally {
+        apbdes.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultapbdesForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        apbdes.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/apbdes/${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,
+            jumlah: data.jumlah,
+            imageId: data.imageId,
+            fileId: data.fileId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading apbdes:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        apbdes.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateapbDesaForm.safeParse(
+        apbdes.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        apbdes.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/apbdes/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              jumlah: this.form.jumlah,
+              imageId: this.form.imageId,
+              fileId: this.form.fileId,
+            }),
+          }
+        );
+        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("Berhasil update apbdes");
+          await apbdes.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate apbdes"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating apbdes:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate apbdes"
+        );
+        return false;
+      } finally {
+        apbdes.edit.loading = false;
+      }
+    },
+    reset() {
+      apbdes.edit.id = "";
+      apbdes.edit.form = { ...defaultapbdesForm };
+    },
+  },
+});
+
+export default apbdes;

src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts

@@ -0,0 +1,236 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templatesdgsDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultsdgsDesaForm = {
+  name: "",
+  jumlah: "",
+  imageId: "",
+};
+
+const sdgsDesa = proxy({
+  create: {
+    form: { ...defaultsdgsDesaForm },
+    loading: false,
+    async create() {
+      const cek = templatesdgsDesaForm.safeParse(
+        sdgsDesa.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        sdgsDesa.create.loading = true;
+        const res = await ApiFetch.api.landingpage.sdgsdesa[
+          "create"
+        ].post({
+          ...sdgsDesa.create.form,
+        });
+
+        if (res.status === 200) {
+          sdgsDesa.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        sdgsDesa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.SDGSDesaGetPayload<{
+        include: {
+          image: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.sdgsdesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        sdgsDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.SDGSDesaGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/sdgsdesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          sdgsDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          sdgsDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        sdgsDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        sdgsDesa.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/sdgsdesa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "sdgs desa berhasil dihapus");
+          await sdgsDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus sdgs desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus sdgs desa");
+      } finally {
+        sdgsDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultsdgsDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        sdgsDesa.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/sdgsdesa/${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,
+            jumlah: data.jumlah,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading sdgs desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        sdgsDesa.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templatesdgsDesaForm.safeParse(
+        sdgsDesa.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        sdgsDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/sdgsdesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              jumlah: this.form.jumlah,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+        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("Berhasil update sdgs desa");
+          await sdgsDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate sdgs desa"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating sdgs desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate sdgs desa"
+        );
+        return false;
+      } finally {
+        sdgsDesa.edit.loading = false;
+      }
+    },
+    reset() {
+      sdgsDesa.edit.id = "";
+      sdgsDesa.edit.form = { ...defaultsdgsDesaForm };
+    },
+  },
+});
+
+export default sdgsDesa;

src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx

@@ -0,0 +1,258 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+
+import apbdes from "@/app/admin/(dashboard)/_state/landing-page/apbdes";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { IconArrowBack, IconFile, IconImageInPicture, IconUpload, IconX } 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 EditAPBDes() {
+  const apbdesState = useProxy(apbdes);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewDoc, setPreviewDoc] = useState<string | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [docFile, setDocFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: apbdesState.edit.form.name || '',
+    jumlah: apbdesState.edit.form.jumlah || '',
+    imageId: apbdesState.edit.form.imageId || '',
+    fileId: apbdesState.edit.form.fileId || ''
+  });
+
+  // Load sdgs desa by id saat pertama kali
+  useEffect(() => {
+    const loadKolaborasi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await apbdesState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            jumlah: data.jumlah || '',
+            imageId: data.imageId || '',
+            fileId: data.fileId || ''
+          });
+          if (data.image) {
+            if (data?.image?.link) {
+              setPreviewImage(data.image.link);
+            }
+          }
+          if (data.file) {
+            if (data?.file?.link) {
+              setPreviewDoc(data.file.link);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error loading apbdes:", error);
+        toast.error("Gagal memuat data apbdes");
+      }
+    };
+
+    loadKolaborasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+
+    try {
+      // edit global state with form data
+      apbdesState.edit.form = {
+        ...apbdesState.edit.form,
+        name: formData.name,
+        jumlah: formData.jumlah,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file image baru, upload
+      if (imageFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // edit imageId in global state
+        apbdesState.edit.form.imageId = uploaded.id;
+      }
+
+      // Jika ada file doc baru, upload
+      if (docFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload doc");
+        }
+
+        // edit fileId in global state
+        apbdesState.edit.form.fileId = uploaded.id;
+      }
+
+      await apbdesState.edit.update();
+      toast.success("apbdes berhasil diperbarui!");
+      router.push("/admin/landing-page/APBDes");
+    } catch (error) {
+      console.error("Error updating apbdes:", error);
+      toast.error("Terjadi kesalahan saat memperbarui apbdes");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit APBDes</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
+            placeholder="masukkan nama"
+          />
+
+          <TextInput
+            value={formData.jumlah}
+            onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setImageFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih image
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Image</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Doc</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setDocFile(selectedFile);
+                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format doc
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewDoc ? (
+                  <iframe
+                    src={previewDoc}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada doc tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditAPBDes;

src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx

@@ -0,0 +1,126 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { ActionIcon, Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconFile, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import apbdes from '../../../_state/landing-page/apbdes';
+
+function DetailAPBDes() {
+  const apbdesState = useProxy(apbdes)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    apbdesState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      apbdesState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/APBDes")
+    }
+  }
+
+  if (!apbdesState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton 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 APBDes</Text>
+          {apbdesState.findUnique.data ? (
+            <Paper key={apbdesState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama APBDes</Text>
+                  <Text fz={"lg"}>{apbdesState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah</Text>
+                  <Text fz={"lg"}>{apbdesState.findUnique.data?.jumlah}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={apbdesState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                  {apbdesState.findUnique.data?.file?.link ? (
+                    <ActionIcon
+                      component="a"
+                      href={apbdesState.findUnique.data.file.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      variant="transparent"
+                    >
+                      <IconFile size={25} color={colors['blue-button']}/>
+                    </ActionIcon>
+                  ) : (
+                    <Text>Tidak ada dokumen tersedia</Text>
+                  )}
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (apbdesState.findUnique.data) {
+                        setSelectedId(apbdesState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={apbdesState.delete.loading || !apbdesState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (apbdesState.findUnique.data) {
+                        router.push(`/admin/landing-page/APBDes/${apbdesState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!apbdesState.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 APBDes ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailAPBDes;

src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx

@@ -0,0 +1,215 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconFile, IconImageInPicture, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import apbdes from '../../../_state/landing-page/apbdes';
+
+
+function CreateAPBDes() {
+  const router = useRouter();
+  const stateAPBDes = useProxy(apbdes)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewDoc, setPreviewDoc] = useState<string | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [docFile, setDocFile] = useState<File | null>(null);
+  
+
+
+  useEffect(() => {
+    stateAPBDes.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateAPBDes.create.form = {
+      name: "",
+      jumlah: "",
+      imageId: "",
+      fileId: "",
+    };
+    setImageFile(null);
+    setDocFile(null);
+    setPreviewImage(null);
+  };
+  const handleSubmit = async () => {
+    if (!imageFile || !docFile) {
+      return toast.warn("Pilih gambar dan dokumen terlebih dahulu");
+    }
+  
+    try {
+      const [uploadImageRes, uploadDocRes] = await Promise.all([
+        ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name }),
+        ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name }),
+      ]);
+  
+      const imageId = uploadImageRes?.data?.data?.id;
+      const fileId = uploadDocRes?.data?.data?.id;
+  
+      if (!imageId || !fileId) {
+        return toast.error("Gagal mengupload file");
+      }
+  
+      stateAPBDes.create.form.imageId = imageId;
+      stateAPBDes.create.form.fileId = fileId;
+  
+      await stateAPBDes.create.create();
+  
+      toast.success("Berhasil menambahkan APBDes");
+      resetForm();
+      router.push("/admin/landing-page/APBDes");
+    } catch (error) {
+      console.error("Gagal submit:", error);
+      toast.error("Gagal menyimpan data");
+    }
+  };
+  
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create APBDes</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setImageFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Dokumen</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setDocFile(selectedFile);
+                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format dokumen
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewDoc ? (
+                  <iframe
+                    src={previewDoc}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada dokumen tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateAPBDes.create.form.name}
+            onChange={(val) => {
+              stateAPBDes.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+           <TextInput
+           type='number'
+            value={stateAPBDes.create.form.jumlah}
+            onChange={(val) => {
+              stateAPBDes.create.form.jumlah = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
+            placeholder='Masukkan jumlah'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateAPBDes;

src/app/admin/(dashboard)/landing-page/apbdes/page.tsx

@@ -1,11 +1,113 @@
-import React from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { ActionIcon, Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconFile, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import apbdes from '../../_state/landing-page/apbdes';
 
-function Page() {
+
+function APBDes() {
+  const [search, setSearch] = useState('');
   return (
-    <div>
-      APBDes
-    </div>
+    <Box>
+      <HeaderSearch
+        title='APBDes'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListAPBDes search={search} />
+    </Box>
   );
 }
 
-export default Page;
+function ListAPBDes({ search }: { search: string }) {
+  const listState = useProxy(apbdes)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.jumlah.toLowerCase().includes(keyword)
+    )
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List APBDes'
+            href='/admin/landing-page/APBDes/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama APBDes</TableTh>
+                  <TableTh>Jumlah APBDes</TableTh>
+                  <TableTh>Document</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
+                    </TableTd>
+                    <TableTd>
+                      {item.file?.link ? (
+                        <ActionIcon
+                          component="a"
+                          href={item.file.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          variant='transparent'
+                        >
+                          <IconFile size={25} color={colors['blue-button']}/>
+                        </ActionIcon>
+                      ) : (
+                        <Text>Tidak ada dokumen tersedia</Text>
+                      )}
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/APBDes/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default APBDes;

src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/edit/page.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import sdgsDesa from "@/app/admin/(dashboard)/_state/landing-page/sdgs-desa";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { IconArrowBack, IconImageInPicture, IconUpload, IconX } 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 EditKolaborasiInovasi() {
+  const sdgsState = useProxy(sdgsDesa);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: sdgsState.edit.form.name || '',
+    jumlah: sdgsState.edit.form.jumlah || '',
+    imageId: sdgsState.edit.form.imageId || ''
+  });
+
+  // Load sdgs desa by id saat pertama kali
+  useEffect(() => {
+    const loadKolaborasi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await sdgsState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            jumlah: data.jumlah || '',
+            imageId: data.imageId || '',
+          });
+          if (data.image) {
+            if (data?.image?.link) {
+              setPreviewImage(data.image.link);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error loading sdgs desa:", error);
+        toast.error("Gagal memuat data sdgs desa");
+      }
+    };
+
+    loadKolaborasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+
+    try {
+      // edit global state with form data
+      sdgsState.edit.form = {
+        ...sdgsState.edit.form,
+        name: formData.name,
+        jumlah: formData.jumlah,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // edit imageId in global state
+        sdgsState.edit.form.imageId = uploaded.id;
+      }
+
+      await sdgsState.edit.update();
+      toast.success("sdgs desa berhasil diperbarui!");
+      router.push("/admin/landing-page/SDGs-Desa");
+    } catch (error) {
+      console.error("Error updating sdgs desa:", error);
+      toast.error("Terjadi kesalahan saat memperbarui sdgs desa");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit SDGs Desa</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
+            placeholder="masukkan nama"
+          />
+
+          <TextInput
+            value={formData.jumlah}
+            onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKolaborasiInovasi;

src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/page.tsx

@@ -0,0 +1,110 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Flex, Image, 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 colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import sdgsDesa from '../../../_state/landing-page/sdgs-desa';
+
+function DetailSDGSDesa() {
+  const sdgsState = useProxy(sdgsDesa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    sdgsState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      sdgsState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/SDGs-Desa")
+    }
+  }
+
+  if (!sdgsState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton 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 SDGS Desa</Text>
+          {sdgsState.findUnique.data ? (
+            <Paper key={sdgsState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama SDGS Desa</Text>
+                  <Text fz={"lg"}>{sdgsState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah</Text>
+                  <Text fz={"lg"}>{sdgsState.findUnique.data?.jumlah}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={sdgsState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (sdgsState.findUnique.data) {
+                        setSelectedId(sdgsState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={sdgsState.delete.loading || !sdgsState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (sdgsState.findUnique.data) {
+                        router.push(`/admin/landing-page/SDGs-Desa/${sdgsState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!sdgsState.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 SDGS Desa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailSDGSDesa;

src/app/admin/(dashboard)/landing-page/sdgs-desa/create/page.tsx

@@ -0,0 +1,148 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import sdgsDesa from '../../../_state/landing-page/sdgs-desa';
+
+
+function CreateSDGsDesa() {
+  const router = useRouter();
+  const stateSDGSDesa = useProxy(sdgsDesa)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+
+  useEffect(() => {
+    stateSDGSDesa.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateSDGSDesa.create.form = {
+      name: "",
+      jumlah: "",
+      imageId: "",
+    };
+    setFile(null);
+    setPreviewImage(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file image terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateSDGSDesa.create.form.imageId = uploaded.id;
+
+    await stateSDGSDesa.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/SDGs-Desa")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create SDGs Desa</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateSDGSDesa.create.form.name}
+            onChange={(val) => {
+              stateSDGSDesa.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+           <TextInput
+           type='number'
+            value={stateSDGSDesa.create.form.jumlah}
+            onChange={(val) => {
+              stateSDGSDesa.create.form.jumlah = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
+            placeholder='Masukkan jumlah'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateSDGsDesa;

src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx

@@ -1,11 +1,97 @@
-import React from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import sdgsDesa from '../../_state/landing-page/sdgs-desa';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+
+function SdgsDesa() {
+  const [search, setSearch] = useState('');
   return (
-    <div>
-      SDGS Desa
-    </div>
+    <Box>
+      <HeaderSearch
+        title='SDGs Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListSdgsDesa search={search} />
+    </Box>
   );
 }
 
-export default Page;
+function ListSdgsDesa({ search }: { search: string }) {
+  const listState = useProxy(sdgsDesa)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.jumlah.toLowerCase().includes(keyword)
+    )
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='SDGs Desa'
+            href='/admin/landing-page/SDGs-Desa/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama SDGs Desa</TableTh>
+                  <TableTh>Jumlah SDGs Desa</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/SDGs-Desa/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default SdgsDesa;

src/app/admin/_com/list_PageAdmin.tsx

@@ -22,12 +22,12 @@ export const navBar = [
       {
         id: "Landing_Page_4",
         name: "SDGs Desa",
-        path: "/admin/landing-page/sdgs-desa"
+        path: "/admin/landing-page/SDGs-Desa"
       },
       {
         id: "Landing_Page_5",
         name: "APBDes",
-        path: "/admin/landing-page/apbdes"
+        path: "/admin/landing-page/APBDes"
       },
       {
         id: "Landing_Page_6",

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/create.ts

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  name: string;
+  jumlah: string;
+  imageId: string;
+  fileId: string;
+};
+
+export default async function apbdesCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  try {
+    const result = await prisma.aPBDes.create({
+      data: {
+        name: body.name,
+        jumlah: body.jumlah,
+        imageId: body.imageId,
+        fileId: body.fileId,
+      },
+      include: {
+        image: true,
+        file: true,
+      },
+    });
+    return {
+      success: true,
+      message: "Berhasil membuat APB Des",
+      data: result,
+    };
+  } catch (error) {
+    console.error("Error creating APB Des:", error);
+    throw new Error("Gagal membuat APB Des: " + (error as Error).message);
+  }
+}

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/del.ts

@@ -0,0 +1,21 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function apbdesDelete(context: Context) {
+  const { params } = context;
+  const id = params?.id as string;
+
+  if (!id) {
+    throw new Error("ID tidak ditemukan dalam parameter");
+  }
+
+  const deleted = await prisma.aPBDes.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Berhasil menghapus APB Des",
+    data: deleted,
+  };
+}

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts

@@ -0,0 +1,44 @@
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function apbdesFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.aPBDes.findMany({
+        where: { isActive: true },
+        include: {
+          image: true,
+          file: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" }, // opsional, kalau mau urut berdasarkan waktu
+      }),
+      prisma.aPBDes.count({
+        where: { isActive: true },
+      }),
+    ]);
+
+    return {
+      success: true,
+      message: "Success fetch APB Des with pagination",
+      data,
+      page,
+      totalPages: Math.ceil(total / limit),
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch APB Des with pagination",
+    };
+  }
+}
+
+export default apbdesFindMany;

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findUnique.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function apbdesFindUnique(context: Context) {
+  const { params } = context;
+  const id = params?.id as string;
+
+  if (!id) {
+    throw new Error("ID tidak ditemukan dalam parameter");
+  }
+
+  const data = await prisma.aPBDes.findUnique({
+    where: { id },
+    include: {
+      image: true,
+      file: true,
+    },
+  });
+
+  if (!data) {
+    throw new Error("APB Des tidak ditemukan");
+  }
+
+  return {
+    success: true,
+    message: "Data APB Des ditemukan",
+    data,
+  };
+}

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/index.ts

@@ -0,0 +1,41 @@
+import Elysia, { t } from "elysia";
+import apbdesCreate from "./create";
+import apbdesDelete from "./del";
+import apbdesFindMany from "./findMany";
+import apbdesFindUnique from "./findUnique";
+import apbdesUpdate from "./updt";
+
+const APBDes = new Elysia({
+  prefix: "/apbdes",
+  tags: ["Landing Page/Profile/APB Des"],
+})
+
+  // ✅ Find all
+  .get("/find-many", apbdesFindMany)
+
+  // ✅ Find by ID
+  .get("/:id", apbdesFindUnique)
+
+  // ✅ Create
+  .post("/create", apbdesCreate, {
+    body: t.Object({
+      name: t.String(),
+      imageId: t.String(),
+      fileId: t.String(),
+      jumlah: t.String(),
+    }),
+  })
+
+  // ✅ Update
+  .put("/:id", apbdesUpdate, {
+    body: t.Object({
+      name: t.String(),
+      imageId: t.Optional(t.String()),
+      fileId: t.Optional(t.String()),
+      jumlah: t.Optional(t.String()),
+    }),
+  })
+  // ✅ Delete
+  .delete("/del/:id", apbdesDelete);
+
+export default APBDes;

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/updt.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdateAPBDes = {
+  name?: string;
+  imageId?: string;
+  fileId?: string;
+  jumlah?: string;
+};
+
+export default async function apbdesUpdate(context: Context) {
+  const body = context.body as FormUpdateAPBDes;
+
+  const id = context.params.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID APB Des wajib diisi",
+    };
+  }
+
+  try {
+    const updated = await prisma.aPBDes.update({
+      where: { id },
+      data: {
+        name: body.name,
+        imageId: body.imageId,
+        fileId: body.fileId,
+        jumlah: body.jumlah,
+      },
+      include: {
+        image: true,
+      },
+    });
+
+    return {
+      success: true,
+      message: "APB Des berhasil diperbarui",
+      data: updated,
+    };
+  } catch (error: any) {
+    console.error("❌ Error update APB Des:", error);
+    return {
+      success: false,
+      message: "Gagal memperbarui data APB Des",
+      error: error.message,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/landing_page/index.ts

@@ -4,6 +4,8 @@ import ProgramInovasi from "./profile/program-inovasi";
 import PejabatDesa from "./profile/pejabat-desa";
 import KategoriDesaAntiKorupsi from "./desa-anti-korupsi/kategori-dak";
 import DesaAntiKorupsi from "./desa-anti-korupsi";
+import SDGSDesa from "./sdgs-desa";
+import APBDes from "./apbdes";
 
 const LandingPage = new Elysia({
     prefix: "/api/landingpage",
@@ -15,5 +17,7 @@ const LandingPage = new Elysia({
 .use(PejabatDesa)
 .use(KategoriDesaAntiKorupsi)
 .use(DesaAntiKorupsi)
+.use(SDGSDesa)
+.use(APBDes)
 
 export default LandingPage

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/create.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  name: string;
+  jumlah: string;
+  imageId: string;
+};
+
+export default async function sdgsDesaCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  try {
+    const result = await prisma.sDGSDesa.create({
+      data: {
+        name: body.name,
+        jumlah: body.jumlah,
+        imageId: body.imageId,
+      },
+      include: {
+        image: true,
+      },
+    });
+    return {
+      success: true,
+      message: "Berhasil membuat SDGS Desa",
+      data: result,
+    };
+  } catch (error) {
+    console.error("Error creating SDGS Desa:", error);
+    throw new Error("Gagal membuat SDGS Desa: " + (error as Error).message);
+  }
+}

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/del.ts

@@ -0,0 +1,21 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function sdgsDesaDelete(context: Context) {
+  const { params } = context;
+  const id = params?.id as string;
+
+  if (!id) {
+    throw new Error("ID tidak ditemukan dalam parameter");
+  }
+
+  const deleted = await prisma.sDGSDesa.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Berhasil menghapus SDGS Desa",
+    data: deleted,
+  };
+}

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/findMany.ts

@@ -0,0 +1,43 @@
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function sdgsDesaFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.sDGSDesa.findMany({
+        where: { isActive: true },
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" }, // opsional, kalau mau urut berdasarkan waktu
+      }),
+      prisma.sDGSDesa.count({
+        where: { isActive: true },
+      }),
+    ]);
+
+    return {
+      success: true,
+      message: "Success fetch SDGS Desa with pagination",
+      data,
+      page,
+      totalPages: Math.ceil(total / limit),
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch SDGS Desa with pagination",
+    };
+  }
+}
+
+export default sdgsDesaFindMany;

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/findUnique.ts

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function sdgsDesaFindUnique(context: Context) {
+  const { params } = context;
+  const id = params?.id as string;
+
+  if (!id) {
+    throw new Error("ID tidak ditemukan dalam parameter");
+  }
+
+  const data = await prisma.sDGSDesa.findUnique({
+    where: { id },
+    include: {
+      image: true,
+    },
+  });
+
+  if (!data) {
+    throw new Error("SDGS Desa tidak ditemukan");
+  }
+
+  return {
+    success: true,
+    message: "Data SDGS Desa ditemukan",
+    data,
+  };
+}

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/index.ts

@@ -0,0 +1,39 @@
+import Elysia, { t } from "elysia";
+import sdgsDesaCreate from "./create";
+import sdgsDesaDelete from "./del";
+import sdgsDesaFindMany from "./findMany";
+import sdgsDesaFindUnique from "./findUnique";
+import sdgsDesaUpdate from "./updt";
+
+const SDGSDesa = new Elysia({
+  prefix: "/sdgsdesa",
+  tags: ["Landing Page/Profile/SDGS Desa"],
+})
+
+  // ✅ Find all
+  .get("/find-many", sdgsDesaFindMany)
+
+  // ✅ Find by ID
+  .get("/:id", sdgsDesaFindUnique)
+
+  // ✅ Create
+  .post("/create", sdgsDesaCreate, {
+    body: t.Object({
+      name: t.String(),
+      imageId: t.String(),
+      jumlah: t.String(),
+    }),
+  })
+
+  // ✅ Update
+  .put("/:id", sdgsDesaUpdate, {
+    body: t.Object({
+      name: t.String(),
+      imageId: t.Optional(t.String()),
+      jumlah: t.Optional(t.String()),
+    }),
+  })
+  // ✅ Delete
+  .delete("/del/:id", sdgsDesaDelete);
+
+export default SDGSDesa;

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/updt.ts

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdateSDGSDesa = {
+  name?: string;
+  imageId?: string;
+  jumlah?: string;
+};
+
+export default async function sdgsDesaUpdate(context: Context) {
+  const body = context.body as FormUpdateSDGSDesa;
+
+  const id = context.params.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID SDGS Desa wajib diisi",
+    };
+  }
+
+  try {
+    const updated = await prisma.sDGSDesa.update({
+      where: { id },
+      data: {
+        name: body.name,
+        imageId: body.imageId,
+        jumlah: body.jumlah,
+      },
+      include: {
+        image: true,
+      },
+    });
+
+    return {
+      success: true,
+      message: "SDGS Desa berhasil diperbarui",
+      data: updated,
+    };
+  } catch (error: any) {
+    console.error("❌ Error update SDGS Desa:", error);
+    return {
+      success: false,
+      message: "Gagal memperbarui data SDGS Desa",
+      error: error.message,
+    };
+  }
+}