Jum'at, 30 May 2025 :

Yang Sudah Di Kerjakan
* Tampilan UI Admin di menu inovasi
* API Create, edit dan delete potensi
* Tampilan UI Landing Page sudah sesuai di mobile

Yang Lagi Dikerjakan:
* Progress Tampilan UI Admin Di Menu lingkungan
* Progress API Create, edit dan delete potensi

Yang Akan Dikerjakan:
* API Create, edit dan delete pengumuman
* Tampilan UI Admin Di Menu Pendidikan

prisma/schema.prisma

@@ -47,6 +47,23 @@ model AppMenuChild {
   appMenuId String?
 }
 
+// ========================================= FILE STORAGE ========================================= //
+
+model FileStorage {
+  id          String        @id @default(cuid())
+  name        String        @unique
+  realName    String
+  path        String
+  mimeType    String
+  createdAt   DateTime      @default(now())
+  updatedAt   DateTime      @updatedAt
+  deletedAt   DateTime?
+  isActive    Boolean       @default(true)
+  link        String
+  Berita      Berita[]
+  PotensiDesa PotensiDesa[]
+}
+
 //========================================= MENU PPID ========================================= //
 // ========================================= VISI MISI PPID ========================================= //
 model VisiMisiPPID {
@@ -242,17 +259,18 @@ model Berita {
   id               String          @id @default(cuid())
   judul            String
   deskripsi        String
-  image            String
+  image            FileStorage     @relation(fields: [imageId], references: [id])
+  imageId          String
   content          String          @db.Text
   createdAt        DateTime        @default(now())
   updatedAt        DateTime        @updatedAt
   deletedAt        DateTime        @default(now())
   isActive         Boolean         @default(true)
-  KatagoryBerita   KatagoryBerita? @relation(fields: [katagoryBeritaId], references: [id])
+  kategoriBerita   KategoriBerita? @relation(fields: [kategoriBeritaId], references: [id])
-  katagoryBeritaId String?
+  kategoriBeritaId String?
 }
 
-model KatagoryBerita {
+model KategoriBerita {
   id        String   @id @default(cuid())
   name      String   @unique
   beritas   Berita[]
@@ -262,6 +280,21 @@ model KatagoryBerita {
   isActive  Boolean  @default(true)
 }
 
+// ========================================= POTENSI DESA ========================================= //
+model PotensiDesa {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi String
+  kategori  String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  content   String      @db.Text
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
 // ========================================= PENGUMUMAN ========================================= //
 model Pengumuman {
   id                   String              @id @default(cuid())
@@ -582,18 +615,3 @@ model DoctorSign {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
-
-// === BARU
-
-model FileStorage {
-  id        String    @id @default(cuid())
-  name      String    @unique
-  realName  String
-  path      String
-  mimeType  String
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @updatedAt
-  deletedAt DateTime? 
-  isActive  Boolean   @default(true)
-  link      String
-}

prisma/seed.ts

@@ -1,6 +1,6 @@
 import prisma from "@/lib/prisma";
 import categoryPengumuman from "./data/category-pengumuman.json";
-import katagoryBerita from "./data/katagory-berita.json";
+import kategoriBerita from "./data/kategori-berita.json";
 import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
 import caraMemperolehSalinanInformasi from "./data/list-caraMemperolehSalinanInformasi.json";
 import jenisInformasiDiminta from "./data/list-jenisInfromasi.json";
@@ -49,8 +49,8 @@ import { v4 as uuid } from "uuid";
 
   console.log("potensi success ...");
 
-  for (const k of katagoryBerita) {
+  for (const k of kategoriBerita) {
-    await prisma.katagoryBerita.upsert({
+    await prisma.kategoriBerita.upsert({
       where: {
         name: k.name,
       },
@@ -63,7 +63,7 @@ import { v4 as uuid } from "uuid";
     });
   }
 
-  console.log("katagory berita success ...");
+  console.log("kategori berita success ...");
 
   for (const c of categoryPengumuman) {
     await prisma.categoryPengumuman.upsert({

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

@@ -0,0 +1,85 @@
+// TestEditor.tsx
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+
+type CreateEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function CreateEditor({ value, onChange }: CreateEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content: value,
+    onUpdate: () => {
+      if (editor) {
+        onChange(editor.getHTML());
+      }
+    },
+  });
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Bold />
+          <RichTextEditor.Italic />
+          <RichTextEditor.Underline />
+          <RichTextEditor.Strikethrough />
+          <RichTextEditor.ClearFormatting />
+          <RichTextEditor.Highlight />
+          <RichTextEditor.Code />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.H1 />
+          <RichTextEditor.H2 />
+          <RichTextEditor.H3 />
+          <RichTextEditor.H4 />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Blockquote />
+          <RichTextEditor.Hr />
+          <RichTextEditor.BulletList />
+          <RichTextEditor.OrderedList />
+          <RichTextEditor.Subscript />
+          <RichTextEditor.Superscript />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Link />
+          <RichTextEditor.Unlink />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.AlignLeft />
+          <RichTextEditor.AlignCenter />
+          <RichTextEditor.AlignJustify />
+          <RichTextEditor.AlignRight />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Undo />
+          <RichTextEditor.Redo />
+        </RichTextEditor.ControlsGroup>
+      </RichTextEditor.Toolbar>
+
+      <RichTextEditor.Content />
+    </RichTextEditor>
+  );
+}

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

@@ -0,0 +1,102 @@
+'use client'
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { useEffect } from 'react';
+
+type EditEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function EditEditor({ value, onChange }: EditEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content: value,
+    // Hapus `immediatelyRender` dan `onMount`
+  });
+
+  // Sinkronisasi konten saat `value` berubah
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value);
+    }
+  }, [value, editor]);
+
+  // Sinkronisasi konten ke parent saat diubah
+  useEffect(() => {
+    if (!editor) return;
+
+    const updateHandler = () => onChange(editor.getHTML());
+    editor.on('update', updateHandler);
+
+    return () => {
+      editor.off('update', updateHandler);
+    };
+  }, [editor, onChange]);
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        {/* Toolbar seperti sebelumnya */}
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Bold />
+          <RichTextEditor.Italic />
+          <RichTextEditor.Underline />
+          <RichTextEditor.Strikethrough />
+          <RichTextEditor.ClearFormatting />
+          <RichTextEditor.Highlight />
+          <RichTextEditor.Code />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.H1 />
+          <RichTextEditor.H2 />
+          <RichTextEditor.H3 />
+          <RichTextEditor.H4 />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Blockquote />
+          <RichTextEditor.Hr />
+          <RichTextEditor.BulletList />
+          <RichTextEditor.OrderedList />
+          <RichTextEditor.Subscript />
+          <RichTextEditor.Superscript />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Link />
+          <RichTextEditor.Unlink />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.AlignLeft />
+          <RichTextEditor.AlignCenter />
+          <RichTextEditor.AlignJustify />
+          <RichTextEditor.AlignRight />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Undo />
+          <RichTextEditor.Redo />
+        </RichTextEditor.ControlsGroup>
+      </RichTextEditor.Toolbar>
+
+      <RichTextEditor.Content />
+    </RichTextEditor>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Grid, GridCol, Paper, TextInput, Title } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react'; // Sesuaikan jika kamu pakai icon lain
+import colors from '@/con/colors';
+
+
+const HeaderSearch = ({ title = "", placeholder = "pencarian", searchIcon = <IconSearch size={20} /> }: { title: string, placeholder?: string, searchIcon?: React.ReactNode }) => {
+  return (
+    <Grid>
+      <GridCol span={{ base: 12, md: 9 }}>
+        <Title order={3}>{title}</Title>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 3 }}>
+        <Paper radius={"lg"} bg={colors['white-1']}>
+          <TextInput
+            radius="lg"
+            placeholder={placeholder}
+            leftSection={searchIcon}
+            w="100%"
+          />
+        </Paper>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default HeaderSearch;

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

@@ -0,0 +1,30 @@
+
+'use client'
+import colors from '@/con/colors';
+import { Grid, GridCol, Button, Text } from '@mantine/core';
+import { IconCircleDashedPlus } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const JudulList = ({ title = "", href = "#" }) => {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push(href);
+  };
+
+  return (
+    <Grid align="center" mb={10}>
+      <GridCol span={{ base: 12, md: 11 }}>
+        <Text fz={"xl"} fw={"bold"}>{title}</Text>
+      </GridCol>
+      <GridCol span={{ base: 12, md: 1 }} ta="right">
+        <Button onClick={handleNavigate} bg={colors['blue-button']}>
+          <IconCircleDashedPlus size={25} />
+        </Button>
+      </GridCol>
+    </Grid>
+  );
+};
+
+export default JudulList;

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

@@ -0,0 +1,36 @@
+// components/modal/ModalKonfirmasiHapus.tsx
+import colors from "@/con/colors"
+import { Modal, Text, Button, Flex } from "@mantine/core"
+
+interface ModalKonfirmasiHapusProps {
+  opened: boolean
+  loading?: boolean
+  onClose: () => void
+  onConfirm: () => void
+  text: string
+}
+
+export function ModalKonfirmasiHapus({
+  opened,
+  loading = false,
+  onClose,
+  onConfirm,
+  text,
+}: ModalKonfirmasiHapusProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Konfirmasi Hapus"
+      centered
+    >
+      <Text mb="md">{text}</Text>
+      <Flex justify="flex-end" gap="sm">
+        <Button style={{color: "white"}} bg={colors['blue-button']} variant="default" onClick={onClose}>Batal</Button>
+        <Button color="red" onClick={onConfirm} loading={loading}>
+          Yakin Hapus
+        </Button>
+      </Flex>
+    </Modal>
+  )
+}

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

@@ -1,23 +1,31 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
+// 1. Schema validasi dengan Zod
 const templateForm = z.object({
   judul: z.string().min(3, "Judul minimal 3 karakter"),
   deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-  image: z.string().url().min(3, "Image minimal 3 karakter"),
   content: z.string().min(3, "Content minimal 3 karakter"),
-  katagoryBeritaId: z.string().nonempty(),
+  kategoriBeritaId: z.string().nonempty(),
+  imageId: z.string().nonempty(),
 });
 
+// 2. Default value form berita (hindari uncontrolled input)
+const defaultForm = {
+  judul: "",
+  deskripsi: "",
+  imageId: "",
+  content: "",
+  kategoriBeritaId: "",
+};
+
+// 3. Kategori proxy
 const category = proxy({
   findMany: {
-    data: null as
+    data: [] as Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
-      | null
-      | Prisma.KatagoryBeritaGetPayload<{ omit: { isActive: true } }>[],
     async load() {
       const res = await ApiFetch.api.desa.berita.category["find-many"].get();
       if (res.status === 200) {
@@ -27,23 +35,12 @@ const category = proxy({
   },
 });
 
-type BeritaForm = Prisma.BeritaGetPayload<{
+// 4. Berita proxy
-  select: {
-    judul: true;
-    deskripsi: true;
-    image: true;
-    content: true;
-    katagoryBeritaId: true;
-  };
-}>;
-
 const berita = proxy({
   create: {
-    form: {} as BeritaForm,
+    form: { ...defaultForm }, // ✅ ini kunci fix-nya
     loading: false,
     async create() {
-      berita.create.form.image =
-        "https://www.shutterstock.com/image-vector/lower-news-live-streaming-breaking-600nw-2535984111.jpg";
       const cek = templateForm.safeParse(berita.create.form);
       if (!cek.success) {
         const err = `[${cek.error.issues
@@ -51,6 +48,7 @@ const berita = proxy({
           .join("\n")}] required`;
         return toast.error(err);
       }
+
       try {
         berita.create.loading = true;
         const res = await ApiFetch.api.desa.berita["create"].post(
@@ -58,33 +56,200 @@ const berita = proxy({
         );
         if (res.status === 200) {
           berita.findMany.load();
-          return toast.success("succes create");
+          return toast.success("Berita berhasil disimpan!");
         }
 
-        return toast.error("failed create");
+        return toast.error("Gagal menyimpan berita");
       } catch (error) {
         console.log((error as Error).message);
       } finally {
         berita.create.loading = false;
       }
     },
+    resetForm() {
+      berita.create.form = { ...defaultForm };
+    },
   },
+
   findMany: {
     data: null as
-      | Prisma.BeritaGetPayload<{ omit: { isActive: true } }>[]
+      | Prisma.BeritaGetPayload<{
+          include: {
+            image: true;
+            kategoriBerita: true;
+          };
+        }>[]
       | null,
     async load() {
       const res = await ApiFetch.api.desa.berita["find-many"].get();
       if (res.status === 200) {
-        berita.findMany.data = (res.data?.data as any) ?? [];
+        berita.findMany.data = (res.data?.data ) ?? [];
       }
     },
   },
+  findUnique: {
+    data: null as
+      | Prisma.BeritaGetPayload<{
+          include: {
+            image: true;
+            kategoriBerita: true;
+          };
+        }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/berita/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          berita.findUnique.data = data.data ?? null;
+        } else {
+          console.error('Failed to fetch berita:', res.statusText);
+          berita.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error('Error fetching berita:', error);
+        berita.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        berita.delete.loading = true;
+
+        const response = await fetch(`/api/desa/berita/delete/${id}`, {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Berita berhasil dihapus");
+          await berita.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus berita");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus berita");
+      } finally {
+        berita.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/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
 const stateDashboardBerita = proxy({
   category,
   berita,
 });
 
-export default stateDashboardBerita;
+export default stateDashboardBerita;

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

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

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

@@ -0,0 +1,241 @@
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Image,
+  Paper,
+  Select,
+  Skeleton,
+  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";
+
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { FileInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { Prisma } from "@prisma/client";
+import stateDashboardBerita from "../../../../_state/desa/berita";
+
+function EditBerita() {
+  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 [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
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      beritaState.berita.edit.form = {
+        ...beritaState.berita.edit.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: formData.content,
+        kategoriBeritaId: formData.kategoriBeritaId || '',
+        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");
+        }
+
+        // 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>
+      <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 Berita</Title>
+          <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>
+            <EditEditor
+            value={formData.content}
+            onChange={(htmlContent) => {
+              setFormData((prev) => ({ ...prev, content: htmlContent }));
+              beritaState.berita.edit.form.content = htmlContent;
+            }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Edit Berita</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 EditBerita;

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

@@ -0,0 +1,120 @@
+'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 stateDashboardBerita from '../../../_state/desa/berita';
+
+function DetailBerita() {
+  const beritaState = useProxy(stateDashboardBerita)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    beritaState.berita.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      beritaState.berita.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/berita")
+    }
+  }
+
+  if (!beritaState.berita.findUnique.data) {
+    return (
+      <Stack py={10}>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Berita</Text>
+          {beritaState.berita.findUnique.data ? (
+            <Paper key={beritaState.berita.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.kategoriBerita?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} >{beritaState.berita.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={beritaState.berita.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: beritaState.berita.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (beritaState.berita.findUnique.data) {
+                        setSelectedId(beritaState.berita.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={beritaState.berita.delete.loading || !beritaState.berita.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (beritaState.berita.findUnique.data) {
+                        router.push(`/admin/desa/berita/${beritaState.berita.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!beritaState.berita.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailBerita;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import { RichTextEditor, Link } from '@mantine/tiptap';
 import { useEditor } from '@tiptap/react';
@@ -8,28 +9,77 @@ 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, useState } from 'react';
 
-const content =
+// 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>';
+//   '<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>';
 
-export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void }) {
+  export function BeritaEditor({
-  const editor = useEditor({
+    onEditorReady,
-    extensions: [
+    showSubmit = true,
-      StarterKit,
+    onSubmit,
-      Underline,
+    initialContent = '',
-      Link,
+    onUpdate,
-      Superscript,
+  }: {
-      SubScript,
+    onEditorReady?: (editor: any | null) => void;
-      Highlight,
+    onSubmit?: (val: string) => void;
-      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    showSubmit?: boolean;
-    ],
+    initialContent?: string;
-    content,
+    onUpdate?: (content: string) => void;
-    immediatelyRender: false
+  }) {
-  });
+    const [mounted, setMounted] = useState(false);
-
+    const [isReady, setIsReady] = useState(false);
-  if (!editor) {
+    
-    return null;
+    const editor = useEditor({
-  }
+      extensions: [
+        StarterKit,
+        Underline,
+        Link,
+        Superscript,
+        SubScript,
+        Highlight,
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      ],
+      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(() => {
+      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 <div>Loading editor...</div>;
 
 
   return (
@@ -82,10 +132,12 @@ export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void })
 
         <RichTextEditor.Content />
       </RichTextEditor>
-      <Button onClick={() => {
+      {showSubmit && (
-        if (!editor) return
+        <Button onClick={() => {
-        onSubmit(editor?.getHTML())
+          if (!editor) return
-      }}>Submit</Button>
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
     </Stack>
   );
 }

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

@@ -0,0 +1,168 @@
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import stateDashboardBerita from '../../../_state/desa/berita';
+
+export default function CreateBerita() {
+  const beritaState = useProxy(stateDashboardBerita);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    // Reset state di valtio
+    beritaState.berita.create.form = {
+      judul: "",
+      deskripsi: "",
+      kategoriBeritaId: "",
+      imageId: "",
+      content: "",
+    };
+
+    // Reset state lokal
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    // Upload gambar dulu
+    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");
+    }
+
+    // Simpan ID gambar ke form
+    beritaState.berita.create.form.imageId = uploaded.id;
+
+    // Submit data berita
+    await beritaState.berita.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/desa/berita")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+      <Button variant="subtle" onClick={() => router.back()}>
+        <IconArrowBack color={colors['blue-button']} size={25} />
+      </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Berita</Title>
+          <TextInput
+            value={beritaState.berita.create.form.judul}
+            onChange={(val) => {
+              beritaState.berita.create.form.judul = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <SelectCategory
+            onChange={(val) => {
+              beritaState.berita.create.form.kategoriBeritaId = val.id;
+            }}
+          />
+          <TextInput
+            value={beritaState.berita.create.form.deskripsi}
+            onChange={(val) => {
+              beritaState.berita.create.form.deskripsi = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</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>
+            <CreateEditor
+            value={beritaState.berita.create.form.content}
+            onChange={(htmlContent) => {
+              beritaState.berita.create.form.content = htmlContent;
+            }}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+
+  function SelectCategory({
+    onChange,
+  }: {
+    onChange: (value: Prisma.KategoriBeritaGetPayload<{
+      select: {
+        name: true;
+        id: true;
+      };
+    }>) => void;
+  }) {
+    const categoryState = useProxy(stateDashboardBerita.category);
+  
+    useShallowEffect(() => {
+      categoryState.findMany.load();
+    }, []);
+  
+    if (!categoryState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+  
+    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,
+        }))}
+        onChange={(val) => {
+          const selected = categoryState.findMany.data?.find((item) => item.id === val);
+          if (selected) {
+            onChange(selected);
+          }
+        }}
+        searchable
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+}

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

@@ -1,101 +1,189 @@
 'use client'
-import { Box, Center, Group, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import { IconImageInPicture } from '@tabler/icons-react';
-import { useProxy } from 'valtio/utils';
-import stateDashboardBerita from '../../_state/desa/berita';
-import { BeritaEditor } from './_com/BeritaEditor';
 import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import stateDashboardBerita from '../../_state/desa/berita';
+
 
 function Page() {
   return (
     <Box>
-      <Title order={3}>Berita</Title>
+      <Grid>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
-        <BeritaCreate />
+          <Title order={3}>Berita</Title>
-        <BeritaList />
+        </GridCol>
-      </SimpleGrid>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <Paper radius={"lg"} bg={colors['white-1']}>
+            <TextInput
+              radius={"lg"}
+              placeholder='pencarian'
+              leftSection={<IconSearch size={20} />}
+            />
+          </Paper>
+        </GridCol>
+      </Grid>
+      <BeritaList />
     </Box>
   );
 }
 
-function BeritaCreate() {
-  const beritaState = useProxy(stateDashboardBerita)
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <SelectCategory onChange={(val) => {
-            beritaState.berita.create.form.katagoryBeritaId = val.id
-          }} />
-          <TextInput onChange={(val) => {
-            beritaState.berita.create.form.judul = val.target.value
-          }} label={"Judul"} placeholder='masukkan judul' />
-          <TextInput onChange={(val) => {
-            beritaState.berita.create.form.deskripsi = val.target.value
-          }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
-          <Center w={200} h={200} bg={"gray"}>
-            <IconImageInPicture />
-          </Center>
-          <BeritaEditor onSubmit={(val) => {
 
-            beritaState.berita.create.form.content = val
+
-            beritaState.berita.create.create()
+
-          }} />
+
-        </Stack>
+
-      </Paper>
+// function BeritaList() {
-    </Box>
+//   const beritaState = useProxy(stateDashboardBerita)
-  )
+//   useShallowEffect(() => {
-}
+//     beritaState.berita.findMany.load()
+//   }, [])
+
+
+
+//   const router = useRouter()
+
+//   if (!beritaState.berita.findMany.data) return <Stack py={10}>
+//     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+//   </Stack>
+//   return (
+//     <Box py={10}>
+//       <Paper bg={colors['white-1']} p={'md'}>
+//         <Stack>
+//           <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+//           <SimpleGrid cols={{ base: 1, md: 4 }}>
+//             {beritaState.berita.findMany.data?.map((item) => (
+//               <Paper key={item.id} bg={colors['BG-trans']} p={'md'}>
+//                 <Box >
+//                   <Flex justify="flex-end" mt={10}>
+//                     <ActionIcon
+//                       onClick={() => beritaState.berita.delete.byId(item.id)}
+//                       disabled={beritaState.berita.delete.loading}
+//                       color={colors['blue-button']} variant='transparent'>
+//                       <IconX size={20} />
+//                     </ActionIcon>
+//                     <ActionIcon onClick={() => {
+//                       router.push("/desa/berita/edit");
+//                     }} color={colors['blue-button']} variant='transparent'>
+//                       <IconEdit size={20} />
+//                     </ActionIcon>
+//                   </Flex>
+//                   <Text fw={"bold"} fz={"sm"}>
+//                     Kategori
+//                   </Text>
+//                   <Text>{item.kategoriBerita?.name}</Text>
+//                   <Text fw={"bold"} fz={"sm"}>
+//                     Judul
+//                   </Text>
+//                   <Text>{item.judul}</Text>
+//                   <Text lineClamp={1} fw={"bold"} fz={"sm"}>
+//                     Deskripsi
+//                   </Text>
+//                   <Text size='sm' lineClamp={2}>{item.deskripsi}</Text>
+//                   <Text fw={"bold"} fz={"sm"}>
+//                     Gambar
+//                   </Text>
+//                   <Image w={{ base: 100, md: 150 }} src={item.image?.link} alt="gambar" />
+//                 </Box>
+//               </Paper>
+//             ))}
+//           </SimpleGrid>
+//         </Stack>
+//       </Paper>
+//     </Box>
+//   )
+// }
 
 function BeritaList() {
   const beritaState = useProxy(stateDashboardBerita)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
   useShallowEffect(() => {
     beritaState.berita.findMany.load()
   }, [])
 
-  if (!beritaState.berita.findMany.data) return <Stack py={10}>
+  const router = useRouter()
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+
-  </Stack>
+  const handleHapus = () => {
+    if (selectedId) {
+      beritaState.berita.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  if (!beritaState.berita.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+          <Grid>
-          {beritaState.berita.findMany.data?.map((item) => (
+            <GridCol span={{ base: 12, md: 11 }}>
-            <Text key={item.id}>{item.judul}</Text>
+              <Text fz={"xl"} fw={"bold"}>List Berita</Text>
-          ))}
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/berita/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}> 
+              <TableThead>
+                <TableTr>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Kategori</TableTh>
+                  <TableTh w={250}>Image</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {beritaState.berita.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd >
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd >{item.kategoriBerita?.name}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="gambar" />
+                    </TableTd>
+                    <TableTd>
+                      <Button bg={"green"} onClick={() => router.push(`/admin/desa/berita/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table> </Box>
         </Stack>
       </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
     </Box>
   )
 }
 
-function SelectCategory({ onChange }: {
-  onChange: (value: Prisma.KatagoryBeritaGetPayload<{
-    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 katagori' 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)/desa/potensi/create/page.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+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 { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import potensiDesaState from '../../../_state/desa/potensi';
+import { useRouter } from 'next/navigation';
+import CreateEditor from '../../../_com/createEditor';
+
+
+function CreatePotensi() {
+  const potensiState = useProxy(potensiDesaState);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async () => {
+    if (!file) return toast.warn('Pilih file gambar 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 upload gambar');
+    }
+
+    potensiState.create.form.imageId = uploaded.id;
+
+    await potensiState.create.create();
+
+    resetForm();
+    router.push('/admin/desa/potensi');
+  };
+
+  const resetForm = () => {
+    potensiState.create.form = {
+      name: '',
+      deskripsi: '',
+      kategori: '',
+      imageId: '',
+      content: '',
+    };
+
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Potensi</Title>
+
+          <TextInput
+            value={potensiState.create.form.name}
+            onChange={(val) => (potensiState.create.form.name = val.target.value)}
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            value={potensiState.create.form.deskripsi}
+            onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <TextInput
+            value={potensiState.create.form.kategori}
+            onChange={(val) => (potensiState.create.form.kategori = val.target.value)}
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+
+          <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</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>
+            <CreateEditor
+              value={potensiState.create.form.content}
+              onChange={(htmlContent) => {
+                potensiState.create.form.content = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            Simpan Potensi
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePotensi;

src/app/admin/(dashboard)/desa/potensi/detail/[id]/page.tsx

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

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

@@ -0,0 +1,169 @@
+'use client'
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import potensiDesaState from "@/app/admin/(dashboard)/_state/desa/potensi";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { Box, Button, Paper, Stack, Title, TextInput, FileInput, Center, Text, Image } from "@mantine/core";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+
+function EditPotensi() {
+  const potensiState = useProxy(potensiDesaState)
+  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: '',
+    deskripsi: '',
+    kategori: '',
+    content: '',
+    imageId: ''
+  });
+
+  useEffect(() => {
+    const loadPotensi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await potensiDesaState.edit.load(id); // ambil data dari API
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            kategori: data.kategori || '',
+            content: data.content || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading potensi:", error);
+        toast.error("Gagal memuat data potensi");
+      }
+    };
+
+    loadPotensi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      // Sinkronkan semua data dari formData ke state global
+      potensiState.edit.form = {
+        ...potensiState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        kategori: formData.kategori,
+        content: formData.content,
+      };
+
+      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");
+        }
+
+        potensiState.edit.form.imageId = uploaded.id;
+      }
+
+      await potensiState.edit.update();
+      toast.success("Potensi berhasil diperbarui!");
+      router.push("/admin/desa/potensi");
+    } catch (error) {
+      console.error("Error updating potensi:", error);
+      toast.error("Terjadi kesalahan saat memperbarui potensi");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Potensi</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, name: val }));
+              potensiState.edit.form.name = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <TextInput
+            value={formData.deskripsi}
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, deskripsi: val }));
+              potensiState.edit.form.deskripsi = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          <TextInput
+            value={formData.kategori}
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, kategori: val }));
+              potensiState.edit.form.kategori = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</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>
+            <EditEditor
+            value={formData.content}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                potensiState.edit.form.content = htmlContent;
+              }}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Edit Potensi</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPotensi;

src/app/admin/(dashboard)/desa/potensi/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListPotensi() {
-  return (
-    <Box>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <Title order={3}>List Potensi Desa</Title>
-      </Stack>
-    </Paper>
-  </Box>
-  );
-}
-
-export default ListPotensi;

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

@@ -1,40 +1,89 @@
+
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import ListPotensi from './listPage';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import potensiDesaState from '../../_state/desa/potensi';
+
 
 function Potensi() {
   return (
-    <Box py={10}>
+    <Box>
-      <Stack gap={"xs"}>
+      <HeaderSearch
-        <Title order={3}>Potensi Desa</Title>
+        title='Potensi Desa'
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
+        placeholder='pencarian'
-          <Box>
+        searchIcon={<IconSearch size={20} />}
-            <Paper bg={colors['white-1']} p={'md'}>
+      />
-              <Stack>
+      <ListPotensi />
-                <TextInput
-                  label="Nama Potensi"
-                  placeholder='masukkan nama potensi'
-                />
-                <TextInput
-                  label="Kategori Potensi"
-                  placeholder='masukkan kategori potensi'
-                />
-                <Group>
-                  <Button
-                    mt={10}
-                    bg={colors['blue-button']}
-                  >
-                    Submit
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <ListPotensi />
-        </SimpleGrid>
-      </Stack>
     </Box>
   );
 }
 
+function ListPotensi() {
+  const potensiState = useProxy(potensiDesaState)
+  useShallowEffect(() => {
+    potensiState.findMany.load()
+  }, [])
+
+  const router = useRouter()
+
+
+  if (!potensiState.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 Potensi'
+          href='/admin/desa/potensi/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Kategori</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {potensiState.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box></TableTd>
+                    <TableTd>{item.kategori}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/desa/potensi/detail/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
 export default Potensi;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -1,10 +1,46 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      demografi-pekerjaan
+      <Stack gap={"xs"}>
-    </div>
+        <Box>
+          <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={"md"}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Demografi Pekerjaan</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Jumlah Pekerja Laki - Laki</Text>}
+                placeholder="Masukkan jumlah pekerja laki - laki"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Jumlah Pekerja Perempuan</Text>}
+                placeholder="Masukkan jumlah pekerja perempuan"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Pekerjaan</Text>}
+                placeholder="Masukkan nama pekerjaan"
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={"md"}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Grafik Demografi Pekerjaan</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -1,10 +1,42 @@
+import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import colors from '@/con/colors';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      jumlah-penduduk-miskin-2024-2025
+      <Stack gap={"xs"}>
-    </div>
+        <Box>
+          <Paper p={"md"} bg={colors['white-1']} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Jumlah Penduduk Miskin 2024-2025</Title>
+              <TextInput
+                label="Tahun"
+                placeholder="masukkan tahun"
+              />
+              <TextInput
+                label="Jumlah Penduduk Miskin"
+                placeholder="masukkan jumlah penduduk miskin"
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper p={"md"} bg={colors['white-1']} >
+            <Stack gap={"xs"}>
+              <Title order={3}>Grafik Jumlah Penduduk Miskin 2024-2025</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -1,11 +1,37 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import DataPengangguran from './ui/dataPengangguran/page';
+import GrafikDataPengangguran from './ui/grafikDataPengangguran/page';
+import DetailDataPengangguran from './ui/detailDataPengangguran/page';
 
 function Page() {
   return (
-    <div>
+    <Stack>
-      jumlah-pengangguran-2024-2025
+      <Title order={3}>Jumlah Pengangguran 2024-2025</Title>
-    </div>
+      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Data Pengangguran Desa"}>
-  );
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          <TabsTab value="Data Pengangguran Desa">
+            Data Pengangguran Desa
+          </TabsTab>
+          <TabsTab value="Grafik Data Pengangguran Desa">
+            Grafik Data Pengangguran Desa
+          </TabsTab>
+          <TabsTab value="Detail Data Pengangguran Desa">
+            Detail Data Pengangguran Desa
+          </TabsTab>
+        </TabsList>
+        <TabsPanel value="Data Pengangguran Desa">
+          <DataPengangguran/>
+        </TabsPanel>
+        <TabsPanel value="Grafik Data Pengangguran Desa">
+          <GrafikDataPengangguran/>
+        </TabsPanel>
+        <TabsPanel value="Detail Data Pengangguran Desa">
+          <DetailDataPengangguran/>
+        </TabsPanel>
+      </Tabs>
+    </Stack>
+  )
 }
 
 export default Page;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/ui/dataPengangguran/page.tsx

@@ -0,0 +1,51 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+
+function DataPengangguran() {
+  return (
+    <Box>
+      <Box py={15}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Data Pengangguran</Title>
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Total Pengangguran</Text>}
+                  placeholder="masukkan total pengangguran"
+                />
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Pengangguran Terdidik</Text>}
+                  placeholder="masukkan pengangguran terdidik"
+                />
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Usia Produktif</Text>}
+                  placeholder="masukkan usia produktif"
+                />
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Sedang Mencari Kerja</Text>}
+                  placeholder="masukkan jumlah sedang mencari kerja"
+                />
+                <Group>
+                  <Button bg={colors['blue-button']}>
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>List Data Pengangguran</Title>
+                
+              </Stack>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+      </Box>
+    </Box>
+  );
+}
+
+export default DataPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/ui/detailDataPengangguran/page.tsx

@@ -0,0 +1,18 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+
+function DetailDataPengangguran() {
+  return (
+    <Box>
+      <Box py={15}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title order={3}>Detail Data Pengangguran</Title>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default DetailDataPengangguran;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/ui/grafikDataPengangguran/page.tsx

@@ -0,0 +1,49 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+
+function GrafikDataPengangguran() {
+  return (
+    <Box>
+      <Box py={15}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Data Pengangguran</Title>
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Total Pengangguran</Text>}
+                  placeholder="masukkan total pengangguran"
+                />
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Pengangguran Terdidik</Text>}
+                  placeholder="masukkan pengangguran terdidik"
+                />
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Usia Produktif</Text>}
+                  placeholder="masukkan usia produktif"
+                />
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Sedang Mencari Kerja</Text>}
+                  placeholder="masukkan jumlah sedang mencari kerja"
+                />
+                <Group>
+                  <Button bg={colors['blue-button']}>
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box py={10}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>List Data Pengangguran</Title>
+                
+              </Stack>
+            </Paper>
+          </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default GrafikDataPengangguran;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -1,10 +1,30 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import ProgramKemiskinan from './ui/program/page';
+import StatistikKemiskinan from './ui/statistik/page';
 
 function Page() {
   return (
-    <div>
+    <Stack>
-      program-kemiskinan
+      <Title order={3}>Program Kemiskinan</Title>
-    </div>
+      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Program Kemiskinan"}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          <TabsTab value="Program Kemiskinan">
+            Program Kemiskinan
+          </TabsTab>
+          <TabsTab value="Statistik Kemiskinan">
+            Statistik Kemiskinan
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="Program Kemiskinan">
+          <ProgramKemiskinan />
+        </TabsPanel>
+        <TabsPanel value="Statistik Kemiskinan">
+          <StatistikKemiskinan />
+        </TabsPanel>
+      </Tabs>
+    </Stack>
   );
 }
 

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/ui/program/page.tsx

@@ -0,0 +1,43 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+
+function ProgramKemiskinan() {
+  return (
+    <Box py={15}>
+      <SimpleGrid cols={{base: 1, md: 2}}>
+        <Box>
+        <Paper p={"md"} bg={colors['white-1']}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Program Kemiskinan</Title>
+          <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program</Text>}
+            placeholder="Masukkan nama program"
+          />
+          <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi Program</Text>}
+            placeholder="Masukkan deskripsi program"
+          />
+          <Group>
+            <Button
+              bg={colors['blue-button']}
+            >
+              Submit
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+        </Box>
+        <Box>
+          <Paper p={"md"} bg={colors['white-1']}>
+            <Stack gap={"xs"}>
+              <Title order={3}>List Data Program Kemiskinan</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default ProgramKemiskinan;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/ui/statistik/page.tsx

@@ -0,0 +1,43 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+
+function StatistikKemiskinan() {
+  return (
+    <Box py={15}>
+      <Stack gap={"xs"}>
+        <Box>
+          <Paper w={{base: '100%', md: '50%'}} p={"md"} bg={colors['white-1']}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Statistik Kemiskinan</Title>
+              <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
+              placeholder="Masukkan tahun"
+              />
+              <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Jumlah Penduduk Miskin</Text>}
+              placeholder="Masukkan jumlah penduduk miskin"
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper p={"md"} bg={colors['white-1']}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Statistik Kemiskinan</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default StatistikKemiskinan;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -1,10 +1,31 @@
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import DataSektorUnggulan from './ui/data_sektor_unggulan/page';
+import GrafikDataSektor from './ui/grafik_data_sektor/page';
 
 function Page() {
   return (
-    <div>
+    <Stack>
-      sektor-unggulan-desa
+      <Title order={3}>Sektor Unggulan Desa</Title>
-    </div>
+      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Data Sektor Unggulan Desa"}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          <TabsTab value="Data Sektor Unggulan Desa">
+            Data Sektor Unggulan Desa
+          </TabsTab>
+          <TabsTab value="Grafik Data Sektor Unggulan Desa">
+            Grafik Data Sektor Unggulan Desa
+          </TabsTab>
+        </TabsList>
+
+        <TabsPanel value="Data Sektor Unggulan Desa">
+          <DataSektorUnggulan />
+        </TabsPanel>
+        <TabsPanel value="Grafik Data Sektor Unggulan Desa">
+          <GrafikDataSektor />
+        </TabsPanel>
+      </Tabs>
+    </Stack>
   );
 }
 

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/ui/data_sektor_unggulan/page.tsx

@@ -0,0 +1,45 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+
+function DataSektorUnggulan() {
+  return (
+    <Box py={15}>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper p={"md"} bg={colors['white-1']}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Data Sektor Unggulan</Title>
+                <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Sektor Unggulan</Text>}
+                placeholder="Masukkan nama sektor unggulan"
+                />
+                <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Sektor Unggulan</Text>}
+                placeholder="Masukkan deskripsi sektor unggulan"
+                />
+                <Group>
+                  <Button
+                    bg={colors['blue-button']}
+                  >
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper p={"md"} bg={colors['white-1']}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Data Sektor Unggulan</Title>
+              </Stack>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default DataSektorUnggulan;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/ui/grafik_data_sektor/page.tsx

@@ -0,0 +1,44 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+
+function GrafikDataSektor() {
+  return (
+    <Box py={15}>
+      <Stack gap={"xs"}>
+        <Box>
+        <Paper w={{base: '100%', md: '50%'}} p={"md"} bg={colors['white-1']}>
+          <Stack gap={"xs"}>
+            <Title order={3}>Grafik Data Sektor Unggulan</Title>
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Sektor Unggulan</Text>}
+            placeholder="Masukkan nama sektor unggulan"
+            />
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Jumlah Sektor Unggulan</Text>}
+            placeholder="Masukkan jumlah sektor unggulan"
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+        </Box>
+        <Box>
+        <Paper p={"md"} bg={colors['white-1']}>
+          <Stack gap={"xs"}>
+            <Title order={3}>Grafik Sektor Unggulan</Title>
+            
+          </Stack>
+        </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default GrafikDataSektor;

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -1,10 +1,43 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <Box py={5}>
-      ajukan-ide-inovatif
+    <Paper bg={colors['white-1']} p={'md'}>
-    </div>
+      <Stack gap={"xs"}>
+        <Title order={3}>Ajukan Ide Inovatif</Title>
+        <Box>
+          <Table striped withRowBorders withColumnBorders withTableBorder>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Nama Ide Inovatif</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Masalah yang ingin diatasi</TableTh>
+                <TableTh>Benefit</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              
+                <TableTr>
+                  <TableTd>1</TableTd>
+                  <TableTd>nama</TableTd>
+                  <TableTd>alamat</TableTd>
+                  <TableTd>ide inovatif</TableTd>
+                  <TableTd>deskripsi</TableTd>
+                  <TableTd>masalah</TableTd>
+                  <TableTd>benefit</TableTd>
+                </TableTr>
+              
+            </TableTbody>
+          </Table> </Box>
+      </Stack>
+    </Paper>
+  </Box>
   );
 }
 

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

@@ -1,10 +1,49 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      desa-digital-smart-village
+      <Stack gap={"xs"}>
-    </div>
+        <Box>
+          <Paper w={{ base: '100%', md: '50%' }} p={"md"} bg={colors['white-1']}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Create Data Desa Digital Smart Village</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Desa Digital Smart Village</Text>}
+                placeholder="Masukkan nama desa digital smart village"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Desa Digital Smart Village</Text>}
+                placeholder="Masukkan deskripsi desa digital smart village"
+              />
+              <Box>
+                <Text fz={"sm"} fw={"bold"}>
+                  Upload Gambar Desa Digital Smart Village
+                </Text>
+                <IconImageInPicture size={24} />
+              </Box>
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper p={"md"} bg={colors['white-1']}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Create Data Desa Digital Smart Village</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function CreateInfoTeknologiTepatGuna() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors['white-1']}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Info Teknologi Tepat Guna</Title>
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={24}/>
+            </Box>
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Nama Info Teknologi Tepat Guna</Text>}
+              placeholder="Masukkan nama info teknologi tepat guna"
+            />
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Deskripsi Info Teknologi Tepat Guna</Text>}
+              placeholder="Masukkan deskripsi info teknologi tepat guna"
+            />
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreateInfoTeknologiTepatGuna;

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/listData/page.tsx

@@ -0,0 +1,31 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListDataInfoTeknologiTepatGuna() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Paper p={'md'} bg={colors['BG-trans']}>
+          <Title order={4}>List Data Info Teknologi Tepat Guna</Title>
+          <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 1
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 2
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 3
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 4
+            </Paper>
+          </SimpleGrid>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ListDataInfoTeknologiTepatGuna;

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -1,10 +1,17 @@
+import { Box, Stack, Title } from '@mantine/core';
 import React from 'react';
+import CreateInfoTeknologiTepatGuna from './create/page';
+import ListDataInfoTeknologiTepatGuna from './listData/page';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      info-teknologi-tepat-guna
+      <Stack gap={'xs'}>
-    </div>
+        <Title order={3}>Info Teknologi Tepat Guna</Title>
+        <CreateInfoTeknologiTepatGuna/>
+        <ListDataInfoTeknologiTepatGuna/>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx

@@ -1,10 +1,34 @@
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import KolaborasiInovasi from './ui/kolaborasiInovasi/page';
+import MitraKolaborasi from './ui/mitraKolaborasi/page';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      kolaborasi-inovasi
+      <Stack>
-    </div>
+      <Title order={3}>Kolaborasi Inovasi</Title>
+        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Kolaborasi Inovasi"}>
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="Kolaborasi Inovasi">
+               Kolaborasi Inovasi
+            </TabsTab>
+            <TabsTab value="Mitra Kolaborasi">
+              Mitra Kolaborasi
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="Kolaborasi Inovasi">
+            <KolaborasiInovasi/>
+          </TabsPanel>
+
+          <TabsPanel value="Mitra Kolaborasi">
+            <MitraKolaborasi/>
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/kolaborasiInovasi/page.tsx

@@ -0,0 +1,53 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+
+function KolaborasiInovasi() {
+  return (
+    <Box py={15}>
+      <Stack gap={"xs"}>
+        <Box>
+          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Title order={4}>Create Kolaborasi Inovasi</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
+                placeholder="Masukkan tahun"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
+                placeholder="Masukkan nama kolaborasi inovasi"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Kolaborasi Inovasi</Text>}
+                placeholder="Masukkan deskripsi kolaborasi inovasi"
+              />
+
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Title order={4}>List Data Kolaborasi Inovasi</Title>
+            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 1
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 2
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 3
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 4
+              </Paper>
+            </SimpleGrid>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default KolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/mitraKolaborasi/page.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import { IconImageInPicture } from '@tabler/icons-react';
+
+function MitraKolaborasi() {
+  return (
+    <Box py={15}>
+      <Stack gap={'xs'}>
+        <Box>
+        <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+          <Stack gap={'xs'}>
+            <Title order={4}>Create Mitra Kolaborasi</Title>
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Nama Mitra Kolaborasi</Text>}
+              placeholder="Masukkan nama mitra kolaborasi"
+            />
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={50}/>
+            </Box>
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Title order={4}>List Data Kolaborasi Inovasi</Title>
+            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 1
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 2
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 3
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 4
+              </Paper>
+            </SimpleGrid>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default MitraKolaborasi;

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>
+    <Box>
-      layanan-online-desa
+      <Stack gap={"xs"}>
-    </div>
+        <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/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx

@@ -0,0 +1,37 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function ProgramKreatifCreate() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors["white-1"]}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Program Kreatif Desa</Title>
+            <Box>
+              <Text fz={"sm"} fw={"bold"}>Gambar</Text>
+              <IconImageInPicture size={24}/>
+            </Box>
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program</Text>}
+            placeholder="Masukkan nama program"
+            />
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="Masukkan deskripsi"
+            />
+            <Group>
+              <Button
+              bg={colors["blue-button"]}
+              >Simpan</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ProgramKreatifCreate;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/listData/page.tsx

@@ -0,0 +1,29 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListDataProgramKreatifDesa() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Data Program Kreatif Desa</Title>
+        <SimpleGrid cols={{ base: 1, md: 4 }}>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 1
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 2
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 3
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 4
+          </Paper>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ListDataProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx

@@ -1,10 +1,17 @@
+import { Box, Stack, Title } from '@mantine/core';
 import React from 'react';
+import ProgramKreatifCreate from './create/page';
+import ListDataProgramKreatifDesa from './listData/page';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      program-kreatif-desa
+      <Stack gap={"xs"}>
-    </div>
+        <Title order={3}>Program Kreatif Desa</Title>
+        <ProgramKreatifCreate />
+        <ListDataProgramKreatifDesa />
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx

@@ -0,0 +1,73 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+function CreateDataLingkunganDesa() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Data Lingkungan Desa</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          {/* <FileInput
+                        label={<Text fz="sm" fw="bold">Upload Gambar</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>
+            {/* <CreateEditor
+                            value={potensiState.create.form.content}
+                            onChange={(htmlContent) => {
+                                potensiState.create.form.content = htmlContent;
+                            }}
+                        /> */}
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan Data
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx

@@ -1,11 +1,66 @@
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
+import HeaderSearch from '../../_com/header';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function DataLingkunganDesa() {
   return (
-    <div>
+    <Box>
-      data-lingkungan-desa
+      <HeaderSearch
-    </div>
+      title='Data Lingkungan Desa'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListDataLingkunganDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListDataLingkunganDesa() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+          <JudulList
+          title='List Data Lingkungan Desa'
+          href='/admin/lingkungan/data-lingkungan-desa/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100}  alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default DataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+import React from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function Page() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Edukasi Lingkungan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</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">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx

@@ -1,11 +1,66 @@
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
+import HeaderSearch from '../../_com/header';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function Page() { 
   return (
-    <div>
+    <Box py={10}>
-      edukasi-lingkungan
+      <HeaderSearch
-    </div>
+      title='Edukasi Lingkungan'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListEdukasiLingkungan/>
+    </Box>
   );
 }
 
+function ListEdukasiLingkungan() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Edukasi Lingkungan'
+          href='/admin/lingkungan/edukasi-lingkungan/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} src="/" alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
 export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx

@@ -0,0 +1,65 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+function Page() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Gotong Royong</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="masukkan kategori"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</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">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx

@@ -1,11 +1,68 @@
-import React from 'react';
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import colors from '@/con/colors';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function GotongRoyong() {
   return (
-    <div>
+    <Box>
-      gotong-royong
+      <HeaderSearch
-    </div>
+      title='Gotong Royong'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListGotongRoyong/>
+    </Box>
   );
 }
 
-export default Page;
+function ListGotongRoyong() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Gotong Royong'
+          href='/admin/lingkungan/gotong-royong/create'
+          />
+          <Box style={{ overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Kategori</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>Kategori</TableTd>
+                  <TableTd>
+                    <Image w={100} src="/" alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+                
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default GotongRoyong;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import React from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function Page() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Konservasi Adat Bali</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</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">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx

@@ -1,11 +1,66 @@
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
+import HeaderSearch from '../../_com/header';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function KonservasiAdatBali() {
   return (
-    <div>
+    <Box py={10}>
-     konservasi-adat-bali
+      <HeaderSearch
-    </div>
+      title='Konservasi Adat Bali'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListKonservasiAdatBali />
+    </Box>
   );
 }
 
-export default Page;
+function ListKonservasiAdatBali() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Konservasi Adat Bali'
+          href='/admin/lingkungan/konservasi-adat-bali/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} src="/" alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default KonservasiAdatBali;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx

@@ -0,0 +1,71 @@
+'use client'
+import colors from "@/con/colors";
+import { Box, Button, Paper, Stack, Title, TextInput, Text } from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+
+export default function CreatePengelolaanSampahBankSampah() {
+    const router = useRouter()
+    return (
+        <Box>
+            <Box mb={10}>
+                <Button variant="subtle" onClick={() => router.back()}>
+                    <IconArrowBack color={colors['blue-button']} size={25} />
+                </Button>
+            </Box>
+
+            <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+                <Stack gap="xs">
+                    <Title order={3}>Create Mekanisme Bank Sampah</Title>
+
+                    <TextInput
+                        label={<Text fz="sm" fw="bold">Judul</Text>}
+                        placeholder="masukkan judul"
+                    />
+
+                    <TextInput
+                        label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+                        placeholder="masukkan deskripsi"
+                    />
+
+                    {/* <FileInput
+                        label={<Text fz="sm" fw="bold">Upload Gambar</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>
+                        {/* <CreateEditor
+                            value={potensiState.create.form.content}
+                            onChange={(htmlContent) => {
+                                potensiState.create.form.content = htmlContent;
+                            }}
+                        /> */}
+                    </Box>
+
+                    <Button bg={colors['blue-button']} >
+                        Simpan
+                    </Button>
+                </Stack>
+            </Paper>
+        </Box>
+    )
+}
+

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,11 +1,33 @@
-import React from 'react';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import ListPage from './ui/list_page/listPage';
+import colors from '@/con/colors';
 
-function Page() {
+function PengelolaanSampahBankSampah() {
   return (
-    <div>
+    <Box>
-      pengelolaan-sampah-bank-sampah
+      <Stack>
-    </div>
+        <Title order={3}>Pengelolaan Sampah Bank Sampah</Title>
-  );
+        <Tabs defaultValue="list" color={colors['blue-button']} variant="pills">
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="list">
+              List Pengelolaan Sampah Bank Sampah
+            </TabsTab>
+            <TabsTab value="maps">
+              Maps
+            </TabsTab>
+          </TabsList> 
+
+          <TabsPanel value="list">
+            <ListPage />
+          </TabsPanel>
+
+          <TabsPanel value="maps">
+            Maps
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
+  )
 }
 
-export default Page;
+export default PengelolaanSampahBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/ui/list_page/listPage.tsx

@@ -0,0 +1,66 @@
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import React from 'react';
+import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import JudulList from '@/app/admin/(dashboard)/_com/judulList';
+
+function ListPage() {
+  return (
+    <Box py={10}>
+      <HeaderSearch
+        title='Mekanisme Bank Sampah'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListPengelolaanSampahBankSampah />
+    </Box>
+  );
+}
+
+function ListPengelolaanSampahBankSampah() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Mekanisme Bank Sampah'
+          href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100}  alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default ListPage;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx

@@ -0,0 +1,73 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function Page() {
+  const router = useRouter()
+  return (
+    <Box>
+     <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Program Penghijauan</Title>
+
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <Text fz="sm" fw="bold">Gambar</Text>
+          <IconImageInPicture size={25} />
+          {/* <FileInput
+            label={<Text fz="sm" fw="bold">Upload Gambar</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>
+              {/* <CreateEditor
+                  value={potensiState.create.form.content}
+                  onChange={(htmlContent) => {
+                      potensiState.create.form.content = htmlContent;
+                  }}
+              /> */}
+          </Box>
+
+          <Button bg={colors['blue-button']}>
+              Simpan Potensi
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx

@@ -1,11 +1,68 @@
-import React from 'react';
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import HeaderSearch from '../../_com/header';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function ProgramPenghijauan() {
   return (
-    <div>
+   <Box>
-      program-penghijauan
+    <HeaderSearch
-    </div>
+    title='Program Penghijauan'
+    placeholder='pencarian'
+    searchIcon={<IconSearch size={20}/>}
+    />
+    <ListManfaatPenghijauan/>
+   </Box>
   );
 }
 
-export default Page;
+function ListManfaatPenghijauan() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+          title='List Manfaat Program Penghijauan'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Jumlah</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Jumlah</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100}  alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default ProgramPenghijauan;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_ui/grafik_hasil_kepuasan_masyarakat/page.tsx

@@ -36,7 +36,6 @@ function GrafikHasilKepuasan() {
           <Stack>
             <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
             <TextInput
-              w={{ base: '100%', md: '50%' }}
               label="Label"
               placeholder="masukkan label"
               value={grafikHasilKepuasan.create.form.label}
@@ -45,7 +44,6 @@ function GrafikHasilKepuasan() {
               }}
             />
             <TextInput
-              w={{ base: '100%', md: '50%' }}
               label="Jumlah Kepuasan"
               type="number"
               placeholder="masukkan jumlah kepuasan"

src/app/admin/layout.tsx

@@ -42,7 +42,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       }}
       padding={'md'}
     >
-      <AppShellHeader bg={colors["white-trans-1"]}>
+      <AppShellHeader bg={colors["white-1"]}>
         <Group px={10} align="center">
           {!desktopOpened && (
             <ActionIcon variant="light" onClick={toggleDesktop}>

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

@@ -1,9 +1,9 @@
 import prisma from "@/lib/prisma";
 
- async function katagoryBeritaFindMany() {
+ async function kategoriBeritaFindMany() {
-  const data = await prisma.katagoryBerita.findMany();
+  const data = await prisma.kategoriBerita.findMany();
   return { data };
 }
 
-export default katagoryBeritaFindMany
+export default kategoriBeritaFindMany
 

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

@@ -6,23 +6,21 @@ type FormCreate = Prisma.BeritaGetPayload<{
   select: {
     judul: true;
     deskripsi: true;
-    image: true;
     content: true;
-    katagoryBeritaId: true;
+    kategoriBeritaId: true;
+    imageId: true;
   };
 }>;
 async function beritaCreate(context: Context) {
   const body = context.body as FormCreate;
 
-//   console.log(body)
-
   await prisma.berita.create({
   data: {
       content: body.content,
       deskripsi: body.deskripsi,
-      image: body.image,
+      imageId: body.imageId,
       judul: body.judul,
-      katagoryBeritaId: body.katagoryBeritaId,
+      kategoriBeritaId: body.kategoriBeritaId,
     },
   });
 

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

@@ -0,0 +1,55 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+const beritaDelete = async (context: Context) => {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const berita = await prisma.berita.findUnique({
+    where: { id },
+    include: {
+      image: true,
+      kategoriBerita: true, // pastikan relasi image sudah ada di prisma schema
+    },
+  });
+
+  if (!berita) {
+    return {
+      status: 404,
+      body: "Berita tidak ditemukan",
+    };
+  }
+
+  // Hapus file gambar dari filesystem jika ada
+  if (berita.image) {
+    try {
+      const filePath = path.join(berita.image.path, berita.image.name);
+      await fs.unlink(filePath);
+      await prisma.fileStorage.delete({
+        where: { id: berita.image.id },
+      });
+    } catch (err) {
+      console.error("Gagal hapus file image:", err);
+    }
+  }
+
+  // Hapus berita dari DB
+  await prisma.berita.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Berita dan file terkait berhasil dihapus",
+  };
+};
+
+export default beritaDelete;

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

@@ -0,0 +1,59 @@
+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 Response.json({
+      success: true,
+      message: "Success fetch berita by ID",
+      data,
+    }, {
+      status: 200,
+    });
+  } catch (e) {
+    console.error("Find by ID error:", e);
+    return Response.json({
+      success: false,
+      message: "Gagal mengambil berita: " + (e instanceof Error ? e.message : 'Unknown error'),
+    }, {
+      status: 500,
+    });
+  }
+}

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

@@ -1,8 +1,27 @@
 import prisma from "@/lib/prisma";
 
-export default async function beritaFindMany() {
+async function beritaFindMany() {
-  const res = await prisma.berita.findMany();
+  try {
-  return {
+    const data = await prisma.berita.findMany({
-    data: res,
+      where: { isActive: true },
-  };
+      include: {
+        image: true,
+        kategoriBerita: true,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Success fetch berita",
+      data,
+    };
+  } catch (e) {
+    console.error("Find many error:", e);
+    return {
+      success: false,
+      message: "Failed fetch berita",
+    };
+  }
 }
+
+export default beritaFindMany;

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

@@ -1,19 +1,43 @@
 import Elysia, { t } from "elysia";
-import katagoryBeritaFindMany from "./category";
+import kategoriBeritaFindMany from "./category";
 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", katagoryBeritaFindMany)
+  .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(),
       deskripsi: t.String(),
-      image: t.String(),
+      imageId: t.String(),
       content: t.String(),
-      katagoryBeritaId: t.Union([t.String(), t.Null()]),
+      kategoriBeritaId: t.Union([t.String(), t.Null()]),
     }),
-  });
+  })
+  .delete("/delete/:id", beritaDelete)
+  .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

@@ -0,0 +1,98 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import { Prisma } from "@prisma/client";
+import fs from "fs/promises";
+import path from "path";
+
+type FormUpdate = Prisma.BeritaGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+    content: true;
+    kategoriBeritaId: true;
+    imageId: true;
+  };
+}>;
+
+async function beritaUpdate(context: Context) {
+  try {
+    const id = context.params?.id as string; // ambil dari URL
+    const body = (await context.body) as Omit<FormUpdate, "id">;
+  
+    const {
+      judul,
+      deskripsi,
+      content,
+      kategoriBeritaId,
+      imageId,
+    } = body;
+  
+    if (!id) {
+      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 new Response(
+        JSON.stringify({ success: false, message: "Berita 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 (err) {
+          console.error("Gagal hapus gambar lama:", err);
+        }
+      }
+    }
+  
+    const updated = await prisma.berita.update({
+      where: { id },
+      data: {
+        judul,
+        deskripsi,
+        content,
+        kategoriBeritaId: kategoriBeritaId || null,
+        imageId,
+      },
+    });
+  
+    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;

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

@@ -2,11 +2,12 @@ import Elysia from "elysia";
 import Berita from "./berita";
 import Pengumuman from "./pengumuman";
 import ProfileDesa from "./profile/profile_desa";
- 
+import PotensiDesa from "./potensi"; 
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(Berita)
   .use(Pengumuman)
   .use(ProfileDesa)
+  .use(PotensiDesa)
 
 export default Desa;

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

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

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

@@ -0,0 +1,54 @@
+import prisma from "@/lib/prisma";
+import path from "path";
+import { Context } from "vm";
+import fs from "fs/promises";
+
+const potensiDesaDelete = async (context: Context) => {
+    const id = context.params?.id as string;
+
+    if (!id) {
+        return {
+            status: 400,
+            body: "ID tidak diberikan",
+        };
+    }
+
+    const potensiDesa = await prisma.potensiDesa.findUnique({
+        where: { id },
+        include: {
+            image: true,
+        },
+    });
+
+    if (!potensiDesa) {
+        return {
+            status: 404,
+            body: "Potensi Desa tidak ditemukan",
+        };
+    }
+
+    // Hapus file gambar dari filesystem jika ada
+    if (potensiDesa.image) {
+        try {
+            const filePath = path.join(potensiDesa.image.path, potensiDesa.image.name);
+            await fs.unlink(filePath);
+            await prisma.fileStorage.delete({
+                where: { id: potensiDesa.image.id },
+            });
+        } catch (err) {
+            console.error("Gagal hapus file image:", err);
+        }
+    }
+
+    // Hapus potensi desa dari DB
+    await prisma.potensiDesa.delete({
+        where: { id },
+    });
+
+    return {
+        success: true,
+        message: "Potensi Desa dan file terkait berhasil dihapus",
+    };
+};
+
+export default potensiDesaDelete;

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

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

src/app/api/[[...slugs]]/_lib/desa/potensi/find-unique.ts

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

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

@@ -0,0 +1,45 @@
+import Elysia from "elysia";
+import createPotensiDesa from "./create";
+import { t } from "elysia";
+import potensiDesaDelete from "./del";
+import potensiDesaFindMany from "./find-many";
+import potensiDesaUpdate from "./updt";
+import findUnique from "./find-unique";
+
+
+const PotensiDesa = new Elysia({
+    prefix: "/potensi", tags: ["Desa/Potensi"]
+})
+    .post("/create", createPotensiDesa, {
+        body: t.Object({
+            name: t.String(),
+            deskripsi: t.String(),
+            kategori: t.String(),
+            imageId: t.String(),
+            content: t.String(),
+        }),
+    })
+    .delete("/del/:id", potensiDesaDelete)
+    .get("/find-many", potensiDesaFindMany)
+    .get("/:id", async (context) => {
+          const response = await findUnique(new Request(context.request));
+          return response;
+        })
+    .put(
+        "/:id",
+        async (context) => {
+          const response = await potensiDesaUpdate(context);
+          return response;
+        },
+        {
+            body: t.Object({
+                name: t.String(),
+                deskripsi: t.String(),
+                kategori: t.String(),
+                imageId: t.String(),
+                content: t.String(),
+            }),
+        }
+    )
+
+export default PotensiDesa

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

@@ -0,0 +1,98 @@
+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.PotensiDesaGetPayload<{
+    select: {
+        id: true;
+        name: true;
+        deskripsi: true;
+        kategori: true;
+        imageId: true;
+        content: true;
+    };
+}>;
+
+export default async function potensiDesaUpdate(context: Context) {
+    try {
+        const id = context.params?.id as string;
+    const body = (await context.body) as Omit<FormUpdate, "id">;
+
+    const {
+        name,
+        deskripsi,
+        kategori,
+        imageId,
+        content,
+        } = 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.potensiDesa.findUnique({
+            where: { id },
+            include: {
+                image: true,
+            }
+        });
+
+        if (!existing) {
+            return new Response(
+                JSON.stringify({ success: false, message: "Potensi Desa 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.potensiDesa.update({
+            where: { id },
+            data: {
+                name,
+                deskripsi,
+                kategori,
+                imageId,
+                content,
+            },
+        });
+
+        return new Response(
+            JSON.stringify({
+                success: true,
+                message: "Potensi Desa berhasil diupdate",
+                data: updated,
+            }),
+            { status: 200, headers: { 'Content-Type': 'application/json' } }
+        );
+    } catch (error) {
+        console.error("Error updating potensi desa:", error);
+        return new Response(
+            JSON.stringify({
+                success: false,
+                message: "Terjadi kesalahan saat mengupdate potensi desa",
+            }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+    
+}
+    

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/del.ts

@@ -0,0 +1,60 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+const UPLOAD_DIR = process.env.WIBU_UPLOAD_DIR;
+
+const fileStorageDelete = async (context: Context) => {
+  const { params } = context;
+
+  const id = params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID file tidak ditemukan",
+    };
+  }
+
+  if (!UPLOAD_DIR) {
+    return {
+      status: 500,
+      body: "UPLOAD_DIR belum dikonfigurasi",
+    };
+  }
+
+  // Cek file dari database
+  const file = await prisma.fileStorage.findUnique({
+    where: { id },
+  });
+
+  if (!file) {
+    return {
+      status: 404,
+      body: "File tidak ditemukan di database",
+    };
+  }
+
+  const filePath = path.join(file.path, file.name);
+
+  try {
+    // Hapus file dari filesystem
+    await fs.unlink(filePath);
+  } catch (err) {
+    console.error("Gagal hapus file:", err);
+    // Tetap lanjutkan hapus dari database meskipun file fisik tidak ditemukan
+  }
+
+  // Hapus dari database
+  await prisma.fileStorage.delete({
+    where: { id },
+  });
+
+  return {
+    message: "File berhasil dihapus",
+    deletedId: id,
+  };
+};
+
+export default fileStorageDelete;

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

@@ -2,6 +2,7 @@ import Elysia, { t } from "elysia";
 import fileStorageCreate from "./_lib/create";
 import fileStorageFindUnique from "./_lib/findUniq";
 import { fileStorageFindMany } from "./_lib/findMany";
+import fileStorageDelete from "./_lib/del";
 
 const FileStorage = new Elysia({
   prefix: "/api/fileStorage",
@@ -14,6 +15,7 @@ const FileStorage = new Elysia({
     }),
   })
   .get("/findUnique/:name", fileStorageFindUnique)
-  .get("/findMany", fileStorageFindMany);
+  .get("/findMany", fileStorageFindMany)
+  .delete("/delete/:id", fileStorageDelete);
 
 export default FileStorage;

src/app/darmasaba/_com/Footer.tsx

@@ -10,7 +10,7 @@ function Footer() {
   return (
     <>
       <Stack bg={colors["blue-button"]}>
-        <Box w={mobile ? "100%" : "100%"} p={"xl"} h={{ base: 1850, md: 1100 }} >
+        <Box w={mobile ? "100%" : "100%"} p={"xl"} h={{ base: 2500, md: 1100 }} >
           <Center>
             <Paper w={"100%"}>
               <Box component="footer" py="xl">

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

@@ -44,9 +44,9 @@ function DesaAntiKorupsi() {
     <Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1150}>
       <Container w={{ base: "100%", md: "80%" }} p={"xl"} >
         <Center>
-          <Text fz={"3.4rem"}>Desa Anti Korupsi</Text>
+          <Text fz={{base: "2.4rem", md: "3.4rem"}}>Desa Anti Korupsi</Text>
         </Center>
-        <Text ta={"center"} fz={"1.4rem"}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
+        <Text ta={"center"} fz={{base: "1.2rem", md: "1.4rem"}}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
         <Center py={20}>
           <Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]} component={Link} href={"/darmasaba/desaantikorupsi"}>Selengkapnya</Button>
         </Center>
@@ -65,13 +65,13 @@ function DesaAntiKorupsi() {
               <Paper p={"lg"} >
                 <Flex gap={"lg"} justify={"center"} align={"center"}>
                   <Box >
-                    <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                    <Text fz={{base: "1.2rem", md: "lg"}} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
                     <Flex justify={"center"} align={"center"}>
                       <Box>
                         {v.icon}
                       </Box>
                       <Box px={20}>
-                        <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
+                        <Text fz={"sm"} ta={{base: "left", md: "justify"}}>{v.deskripsi}</Text>
                       </Box>
                     </Flex>
                   </Box>

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

@@ -1,7 +1,8 @@
 "use client";
-import { Stack, Container, Center, Text, Paper, Flex, Box, SimpleGrid } from "@mantine/core";
-import { BarChart, PieChart } from '@mantine/charts';
 import colors from "@/con/colors";
+import { BarChart, PieChart } from '@mantine/charts';
+import { Box, Center, Container, Flex, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
 
 const dataBarChart = [
   {
@@ -71,13 +72,14 @@ const dataPieChart3 = [
 ]
 
 function Kepuasan() {
+  const isMobile = useMediaQuery('(max-width: 768px)');
   return (
     <Stack p={"sm"}>
       <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
         <Center>
-          <Text fz={"3.4rem"}>Indeks Kepuasan Masyarakat</Text>
+          <Text ta={"center"} fz={{base: "2.4rem", md: "3.4rem"}}>Indeks Kepuasan Masyarakat</Text>
         </Center>
-        <Text fz={"1.4rem"} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
+        <Text fz={{base: "1.2rem", md: "1.4rem"}} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
       </Container>
       <Box px={"xl"}>
         <Paper p={"lg"} bg={colors.Bg}>
@@ -118,7 +120,7 @@ function Kepuasan() {
                   <Text fw={"bold"}>Jenis Kelamin</Text>
                   <Box py={"xl"}>
                     <PieChart
-                      size={250}
+                      size={isMobile ? 100 : 220}
                       withLabelsLine
                       labelsPosition="outside"
                       labelsType="percent"
@@ -135,7 +137,7 @@ function Kepuasan() {
                   <Text fw={"bold"}>Pilihan</Text>
                   <Box py={"xl"}>
                     <PieChart
-                      size={250}
+                      size={isMobile ? 100 : 220}
                       withLabelsLine
                       labelsPosition="outside"
                       labelsType="percent"
@@ -152,7 +154,7 @@ function Kepuasan() {
                   <Text fw={"bold"}>Umur</Text>
                   <Box py={"xl"}>
                     <PieChart
-                      size={250}
+                      size={isMobile ? 100 : 220}
                       withLabelsLine
                       labelsPosition="outside"
                       labelsType="percent"

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

@@ -5,9 +5,9 @@ import {
   Card,
   Flex,
   Grid,
+  GridCol,
   Image,
   Paper,
-  SimpleGrid,
   Stack,
   Text
 } from "@mantine/core";
@@ -58,10 +58,9 @@ function LandingPage() {
                 <Grid
                 >
                   <Grid.Col span={{
-                    base: 2,
+                    base: 3,
-                    sm: 3,
+                    lg: 2,
                     md: 3,
-                    xl: 2
                   }}>
                     <Box
                       pos={"relative"}
@@ -88,10 +87,9 @@ function LandingPage() {
                   </Grid.Col>
 
                   <Grid.Col span={{
-                    base: 2,
+                    base: 6,
-                    sm: 3,
+                    lg: 2,
                     md: 3,
-                    xl: 2
                   }}>
                     <Box
                       pos={"relative"}
@@ -118,10 +116,9 @@ function LandingPage() {
                     </Box>
                   </Grid.Col>
                   <Grid.Col span={{
-                    base: 8,
+                    base: 12,
-                    sm: 12,
+                    lg: 8,
                     md: 12,
-                    xl: 8
                   }}>
                     <Paper
                       pos={"relative"}
@@ -130,15 +127,14 @@ function LandingPage() {
                       w={{ base: "100%", sm: "auto", md: "auto" }}
                       flex={{ base: "1", sm: "1", md: "1" }}
                     >
-                      <SimpleGrid
+                      <Grid
-                        cols={{
-                          base: 2,
-                          sm: 1,
-                          md: 2,
-                        }}
-                        spacing={{ base: "xs", md: "md" }}
                       >
-                        <Box>
+                        <GridCol span={{
+                          base: 12,
+                          lg: 6,
+                          md: 6,
+                        }}>
+                          <Box>
                           <Text c={colors["white-1"]} fz={"sm"}>
                             Jadwal Kerja
                           </Text>
@@ -168,7 +164,14 @@ function LandingPage() {
                             </Flex>
                           </Paper>
                         </Box>
-                        <Box>
+                        </GridCol>
+                        
+                        <GridCol span={{
+                          base: 12,
+                          lg: 6,
+                          md: 6,
+                        }}>
+                           <Box>
                           <Text c={colors["white-1"]} fz={"sm"}>
                             Rabu, 10 Maret 2025
                           </Text>
@@ -187,7 +190,8 @@ function LandingPage() {
                             </Box>
                           </Paper>
                         </Box>
-                      </SimpleGrid>
+                        </GridCol>
+                      </Grid>
                     </Paper>
                   </Grid.Col>
 

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

@@ -51,7 +51,7 @@ function Penghargaan() {
               <Text fz={"1.4rem"} c={"white"}>
                 Juara 2 Duta Investasi
               </Text>
-              <Text fz={"1.4rem"} c={"white"}>
+              <Text fz={"1.2rem"} c={"white"}>
                 Juara Favorit Lomba Video Pendek
               </Text>
             </Stack>