UI & API Smart DIgital Village

prisma/schema.prisma

@@ -90,6 +90,8 @@ model FileStorage {
   KontakItem KontakItem[]
 
   Pegawai Pegawai[]
+
+  DesaDigital DesaDigital[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -1325,3 +1327,16 @@ model Pembiayaan {
   isActive  Boolean   @default(true)
   ApbDesa ApbDesa[] @relation("ApbDesaPembiayaan")
 }
+// ========================================= INOVASI ========================================= //
+// ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
+model DesaDigital {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi String      @db.Text
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}

src/app/admin/(dashboard)/_state/ekonomi/desa-digital.ts

@@ -0,0 +1,216 @@
+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 templateForm = z.object({
+  name: z.string().min(1).max(50),
+  deskripsi: z.string().min(1).max(5000),
+  imageId: z.string().min(1).max(50),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const desaDigitalState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(desaDigitalState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        desaDigitalState.create.loading = true;
+        const res = await ApiFetch.api.inovasi.desadigital["create"].post(
+          desaDigitalState.create.form
+        );
+        if (res.status === 200) {
+          desaDigitalState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        desaDigitalState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DesaDigitalGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.inovasi.desadigital["find-many"].get();
+      if (res.status === 200) {
+        desaDigitalState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DesaDigitalGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/desadigital/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          desaDigitalState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          desaDigitalState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading desa digital:", error);
+        desaDigitalState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        desaDigitalState.delete.loading = true;
+        const response = await fetch(`/api/inovasi/desadigital/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+
+        if (response.ok) {
+          toast.success(result.message || "Desa Digital berhasil dihapus");
+          await desaDigitalState.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus desa digital");
+        }
+      } catch (error) {
+        console.log((error as Error).message);
+        toast.error("Terjadi kesalahan saat menghapus desa digital");
+      } finally {
+        desaDigitalState.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/inovasi/desadigital/${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,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading desa digital:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateForm.safeParse(desaDigitalState.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        desaDigitalState.edit.loading = true;
+        const response = await fetch(
+          `/api/inovasi/desadigital/${desaDigitalState.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              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}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update desa digital");
+          await desaDigitalState.findMany.load();
+          return true;
+        } else {
+          throw new Error(result?.message || "Gagal update desa digital");
+        }
+      } catch (error) {
+        console.error("Error updating desa digital:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update desa digital"
+        );
+        return false;
+      } finally {
+        desaDigitalState.edit.loading = false;
+      }
+    },
+    reset() {
+      desaDigitalState.edit.id = "";
+      desaDigitalState.edit.form = { ...defaultForm };
+    },
+  },
+});
+export default desaDigitalState;

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx

@@ -0,0 +1,137 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import desaDigitalState from '@/app/admin/(dashboard)/_state/ekonomi/desa-digital';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } 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 EditPenghargaan() {
+  const stateDesaDigital = useProxy(desaDigitalState)
+  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: stateDesaDigital.findUnique.data?.name || '',
+    deskripsi: stateDesaDigital.findUnique.data?.deskripsi || '',
+    imageId: stateDesaDigital.findUnique.data?.imageId || '',
+  })
+
+  useEffect(() => {
+    const loadPenghargaan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDesaDigital.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading desa digital smart village:", error);
+        toast.error("Gagal memuat data desa digital smart village");
+      }
+    };
+
+    loadPenghargaan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateDesaDigital.edit.form = {
+        ...stateDesaDigital.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+      }
+
+      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");
+        }
+
+        stateDesaDigital.edit.form.imageId = uploaded.id;
+      }
+
+      await stateDesaDigital.edit.update();
+      toast.success("Desa digital smart village berhasil diperbarui!");
+      router.push("/admin/inovasi/desa-digital-smart-village");
+    } catch (error) {
+      console.error("Error updating desa digital smart village:", error);
+      toast.error("Terjadi kesalahan saat memperbarui desa digital smart village");
+    }
+  }
+
+  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 Desa Digital Smart Village</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                stateDesaDigital.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPenghargaan;

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/page.tsx

