Senin, 26 May 2025 :

Yang Sudah Di Kerjakan
* Tampilan UI Admin di menu ekonomi
* API Create, edit dan delete berita

Yang Akan Dikerjakan:
* API ProfilePPID
* Tampilan UI Admin Di Menu Inovasi

src/app/admin/(dashboard)/_com/modalKonfirmasiHapus.tsx

@@ -1,4 +1,5 @@
 // components/modal/ModalKonfirmasiHapus.tsx
+import colors from "@/con/colors"
 import { Modal, Text, Button, Flex } from "@mantine/core"
 
 interface ModalKonfirmasiHapusProps {
@@ -25,7 +26,7 @@ export function ModalKonfirmasiHapus({
     >
       <Text mb="md">{text}</Text>
       <Flex justify="flex-end" gap="sm">
-        <Button variant="default" onClick={onClose}>Batal</Button>
+        <Button style={{color: "white"}} bg={colors['blue-button']} variant="default" onClick={onClose}>Batal</Button>
         <Button color="red" onClick={onConfirm} loading={loading}>
           Yakin Hapus
         </Button>

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

@@ -26,9 +26,7 @@ const defaultForm = {
 // 3. Kategori proxy
 const category = proxy({
   findMany: {
-    data: null as
-      | null
-      | Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
+    data: [] as Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
     async load() {
       const res = await ApiFetch.api.desa.berita.category["find-many"].get();
       if (res.status === 200) {
@@ -121,7 +119,108 @@ const berita = proxy({
       }
     },
   },
- 
+  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/desa/berita/${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 = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            content: data.content,
+            kategoriBeritaId: data.kategoriBeritaId || "",
+            imageId: data.imageId || "",
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(berita.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+    
+      try {
+        berita.edit.loading = true;
+        
+        const response = await fetch(`/api/desa/berita/${this.id}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            deskripsi: this.form.deskripsi,
+            content: this.form.content,
+            kategoriBeritaId: this.form.kategoriBeritaId || null,
+            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 berita");
+          await berita.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update berita");
+        }
+      } catch (error) {
+        console.error("Error updating berita:", error);
+        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update berita");
+        return false;
+      } finally {
+        berita.edit.loading = false;
+      }
+    },
+
+    reset() {
+      berita.edit.id = "";
+      berita.edit.form = { ...defaultForm };
+    },
+  },
+  
 });
 
 // 5. State global

src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx

@@ -9,7 +9,7 @@ import TextAlign from '@tiptap/extension-text-align';
 import Superscript from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
 import { Button, Stack } from '@mantine/core';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 // const content =
 //   '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
@@ -18,11 +18,18 @@ import { useEffect } from 'react';
     onEditorReady,
     showSubmit = true,
     onSubmit,
+    initialContent = '',
+    onUpdate,
   }: {
     onEditorReady?: (editor: any | null) => void;
     onSubmit?: (val: string) => void;
     showSubmit?: boolean;
+    initialContent?: string;
+    onUpdate?: (content: string) => void;
   }) {
+    const [mounted, setMounted] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    
     const editor = useEditor({
       extensions: [
         StarterKit,
@@ -33,15 +40,46 @@ import { useEffect } from 'react';
         Highlight,
         TextAlign.configure({ types: ['heading', 'paragraph'] }),
       ],
-      content: '',
+      content: initialContent || '<p></p>',
+      onUpdate: ({ editor }) => {
+        if (onUpdate) {
+          onUpdate(editor.getHTML());
+        }
+      },
+      editorProps: {
+        attributes: {
+          class: 'prose max-w-none',
+        },
+      },
+      onSelectionUpdate: () => {
+        if (!isReady && editor) {
+          setIsReady(true);
+          onEditorReady?.(editor);
+        }
+      },
       immediatelyRender: false
     });
   
     useEffect(() => {
-      onEditorReady?.(editor);
-    }, [editor, onEditorReady] );
+      if (editor) {
+        // Set initial content when component mounts
+        editor.commands.setContent(initialContent || '<p></p>');
+        
+        // Mark as mounted and notify parent
+        if (!mounted) {
+          setMounted(true);
+          onEditorReady?.(editor);
+        }
+      }
+      
+      return () => {
+        if (editor) {
+          editor.destroy();
+        }
+      };
+    }, [editor, initialContent, mounted, onEditorReady]);
   
-    if (!editor) return null;
+    if (!editor) return <div>Loading editor...</div>;
 
 
   return (

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

@@ -0,0 +1,265 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Select,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconImageInPicture } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useProxy } from "valtio/utils";
+import { toast } from "react-toastify";
+
+
+import ApiFetch from "@/lib/api-fetch";
+import { FileInput } from "@mantine/core";
+import stateDashboardBerita from "../../../../_state/desa/berita";
+import { Prisma } from "@prisma/client";
+import { useShallowEffect } from "@mantine/hooks";
+import { BeritaEditor } from "../../_com/BeritaEditor";
+
+function BeritaEdit() {
+  const beritaState = useProxy(stateDashboardBerita);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
+  const [isEditorReady, setIsEditorReady] = useState(false);
+  const [formData, setFormData] = useState({
+    judul: beritaState.berita.edit.form.judul || '',
+    deskripsi: beritaState.berita.edit.form.deskripsi || '',
+    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || '',
+    content: beritaState.berita.edit.form.content || '',
+    imageId: beritaState.berita.edit.form.imageId || ''
+  });
+
+  // Load berita by id saat pertama kali
+  useEffect(() => {
+    const loadBerita = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+  
+      try {
+        const data = await stateDashboardBerita.berita.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            kategoriBeritaId: data.kategoriBeritaId || '',
+            content: data.content || '',
+            imageId: data.imageId || '',
+          });
+  
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error("Gagal memuat data berita");
+      }
+    };
+  
+    loadBerita();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+  
+
+
+  // Handle editor ready
+  const handleEditorReady = (editor: any) => {
+    setEditorInstance(editor);
+    setIsEditorReady(true);
+    
+    // Set initial content if exists
+    if (formData.content) {
+      editor.commands.setContent(formData.content);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!isEditorReady || !editorInstance) {
+      return toast.error("Editor belum siap");
+    }
+
+    try {
+      const htmlContent = editorInstance.getHTML();
+      if (!htmlContent || htmlContent === "<p></p>") {
+        return toast.warn("Konten tidak boleh kosong");
+      }
+
+      // Update form data with editor content
+      const updatedFormData = {
+        ...formData,
+        content: htmlContent
+      };
+
+      // Update global state with form data
+      beritaState.berita.edit.form = {
+        judul: updatedFormData.judul,
+        deskripsi: updatedFormData.deskripsi,
+        content: updatedFormData.content,
+        kategoriBeritaId: updatedFormData.kategoriBeritaId || '',
+        imageId: beritaState.berita.edit.form.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");
+        }
+
+        // Update imageId in global state
+        beritaState.berita.edit.form.imageId = uploaded.id;
+      }
+
+
+      await beritaState.berita.edit.update();
+      toast.success("Berita berhasil diperbarui!");
+      router.push("/admin/desa/berita");
+    } catch (error) {
+      console.error("Error updating berita:", error);
+      toast.error("Terjadi kesalahan saat memperbarui berita");
+    }
+  };
+
+  return (
+    <Box py={10}>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <TextInput
+            value={formData.judul}
+            onChange={(e) => setFormData({...formData, judul: e.target.value})}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <SelectCategory
+            value={formData.kategoriBeritaId}
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                kategoriBeritaId: val?.id || ''
+              });
+            }}
+          />
+
+          <TextInput
+            value={formData.deskripsi}
+            onChange={(e) => setFormData({...formData, deskripsi: e.target.value})}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <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"}>Konten</Text>
+            <BeritaEditor
+              initialContent={formData.content}
+              onEditorReady={handleEditorReady}
+              showSubmit={false}
+              onUpdate={(content) => setFormData({...formData, content})}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan Perubahan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+interface SelectCategoryProps {
+  onChange: (value: Prisma.KategoriBeritaGetPayload<{
+    select: {
+      name: true;
+      id: true;
+    };
+  }> | null) => void;
+  value?: string | null;
+  defaultValue?: string | null;
+}
+
+function SelectCategory({
+  onChange,
+  value,
+  defaultValue,
+}: SelectCategoryProps) {
+  const categoryState = useProxy(stateDashboardBerita.category);
+
+  useShallowEffect(() => {
+    categoryState.findMany.load().then(() => {
+      console.log("Kategori berhasil dimuat:", categoryState.findMany.data);
+    });
+  }, []);
+
+  if (!categoryState.findMany.data) {
+    return <Skeleton height={38} />;
+  }
+
+  
+  const selectedValue = value || defaultValue;
+  
+  return (
+    <Select
+      label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+      placeholder="Pilih kategori"
+      data={categoryState.findMany.data.map((item) => ({
+        label: item.name,
+        value: item.id,
+      }))}
+      value={selectedValue || null}
+      onChange={(val: string | null) => {
+        if (val) {
+          const selected = categoryState.findMany.data?.find((item) => item.id === val);
+          if (selected) {
+            onChange(selected);
+          }
+        } else {
+          onChange(null);
+        }
+      }}
+      searchable
+      clearable
+      nothingFoundMessage="Tidak ditemukan"
+    />
+  );
+}
+
+export default BeritaEdit;

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -255,7 +255,7 @@ function BeritaList() {
                       <IconX size={20} />
                     </ActionIcon>
                     <ActionIcon
-                      onClick={() => router.push("/desa/berita/edit")}
+                      onClick={() => router.push(`/admin/desa/berita/edit/${item.id}`)}
                       color={colors['blue-button']} variant='transparent'
                     >
                       <IconEdit size={20} />
@@ -328,31 +328,4 @@ function SelectCategory({
   );
 }
 
-
-// function SelectCategory({ onChange }: {
-//   onChange: (value: Prisma.KategoriBeritaGetPayload<{
-//     select: {
-//       name: true,
-//       id: true
-//     }
-//   }>) => void
-// }) {
-//   const beritaState = useProxy(stateDashboardBerita)
-//   useShallowEffect(() => {
-//     beritaState.category.findMany.load()
-//   }, [])
-
-//   if (!beritaState.category.findMany.data) return <Skeleton h={40} />
-//   return <Group>
-//     <Select placeholder='pilih kategori' label={<Text fz={"sm"} fw={"bold"}>Pilih Kategori</Text>} data={beritaState.category.findMany.data.map((item) => ({
-//       value: item.id,
-//       label: item.name
-//     }))} onChange={(v) => {
-//       const data = beritaState.category.findMany.data?.find((item) => item.id === v)
-//       if (!data) return
-//       onChange(data)
-//     }} />
-//   </Group>
-// }
-
 export default Page;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx

@@ -1,10 +1,40 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
-      layanan-online-desa
-    </div>
+    <Box>
+      <Stack gap={"xs"}>
+        <Box>
+          <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Layanan Online Desa</Title>
+              <TextInput
+                label={<Text fz={'sm'} fw={'bold'}>Nama Layanan</Text>}
+                placeholder="Masukkan nama layanan"
+              />
+              <TextInput
+                label={<Text fz={'sm'} fw={'bold'}>Deskripsi Layanan</Text>}
+                placeholder="Masukkan deskripsi layanan"
+              />
+              <Box>
+                <Text fz={'sm'} fw={'bold'}>Upload Gambar Layanan</Text>
+                <IconImageInPicture size={24} />
+              </Box>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack gap={'xs'}>
+              <Title order={3}>List Data Layanan Online Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
   );
 }
 

src/app/api/[[...slugs]]/_lib/desa/berita/find-by-id.ts

@@ -0,0 +1,65 @@
+import prisma from "@/lib/prisma";
+
+export default async function handler(
+  request: Request
+) {
+  // Extract the ID from the URL path
+  const url = new URL(request.url);
+  const pathSegments = url.pathname.split('/');
+  const id = pathSegments[pathSegments.length - 1];
+  
+  if (!id) {
+    return Response.json({
+      success: false,
+      message: "ID tidak boleh kosong",
+    }, { status: 400 });
+  }
+
+  try {
+    // Validate that the ID is a valid UUID or whatever format you're using
+    if (typeof id !== 'string') {
+      return Response.json({
+        success: false,
+        message: "ID tidak valid",
+      }, { status: 400 });
+    }
+
+    const data = await prisma.berita.findUnique({
+      where: { id },
+      include: {
+        image: true,
+        kategoriBerita: true,
+      },
+    });
+
+    if (!data) {
+      return Response.json({
+        success: false,
+        message: "Berita tidak ditemukan",
+      }, { status: 404 });
+    }
+
+    // Ensure we're returning a proper Response object
+    return new Response(JSON.stringify({
+      success: true,
+      message: "Success fetch berita by ID",
+      data,
+    }), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  } catch (e) {
+    console.error("Find by ID error:", e);
+    return new Response(JSON.stringify({
+      success: false,
+      message: "Gagal mengambil berita: " + (e instanceof Error ? e.message : 'Unknown error'),
+    }), {
+      status: 500,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+}

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

@@ -4,10 +4,15 @@ import beritaFindMany from "./find-many";
 import beritaCreate from "./create";
 import beritaDelete from "./del";
 import beritaUpdate from "./updt";
+import findBeritaById from "./find-by-id";
 
 const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
   .get("/category/find-many", kategoriBeritaFindMany)
   .get("/find-many", beritaFindMany)
+  .get("/:id", async (context) => {
+      const response = await findBeritaById(new Request(context.request));
+      return response;
+    })
   .post("/create", beritaCreate, {
     body: t.Object({
       judul: t.String(),
@@ -18,14 +23,21 @@ const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
     }),
   })
   .delete("/delete/:id", beritaDelete)
-  .put("/update/:id", beritaUpdate, {
-    body: t.Object({
-      judul: t.String(),
-      deskripsi: t.String(),
-      imageId: t.String(),
-      content: t.String(),
-      kategoriBeritaId: t.Union([t.String(), t.Null()]),
-    }),
-  });
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await beritaUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        judul: t.String(),
+        deskripsi: t.String(),
+        imageId: t.String(),
+        content: t.String(),
+        kategoriBeritaId: t.Union([t.String(), t.Null()]),
+      }),
+    }
+  );
 
 export default Berita;

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

@@ -86,7 +86,8 @@ type FormUpdate = Prisma.BeritaGetPayload<{
 
 
 async function beritaUpdate(context: Context) {
-    const id = context.params.id as string; // ambil dari URL
+  try {
+    const id = context.params?.id as string; // ambil dari URL
     const body = (await context.body) as Omit<FormUpdate, "id">;
   
     const {
@@ -98,24 +99,25 @@ async function beritaUpdate(context: Context) {
     } = body;
   
     if (!id) {
-      return {
-        status: 400,
-        body: "ID tidak boleh kosong",
-      };
+      return new Response(
+        JSON.stringify({ success: false, message: "ID tidak boleh kosong" }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
     }
   
     const existing = await prisma.berita.findUnique({
       where: { id },
       include: {
         image: true,
+        kategoriBerita: true,
       },
     });
   
     if (!existing) {
-      return {
-        status: 404,
-        body: "Berita tidak ditemukan",
-      };
+      return new Response(
+        JSON.stringify({ success: false, message: "Berita tidak ditemukan" }),
+        { status: 404, headers: { 'Content-Type': 'application/json' } }
+      );
     }
   
     if (existing.imageId && existing.imageId !== imageId) {
@@ -139,15 +141,28 @@ async function beritaUpdate(context: Context) {
         judul,
         deskripsi,
         content,
-        kategoriBeritaId,
+        kategoriBeritaId: kategoriBeritaId || null,
         imageId,
       },
     });
   
-    return {
-      success: true,
-      message: "Berita berhasil diupdate",
-      data: updated,
-    };
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: "Berita berhasil diupdate",
+        data: updated,
+      }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } }
+    );
+  } catch (error) {
+    console.error("Error updating berita:", error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "Terjadi kesalahan saat mengupdate berita",
+      }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
   }
+}
   export default beritaUpdate;