@@ -0,0 +1,107 @@
+'use client'
+import colors from '@/con/colors';
+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 { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import desaDigitalState from '../../../_state/ekonomi/desa-digital';
+
+function DetailDesaDigital() {
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter()
+  const params = useParams()
+
+  useShallowEffect(() => {
+    stateDesaDigital.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDesaDigital.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/inovasi/desa-digital-smart-village")
+    }
+  }
+
+  if (!stateDesaDigital.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </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 Desa Digital Smart Village</Text>
+          {stateDesaDigital.findUnique.data ? (
+            <Paper key={stateDesaDigital.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{stateDesaDigital.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDesaDigital.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateDesaDigital.findUnique.data) {
+                        setSelectedId(stateDesaDigital.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDesaDigital.delete.loading || !stateDesaDigital.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateDesaDigital.findUnique.data) {
+                        router.push(`/admin/inovasi/desa-digital-smart-village/${stateDesaDigital.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDesaDigital.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 desa digital smart village ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailDesaDigital;

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx

@@ -1,45 +1,112 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import ApiFetch from '@/lib/api-fetch';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import desaDigitalState from '../../../_state/ekonomi/desa-digital';
 
 
 function CreateDesaDigital() {
-  const router = useRouter();
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateDesaDigital.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null)
+    setFile(null)
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+    }
+
+    try {
+      // Upload the image first
+      const uploadRes = await ApiFetch.api.fileStorage.create.post({
+        file: file,
+        name: file.name
+      })
+
+      const uploaded = uploadRes.data?.data
+      if (!uploaded?.id) {
+        return toast.error("Gagal upload gambar")
+      }
+
+      // Set the image ID in the form
+      stateDesaDigital.create.form.imageId = uploaded.id
+
+      // Submit the form
+      const success = await stateDesaDigital.create.create()
+      
+      if (success) {
+        resetForm()
+        router.push("/admin/inovasi/desa-digital-smart-village")
+      }
+    } catch (error) {
+      console.error("Error in handleSubmit:", error)
+      toast.error("Terjadi kesalahan saat menyimpan data")
+    }
+
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+        <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%" }}>
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
-          <Title order={4}>Create Desa Digital Smart Village</Title>
+          <Title order={3}>Create Desa Digital Smart Village</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
+            value={stateDesaDigital.create.form.name}
-          placeholder='Masukkan nama inovasi'
+            onChange={(val) => {
-          />
+              stateDesaDigital.create.form.name = val.target.value;
-          <TextInput
+            }}
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Desa Digital Smart Village</Text>}
-          placeholder='Masukkan deskripsi singkat inovasi'
+            placeholder="masukkan nama desa digital smart village"
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
-          placeholder='Masukkan image'
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
-            <KeamananEditor
+            <CreateEditor
-              showSubmit={false}
+              value={stateDesaDigital.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                stateDesaDigital.create.form.deskripsi = htmlContent;
+              }}
             />
           </Box>
-          <Group>
+          <FileInput
-            <Button bg={colors['blue-button']}>Submit</Button>
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-          </Group>
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/detail/page.tsx

@@ -1,66 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailDesaDigital() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Desa Digital Smart Village</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"}>Nama Inovasi</Text>
-                <Text>Pelayanan Admin Digital</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Deskripsi Singkat Inovasi</Text>
-                <Text>Deskripsi Singkat Inovasi</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Image</Text>
-                <IconImageInPicture size={20} />
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Deskripsi Inovasi</Text>
-                <Text>Deskripsi Inovasi</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/inovasi/desa-digital-smart-village/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailDesaDigital;
-

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/edit/page.tsx

@@ -1,49 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-
-function EditDesaDigital() {
-  const router = useRouter();
-  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}>Edit Desa Digital Smart Village</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
-          placeholder='Masukkan nama inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
-          placeholder='Masukkan deskripsi singkat inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
-          placeholder='Masukkan image'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditDesaDigital;

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx

@@ -1,26 +1,53 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
+import desaDigitalState from '../../_state/ekonomi/desa-digital';
 
 function DesaDigitalSmartVillage() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Desa Digital Smart Village'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListDesaDigitalSmartVillage/>
+      <ListDesaDigitalSmartVillage search={search} />
     </Box>
   );
 }
 
-function ListDesaDigitalSmartVillage() {
+function ListDesaDigitalSmartVillage({ search }: { search: string }) {
-  const router = useRouter();
+  const state = useProxy(desaDigitalState)
+  const router = useRouter()
+  useShallowEffect(() => {
+    state.findMany.load()
+  }, [])
+
+  const filteredData = (state.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!state.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -33,23 +60,23 @@ function ListDesaDigitalSmartVillage() {
             <TableTr>
               <TableTh>Nama Inovasi</TableTh>
               <TableTh>Deskripsi Singkat Inovasi</TableTh>
-              <TableTh>Image</TableTh>
               <TableTh>Detail</TableTh>
             </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
+            {filteredData.map((item) => (
-              <TableTd>Layanan Admin Digital</TableTd>
+              <TableTr key={item.id}>
-              <TableTd>Deskripsi Singkat Inovasi</TableTd>
+                <TableTd>{item.name}</TableTd>
                 <TableTd>
-                <Image src={"/"} alt=''/>
+                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                 </TableTd>
               <TableTd>
-                <Button onClick={() => router.push('/admin/inovasi/desa-digital-smart-village/detail')}>
+                <Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
                   <IconDeviceImac size={20} />
                 </Button>
               </TableTd>
             </TableTr>
+          ))}
           </TableTbody>
         </Table>
       </Paper>

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/create.ts

@@ -0,0 +1,30 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.DesaDigitalGetPayload<{
+    select: {
+        name: true;
+        deskripsi: true;
+        imageId: true;
+    }
+}>
+export default async function desaDigitalCreate(context: Context){
+    const body = context.body as FormCreate;
+
+    await prisma.desaDigital.create({
+        data: {
+            name: body.name,
+            deskripsi: body.deskripsi,
+            imageId: body.imageId,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Success create desa digital",
+        data: {
+            ...body,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/del.ts

@@ -0,0 +1,54 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+export default async function desaDigitalDelete(context: Context) {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const desaDigital = await prisma.desaDigital.findUnique({
+    where: { id },
+    include: {
+      image: true,
+    },
+  });
+
+  if (!desaDigital) {
+    return {
+      status: 404,
+      body: "Desa digital tidak ditemukan",
+    };
+  }
+
+  if (desaDigital.image) {
+    try {
+      const filePath = path.join(
+        desaDigital.image.path,
+        desaDigital.image.name
+      );
+      await fs.unlink(filePath);
+      await prisma.fileStorage.delete({
+        where: { id: desaDigital.image.id },
+      });
+    } catch (error) {
+      console.error("Gagal hapus file image:", error);
+    }
+  }
+
+  await prisma.desaDigital.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Desa digital berhasil dihapus",
+    status: 200,
+  };
+}

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/findMany.ts

@@ -0,0 +1,23 @@
+import prisma from "@/lib/prisma";
+
+export default async function desaDigitalFindMany() {
+    try {
+        const data = await prisma.desaDigital.findMany({
+            include: {
+                image: true,
+            },
+        });
+
+        return {
+            success: true,
+            message: "Success fetch desa digital",
+            data,
+        };
+    } catch (error) {
+        console.error("Find many error:", error);
+        return {
+            success: false,
+            message: "Failed fetch desa digital",
+        };
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/findUnique.ts

@@ -0,0 +1,49 @@
+import prisma from "@/lib/prisma";
+
+export default async function desaDigitalFindUnique(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 ditemukan",
+        }, {status: 400});
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, {status: 400});
+        }
+
+        const data = await prisma.desaDigital.findUnique({
+            where: { id },
+            include: {
+                image: true,
+            },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Desa digital tidak ditemukan",
+            }, {status: 404});
+        }
+
+        return Response.json({
+            success: true,
+            message: "Success fetch desa digital by ID",
+            data,
+        }, {status: 200});
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return Response.json({
+            success: false,
+            message: "Gagal mengambil desa digital: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }, {status: 500});
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/index.ts

@@ -0,0 +1,39 @@
+import Elysia, { t } from "elysia";
+import desaDigitalCreate from "./create";
+import desaDigitalDelete from "./del";
+import desaDigitalUpdate from "./updt";
+import desaDigitalFindUnique from "./findUnique";
+import desaDigitalFindMany from "./findMany";
+
+const DesaDigital = new Elysia({
+  prefix: "/desadigital",
+  tags: ["Inovasi/Desa Digital"],
+})
+  .post("/create", desaDigitalCreate, {
+    body: t.Object({
+      name: t.String(),
+      deskripsi: t.String(),
+      imageId: t.String(),
+    }),
+  })
+  .get("/find-many", desaDigitalFindMany)
+  .get("/:id", async (context) => {
+    const response = await desaDigitalFindUnique(context.request);
+    return response;
+  })
+  .delete("/del/:id", desaDigitalDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await desaDigitalUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        deskripsi: t.String(),
+        imageId: t.String(),
+      }),
+    }
+  );
+export default DesaDigital;

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/updt.ts

@@ -0,0 +1,103 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+import path from "path";
+import fs from "fs/promises";
+
+type FormUpdate = Prisma.DesaDigitalGetPayload<{
+    select: {
+        id: true,
+        name: true,
+        deskripsi: true
+        imageId: true
+    }
+}>
+export default async function desaDigitalUpdate(context: Context) {
+    try {
+        const id = context.params?.id as string;
+        const body = (await context.body) as Omit<FormUpdate, "id">;
+    
+        const {
+            name,
+            deskripsi,
+            imageId
+        } = body;
+    
+        if (!id) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "ID tidak ditemukan",
+            }), {
+                status: 400,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        const existing = await prisma.desaDigital.findUnique({
+            where: {id},
+            include: {
+                image: true,
+            }
+        })
+    
+        if (!existing) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "Desa digital tidak ditemukan",
+            }), {
+                status: 404,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        if (existing.imageId && existing.imageId !== imageId) {
+        const oldImage = existing.image;
+        if (oldImage) {
+            try {
+                const filePath = path.join(oldImage.path, oldImage.name);
+                await fs.unlink(filePath);
+                await prisma.fileStorage.delete({
+                    where: { id: oldImage.id },
+                });
+            } catch (error) {
+                console.error("Gagal hapus gambar lama:", error);
+            }
+        }
+        }
+    
+        const updated = await prisma.desaDigital.update({
+            where: { id },
+            data: {
+                name,
+                deskripsi,
+                imageId,
+            }
+        })
+    
+        return new Response(JSON.stringify({
+            success: true,
+            message: "Desa digital berhasil diupdate",
+            data: updated,
+        }), {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    } catch (error) {
+        console.error("Error updating desa digital:", error); 
+        return new Response(JSON.stringify({
+            success: false,
+            message: "Terjadi kesalahan saat mengupdate desa digital",
+        }), {
+            status: 500,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    }
+    }

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

@@ -0,0 +1,10 @@
+import Elysia from "elysia";
+import DesaDigital from "./desa-digital";
+
+const Inovasi = new Elysia({
+  prefix: "/api/inovasi",
+  tags: ["Inovasi"],
+})
+  .use(DesaDigital)
+
+export default Inovasi;

src/app/api/[[...slugs]]/route.ts

@@ -19,6 +19,7 @@ import { uplImgSingle } from "./_lib/upl-img-single";
 import FileStorage from "./_lib/fileStorage";
 import Keamanan from "./_lib/keamanan";
 import Ekonomi from "./_lib/ekonomi";
+import Inovasi from "./_lib/inovasi";
 
 
 const ROOT = process.cwd();
@@ -81,6 +82,7 @@ const ApiServer = new Elysia()
   .use(Utils)
   .use(FileStorage)
   .use(Ekonomi)
+  .use(Inovasi)
   .onError(({ code }) => {
     if (code === "NOT_FOUND") {
       return {