Sinkronisasi UI & API Admin - User Submenu Berita

prisma/schema.prisma

@@ -221,81 +221,6 @@ model KategoriPrestasiDesa {
   PrestasiDesa PrestasiDesa[]
 }
 
-//========================================= INDEKS KEPUASAN MASYARAKAT ========================================= //
-// Entitas Survey
-model Survey {
-  id               String        @id @default(cuid())
-  title            String // Judul survei
-  totalRespondents Int // Total jumlah responden
-  averageScore     Float // Rata-rata skor
-  monthlyStats     MonthlyStat[]
-  createdAt        DateTime      @default(now())
-  updatedAt        DateTime      @updatedAt
-  deletedAt        DateTime      @default(now())
-  isActive         Boolean       @default(true)
-}
-
-// Entitas Statistik Bulanan
-model MonthlyStat {
-  id               String         @id @default(cuid())
-  month            String // Nama bulan (e.g., "Januari", "Februari")
-  respondentsCount Int // Jumlah responden per bulan
-  surveyId         String         @unique(map: "monthly_stat_survey_id_month_key")
-  survey           Survey         @relation(fields: [surveyId], references: [id])
-  AgeStat          AgeStat[]
-  ResponseStat     ResponseStat[]
-  genderStat       genderStat[]
-  createdAt        DateTime       @default(now())
-  updatedAt        DateTime       @updatedAt
-  deletedAt        DateTime       @default(now())
-  isActive         Boolean        @default(true)
-}
-
-// Entitas Gender
-
-model genderStat {
-  id               String       @id @default(cuid())
-  laki             Int
-  perempuan        Int
-  percentLaki      Float
-  percentPerempuan Float
-  total            Int
-  createdAt        DateTime     @default(now())
-  updatedAt        DateTime     @updatedAt
-  deletedAt        DateTime     @default(now())
-  isActive         Boolean      @default(true)
-  MonthlyStat      MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
-  monthlyStatId    String?
-}
-
-// Entitas Age
-
-model AgeStat {
-  id            String       @id @default(cuid())
-  group         String // "18-44", "45+" dll
-  count         Int
-  createdAt     DateTime     @default(now())
-  updatedAt     DateTime     @updatedAt
-  deletedAt     DateTime     @default(now())
-  isActive      Boolean      @default(true)
-  MonthlyStat   MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
-  monthlyStatId String?
-}
-
-// Entitas Response
-
-model ResponseStat {
-  id            String       @id @default(cuid())
-  label         String // BAIK / BURUK
-  count         Int
-  createdAt     DateTime     @default(now())
-  updatedAt     DateTime     @updatedAt
-  deletedAt     DateTime     @default(now())
-  isActive      Boolean      @default(true)
-  MonthlyStat   MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
-  monthlyStatId String?
-}
-
 //========================================= MENU PPID ========================================= //
 
 //========================================= STRUKTUR PPID ========================================= //
@@ -732,16 +657,16 @@ model PelayananPendudukNonPermanen {
 
 // ========================================= PENGHARGAAN ========================================= //
 model Penghargaan {
-  id        String      @id @default(cuid())
+  id        String       @id @default(cuid())
   name      String
   juara     String
-  deskripsi String      @db.Text
+  deskripsi String       @db.Text
   image     FileStorage? @relation(fields: [imageId], references: [id])
   imageId   String?
-  createdAt DateTime    @default(now())
+  createdAt DateTime     @default(now())
-  updatedAt DateTime    @updatedAt
+  updatedAt DateTime     @updatedAt
-  deletedAt DateTime    @default(now())
+  deletedAt DateTime     @default(now())
-  isActive  Boolean     @default(true)
+  isActive  Boolean      @default(true)
 }
 
 // ========================================= MENU KESEHATAN ========================================= //

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

@@ -22,19 +22,6 @@ const defaultForm = {
   kategoriBeritaId: "",
 };
 
-// 3. Kategori proxy
-const category = proxy({
-  findMany: {
-    data: [] as Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
-    async load() {
-      const res = await ApiFetch.api.desa.berita.category["find-many"].get();
-      if (res.status === 200) {
-        category.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-
 // 4. Berita proxy
 const berita = proxy({
   create: {
@@ -314,14 +301,238 @@ const berita = proxy({
       }
     },
   }
-   
-  
-  
 });
 
+//=============== Kategori Berita ===============
+
+const templateKategoriBerita = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultKategoriBerita = {
+  name: "",
+};
+
+const kategoriBerita = proxy({
+  create: {
+    form: { ...defaultKategoriBerita },
+    loading: false,
+    async create() {
+      const cek = templateKategoriBerita.safeParse(kategoriBerita.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kategoriBerita.create.loading = true;
+        const res =
+          await ApiFetch.api.desa.kategoriberita[
+            "create"
+          ].post(kategoriBerita.create.form);
+        if (res.status === 200) {
+          kategoriBerita.findMany.load();
+          return toast.success("Data Kategori Berita Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        kategoriBerita.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.KategoriBeritaGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    loading: false,
+    async load() {
+      const res =
+        await ApiFetch.api.desa.kategoriberita[
+          "findMany"
+        ].get();
+      if (res.status === 200) {
+        kategoriBerita.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriBeritaGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/desa/kategoriberita/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          kategoriBerita.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriBerita.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriBerita.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriBerita.delete.loading = true;
+
+        const response = await fetch(
+          `/api/desa/kategoriberita/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data Kategori Berita berhasil dihapus"
+          );
+          await kategoriBerita.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Data Kategori Berita");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data Kategori Berita");
+      } finally {
+        kategoriBerita.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultKategoriBerita },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/desa/kategoriberita/${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,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori berita:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateKategoriBerita.safeParse(kategoriBerita.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriBerita.update.loading = true;
+
+        const response = await fetch(
+          `/api/desa/kategoriberita/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+            }),
+          }
+        );
+
+        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 data kategori berita");
+          await kategoriBerita.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data kategori berita");
+        }
+      } catch (error) {
+        console.error("Error updating data kategori berita:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kategori berita"
+        );
+        return false;
+      } finally {
+        kategoriBerita.update.loading = false;
+      }
+    },
+    reset() {
+      kategoriBerita.update.id = "";
+      kategoriBerita.update.form = { ...defaultKategoriBerita };
+    },
+  },
+});
+
+
 // 5. State global
 const stateDashboardBerita = proxy({
-  category,
+  kategoriBerita,
   berita,
 });
 

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

@@ -5,25 +5,21 @@ import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
-function LayoutTabs({ children }: { children: React.ReactNode }) {
+function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
     const router = useRouter()
     const pathname = usePathname()
     const tabs = [
         {
-            label: "List Survey",
+            label: "List Berita",
-            value: "listSurvey",
+            value: "list_berita",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-survey"
+            href: "/admin/desa/berita/list-berita"
         },
         {
-            label: "List Bulanan",
+            label: "Kategori Berita",
-            value: "listBulanan",
+            value: "kategori_berita",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan"
+            href: "/admin/desa/berita/kategori-berita"
         },
-        {
+        
-          label: "List Gender Stat",
-          value: "listGenderStat",
-          href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat"
-        }
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)
     const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
@@ -45,7 +41,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
 
     return (
         <Stack>
-            <Title order={3}>Indeks Kepuasan Masyarakat</Title>
+            <Title order={3}>Gallery</Title>
             <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
                 <TabsList p={"xs"} bg={"#BBC8E7FF"}>
                     {tabs.map((e, i) => (
@@ -64,4 +60,4 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
     );
 }
 
-export default LayoutTabs;
+export default LayoutTabsBerita;

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

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditKategoriBerita() {
+  const editState = useProxy(stateDashboardBerita.kategoriBerita)
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState({
+      name: editState.update.form.name || '',
+    });
+
+  useEffect(() => {
+      const loadKategori = async () => {
+        const id = params?.id as string;
+        if (!id) return;
+  
+        try {
+          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+          if (data) {
+            setFormData({
+              name: data.name || '',
+            });
+          }
+        } catch (error) {
+          console.error("Error loading kategori Berita:", error);
+          toast.error("Gagal memuat data kategori Berita");
+        }
+      };
+  
+      loadKategori();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+      try {
+        editState.update.form = {
+          ...editState.update.form,
+          name: formData.name,
+        };
+        await editState.update.update();
+        toast.success('Kategori Berita berhasil diperbarui!');
+        router.push('/admin/desa/berita/kategori-berita');
+      } catch (error) {
+        console.error('Error updating kategori Berita:', error);
+        toast.error('Terjadi kesalahan saat memperbarui kategori 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 Kategori Berita</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Berita</Text>}
+            placeholder="masukkan nama kategori Berita"
+          />
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKategoriBerita;

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

@@ -0,0 +1,55 @@
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateKategoriBerita() {
+  const createState = useProxy(stateDashboardBerita.kategoriBerita)
+  const router = useRouter();
+
+  const resetForm = () => {
+    createState.create.form = {
+      name: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await createState.create.create();
+    resetForm();
+    router.push("/admin/desa/berita/kategori-berita")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kategori Berita</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Berita</Text>}
+            placeholder='Masukkan nama kategori Berita'
+            value={createState.create.form.name}
+            onChange={(val) => {
+              createState.create.form.name = val.target.value;
+            }}
+          />
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKategoriBerita;

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

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import stateDashboardBerita from '../../../_state/desa/berita';
+
+
+
+function KategoriBerita() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Berita'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKategoriBerita search={search} />
+    </Box>
+  );
+}
+
+function ListKategoriBerita({ search }: { search: string }) {
+  const listDataState = useProxy(stateDashboardBerita.kategoriBerita)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    listDataState.findMany.load()
+  }, [])
+
+  const handleDelete = () => {
+    if (selectedId) {
+      listDataState.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      listDataState.findMany.load()
+    }
+  }
+
+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listDataState.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 Kategori Berita'
+          href='/admin/desa/berita/kategori-berita/create'
+        />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-Berita/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus kategori Berita ini?'
+      />
+    </Box>
+  )
+}
+
+export default KategoriBerita;

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

@@ -0,0 +1,13 @@
+'use client'
+import React from 'react';
+import LayoutTabsBerita from './_com/layoutTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabsBerita>
+      {children}
+    </LayoutTabsBerita>
+  );
+}
+
+export default Layout;

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import {
@@ -7,7 +8,6 @@ import {
   Image,
   Paper,
   Select,
-  Skeleton,
   Stack,
   Text,
   TextInput,
@@ -22,9 +22,8 @@ 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 stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
-import { Prisma } from "@prisma/client";
+
-import stateDashboardBerita from "../../../../_state/desa/berita";
 
 function EditBerita() {
   const beritaState = useProxy(stateDashboardBerita);
@@ -43,6 +42,7 @@ function EditBerita() {
 
   // Load berita by id saat pertama kali
   useEffect(() => {
+    beritaState.kategoriBerita.findMany.load()
     const loadBerita = async () => {
       const id = params?.id as string;
       if (!id) return;
@@ -99,7 +99,7 @@ function EditBerita() {
 
       await beritaState.berita.edit.update();
       toast.success("Berita berhasil diperbarui!");
-      router.push("/admin/desa/berita");
+      router.push("/admin/desa/berita/list-berita");
     } catch (error) {
       console.error("Error updating berita:", error);
       toast.error("Terjadi kesalahan saat memperbarui berita");
@@ -154,22 +154,29 @@ function EditBerita() {
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <EditEditor
-            value={formData.content}
+              value={formData.content}
-            onChange={(htmlContent) => {
+              onChange={(htmlContent) => {
-              setFormData((prev) => ({ ...prev, content: htmlContent }));
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
-              beritaState.berita.edit.form.content = htmlContent;
+                beritaState.berita.edit.form.content = htmlContent;
-            }}
+              }}
             />
           </Box>
 
-          <SelectCategory
+          <Select
             value={formData.kategoriBeritaId}
-            onChange={(val) => {
+            onChange={(val) => setFormData({ ...formData, kategoriBeritaId: val || "" })}
-              setFormData({
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-                ...formData,
+            placeholder='Pilih kategori'
-                kategoriBeritaId: val?.id || ''
+            data={
-              });
+              beritaState.kategoriBerita.findMany.data?.map((v) => ({
-            }}
+                value: v.id,
+                label: v.name
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
           <Button onClick={handleSubmit}>Edit Berita</Button>
@@ -179,61 +186,4 @@ function EditBerita() {
   );
 }
 
-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/list-berita/[id]/page.tsx

@@ -8,8 +8,8 @@ import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 import colors from '@/con/colors';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import stateDashboardBerita from '../../../_state/desa/berita';
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 
 function DetailBerita() {
   const beritaState = useProxy(stateDashboardBerita)
@@ -28,7 +28,7 @@ function DetailBerita() {
       beritaState.berita.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/desa/berita")
+      router.push("/admin/desa/berita/list-berita")
     }
   }
 

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

@@ -1,16 +1,16 @@
 'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 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 { Box, Button, Center, FileInput, Image, Paper, Select, 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);
@@ -18,6 +18,10 @@ export default function CreateBerita() {
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter()
 
+  useShallowEffect(() => {
+    beritaState.kategoriBerita.findMany.load()
+  }, []);
+
   const resetForm = () => {
     // Reset state di valtio
     beritaState.berita.create.form = {
@@ -57,7 +61,7 @@ export default function CreateBerita() {
 
     // Reset form setelah submit
     resetForm();
-    router.push("/admin/desa/berita")
+    router.push("/admin/desa/berita/list-berita")
   };
 
   return (
@@ -78,11 +82,27 @@ export default function CreateBerita() {
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
-          <SelectCategory
+          <Select
-            value={beritaState.berita.create.form.kategoriBeritaId}
+            label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
-            onChange={(val) => {
+            placeholder="Pilih kategori"
-              beritaState.berita.create.form.kategoriBeritaId = val?.id || "";
+            data={beritaState.kategoriBerita.findMany.data.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={beritaState.berita.create.form.kategoriBeritaId || null}
+            onChange={(val: string | null) => {
+              if (val) {
+                const selected = beritaState.kategoriBerita.findMany.data?.find((item) => item.id === val);
+                if (selected) {
+                  beritaState.berita.create.form.kategoriBeritaId = selected.id;
+                }
+              } else {
+                beritaState.berita.create.form.kategoriBeritaId = "";
+              }
             }}
+            searchable
+            clearable
+            nothingFoundMessage="Tidak ditemukan"
           />
           <TextInput
             value={beritaState.berita.create.form.deskripsi}
@@ -126,61 +146,4 @@ export default function CreateBerita() {
       </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"
-      />
-    );
-  }
 }

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

@@ -6,8 +6,9 @@ import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/ico
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../_com/header';
+import HeaderSearch from '../../../_com/header';
-import stateDashboardBerita from '../../_state/desa/berita';
+import stateDashboardBerita from '../../../_state/desa/berita';
+
 
 
 function Berita() {
@@ -67,7 +68,7 @@ function ListBerita({ search }: { search: string }) {
             </GridCol>
             <GridCol span={{ base: 12, md: 1 }}>
               <Button
-                onClick={() => router.push("/admin/desa/berita/create")}
+                onClick={() => router.push("/admin/desa/berita/list-berita/create")}
                 bg={colors["blue-button"]}
               >
                 <IconCircleDashedPlus size={25} />
@@ -107,7 +108,7 @@ function ListBerita({ search }: { search: string }) {
                       <Button
                         bg={"green"}
                         onClick={() =>
-                          router.push(`/admin/desa/berita/${item.id}`)
+                          router.push(`/admin/desa/berita/list-berita/${item.id}`)
                         }
                       >
                         <IconDeviceImacCog size={25} />

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/layout.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import LayoutTabs from './_lib/layoutTabs';
-
-function Layout({children} : {children: React.ReactNode}) {
-  return (
-    <LayoutTabs>
-      {children}
-    </LayoutTabs>
-  );
-}
-
-export default Layout;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/edit/page.tsx

@@ -1,128 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-
-
-function EditListBulanan() {
-  const editState = useProxy(indeksKepuasanState.monthlyStatState)
-  const params = useParams()
-  const router = useRouter()
-  const [formData, setFormData] = useState({
-    month: editState.edit.form.month || '',
-    respondentsCount: editState.edit.form.respondentsCount || 0,
-    surveyId: editState.edit.form.surveyId || '',
-  })
-
-  useEffect(() => {
-    const loadSurvey = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            month: data.month,
-            respondentsCount: data.respondentsCount,
-            surveyId: data.surveyId,
-          });
-        }
-      } catch (error) {
-        console.error("Error loading list bulanan:", error);
-        toast.error("Gagal memuat data list bulanan");
-      }
-    };
-    indeksKepuasanState.surveyState.findMany.load();
-    loadSurvey();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
-
-    try {
-      // edit global state with form data
-      editState.edit.form = {
-        ...editState.edit.form,
-        month: formData.month,
-        respondentsCount: formData.respondentsCount,
-        surveyId: formData.surveyId,
-      };
-
-      await editState.edit.update();
-      toast.success("list bulanan berhasil diperbarui!");
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan");
-    } catch (error) {
-      console.error("Error updating list bulanan:", error);
-      toast.error("Terjadi kesalahan saat memperbarui list bulanan");
-    }
-  };
-
-  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"}>Edit List Survey</Text>
-          <Paper>
-            <Stack gap={"xs"}>
-              <TextInput
-                value={formData.month}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    month: val.target.value
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Bulan</Text>}
-                placeholder='Masukkan bulan'
-              />
-              <TextInput
-                value={formData.respondentsCount}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    respondentsCount: Number(val.target.value)
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-                placeholder='Masukkan total responden'
-              />
-              <Select
-                label={<Text fw="bold" fz="sm">Pilih Survey</Text>}
-                placeholder="Pilih survey"
-                value={formData.surveyId}
-                onChange={(value) => {
-                  if (value) setFormData({
-                    ...formData,
-                    surveyId: value
-                  })
-                }}
-                data={
-                  indeksKepuasanState.surveyState.findMany.data?.map((survey) => ({
-                    value: survey.id,
-                    label: `${survey.title} (${survey.totalRespondents} responden)`,
-                  })) || []
-                }
-              />
-              <Group>
-                <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditListBulanan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/page.tsx

@@ -1,109 +0,0 @@
-'use client'
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function DetailListBulanan() {
-  const detailState = useProxy(indeksKepuasanState.monthlyStatState)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
-
-  const handleHapus = () => {
-    if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan")
-    }
-  }
-
-  if (!detailState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Bulan</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.month}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Total Responden</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.respondentsCount}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Survey</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.survey.title }</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.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 list bulanan ini?'
-      />
-    </Box>
-  );
-}
-
-export default DetailListBulanan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/create/page.tsx

@@ -1,84 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function CreateListBulanan() {
-  const router = useRouter();
-  const stateCreate = useProxy(indeksKepuasanState.monthlyStatState)
-
-
-  useEffect(() => {
-    stateCreate.findMany.load();
-    indeksKepuasanState.surveyState.findMany.load();
-  }, []);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      month: "",
-      respondentsCount: 0,
-      surveyId: "",
-    };
-  };
-  const handleSubmit = async () => {
-    await stateCreate.create.create();
-    resetForm();
-    router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create List Bulanan</Title>
-          <TextInput
-            value={stateCreate.create.form.month}
-            onChange={(val) => {
-              stateCreate.create.form.month = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Bulan</Text>}
-            placeholder='Masukkan bulan'
-          />
-          <TextInput
-            value={stateCreate.create.form.respondentsCount}
-            onChange={(val) => {
-              stateCreate.create.form.respondentsCount = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-            placeholder='Masukkan total responden'
-          />
-          <Select
-            label={<Text fw="bold" fz="sm">Pilih Survey</Text>}
-            placeholder="Pilih survey"
-            value={stateCreate.create.form.surveyId}
-            onChange={(value) => {
-              if (value) stateCreate.create.form.surveyId = value;
-            }}
-            data={
-              indeksKepuasanState.surveyState.findMany.data?.map((survey) => ({
-                value: survey.id,
-                label: `${survey.title} (${survey.totalRespondents} responden)`,
-              })) || []
-            }
-          />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateListBulanan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/page.tsx

@@ -1,98 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
-import JudulList from '../../../_com/judulList';
-
-
-
-function ListBulananLandingPage() {
-  const [search, setSearch] = useState('');
-  return (
-    <Box>
-      <HeaderSearch
-        title='List Bulanan'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListBUlanan search={search} />
-    </Box>
-  );
-}
-
-function ListBUlanan({ search }: { search: string }) {
-  const listState = useProxy(indeksKepuasanState.monthlyStatState)
-  const router = useRouter();
-  useEffect(() => {
-    listState.findMany.load()
-  }, [])
-
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.month.toLowerCase().includes(keyword) ||
-      item.respondentsCount.toString().includes(keyword)
-    );
-  });
-
-  if (!listState.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Bulanan'
-            href='/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Bulan</TableTh>
-                  <TableTh>Total Responden</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.month}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.respondentsCount}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default ListBulananLandingPage;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/edit/page.tsx

@@ -1,186 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-
-
-function EditListSurvey() {
-  const editState = useProxy(indeksKepuasanState.genderStatState)
-  const params = useParams()
-  const router = useRouter()
-  const [formData, setFormData] = useState({
-    laki: editState.edit.form.laki || 0,
-    perempuan: editState.edit.form.perempuan || 0,
-    monthlyStatId: editState.edit.form.monthlyStatId || '',
-    total: editState.edit.form.total || 0,
-    percentLaki: editState.edit.form.percentLaki || 0,
-    percentPerempuan: editState.edit.form.percentPerempuan || 0,
-  })
-
-  useEffect(() => {
-    indeksKepuasanState.monthlyStatState.findMany.load();
-    const loadSurvey = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            laki: data.laki || 0,
-            perempuan: data.perempuan || 0,
-            monthlyStatId: data.monthlyStatId || '',
-            total: data.total || 0,
-            percentLaki: data.percentLaki || 0,
-            percentPerempuan: data.percentPerempuan || 0,
-          });
-        }
-      } catch (error) {
-        console.error("Error loading list survey:", error);
-        toast.error("Gagal memuat data list survey");
-      }
-    };
-    loadSurvey();
-  }, [params?.id]);
-
-  // Hitung total dan persentase saat nilai laki atau perempuan berubah
-  useEffect(() => {
-    const total = formData.laki + formData.perempuan;
-    const percentLaki = total > 0 ? Math.round((formData.laki / total) * 100) : 0;
-    const percentPerempuan = 100 - percentLaki;
-    
-    setFormData(prev => ({
-      ...prev,
-      total,
-      percentLaki,
-      percentPerempuan
-    }));
-  }, [formData.laki, formData.perempuan]);
-
-  const handleSubmit = async () => {
-    if (!formData.monthlyStatId) {
-      return toast.error("Silakan pilih bulan terlebih dahulu");
-    }
-
-    if (formData.laki < 0 || formData.perempuan < 0) {
-      return toast.error("Nilai tidak boleh negatif");
-    }
-
-    try {
-      // edit global state with form data
-      editState.edit.form = {
-        ...editState.edit.form,
-        laki: formData.laki,
-        perempuan: formData.perempuan,
-        monthlyStatId: formData.monthlyStatId,
-        total: formData.total,
-        percentLaki: formData.percentLaki,
-        percentPerempuan: formData.percentPerempuan,
-      };
-
-      await editState.edit.update();
-      toast.success("Data gender berhasil diperbarui!");
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat");
-    } catch (error) {
-      console.error("Error updating list gender:", error);
-      toast.error("Terjadi kesalahan saat memperbarui data gender");
-    }
-  };
-
-  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"}>Edit List Survey</Text>
-          <Paper>
-            <Stack gap={"xs"}>
-              <TextInput
-                type="number"
-                value={formData.laki}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    laki: Number(val.target.value)
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Laki - Laki</Text>}
-                placeholder='Masukkan laki - laki'
-              />
-              <TextInput
-                type="number"
-                value={formData.perempuan}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    perempuan: Number(val.target.value)
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Perempuan</Text>}
-                placeholder='Masukkan perempuan'
-              />
-              <TextInput
-                type="number"
-                value={formData.total}
-                label={<Text fw="bold" fz="sm">Total</Text>}
-                disabled
-              />
-              <TextInput
-                type="number"
-                value={formData.percentLaki}
-                label={<Text fw="bold" fz="sm">Persentase Laki Laki</Text>}
-                disabled
-              />
-              <TextInput
-                type="number"
-                value={formData.percentPerempuan}
-                label={<Text fw="bold" fz="sm">Persentase Perempuan</Text>}
-                disabled
-              />
-              <Select
-                label={"Pilih Bulan"}
-                placeholder="Pilih bulanan"
-                value={formData.monthlyStatId}
-                onChange={(value) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    monthlyStatId: value || ''
-                  }));
-                }}
-                data={
-                  indeksKepuasanState.monthlyStatState.findMany.data?.map((monthlyStat) => ({
-                    value: monthlyStat.id,
-                    label: `${monthlyStat.month} (${monthlyStat.respondentsCount} responden)`,
-                  })) || []
-                }
-                required
-                error={!formData.monthlyStatId ? 'Bulan harus dipilih' : undefined}
-              />
-              <Group>
-                <Button 
-                  bg={colors['blue-button']} 
-                  onClick={handleSubmit}
-                  loading={editState.edit.loading}
-                >
-                  {editState.edit.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditListSurvey;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/page.tsx

@@ -1,113 +0,0 @@
-'use client'
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function DetailGenderStat() {
-  const detailState = useProxy(indeksKepuasanState.genderStatState)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
-
-  const handleHapus = () => {
-    if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat")
-    }
-  }
-
-  if (!detailState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Laki Laki</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.laki}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Perempuan</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.perempuan}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Persentase Laki Laki</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.percentLaki}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Persentase Perempuan</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.percentPerempuan}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.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 list gender stat ini?'
-      />
-    </Box>
-  );
-}
-
-export default DetailGenderStat;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/create/page.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-
-function CreateListGenderStat() {
-  const router = useRouter();
-  const stateCreate = useProxy(indeksKepuasanState.genderStatState)
-
-
-  useEffect(() => {
-    stateCreate.findMany.load();
-    indeksKepuasanState.monthlyStatState.findMany.load();
-  }, []);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      laki: 0,
-      perempuan: 0,
-      monthlyStatId: "",
-      total: 0,
-      percentLaki: 0,
-      percentPerempuan: 0,
-    };
-  };
-  const handleSubmit = async () => {
-    await stateCreate.create.create();
-    resetForm();
-    router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create List Gender Stat</Title>
-          <TextInput
-            value={stateCreate.create.form.laki}
-            onChange={(val) => {
-              stateCreate.create.form.laki = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Laki Laki</Text>}
-            placeholder='Masukkan laki laki'
-          />
-          <TextInput
-            value={stateCreate.create.form.perempuan}
-            onChange={(val) => {
-              stateCreate.create.form.perempuan = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Perempuan</Text>}
-            placeholder='Masukkan perempuan'
-          />
-          <TextInput
-            value={stateCreate.create.form.total}
-            label={<Text fw="bold" fz="sm">Total</Text>}
-            disabled
-          />
-          <TextInput
-            value={stateCreate.create.form.percentLaki}
-            label={<Text fw="bold" fz="sm">Persentase Laki Laki</Text>}
-            disabled
-          />
-          <TextInput
-            value={stateCreate.create.form.percentPerempuan}
-            label={<Text fw="bold" fz="sm">Persentase Perempuan</Text>}
-            disabled
-          />
-          <Select
-            label={<Text fw="bold" fz="sm">Pilih Bulan</Text>}
-            placeholder="Pilih bulanan"
-            value={stateCreate.create.form.monthlyStatId}
-            onChange={(value) => {
-              if (value) stateCreate.create.form.monthlyStatId = value;
-            }}
-            data={
-              indeksKepuasanState.monthlyStatState.findMany.data?.map((monthlyStat) => ({
-                value: monthlyStat.id,
-                label: `${monthlyStat.month} (${monthlyStat.respondentsCount} responden)`,
-              })) || []
-            }
-          />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateListGenderStat;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/page.tsx

@@ -1,106 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
-
-
-
-function ListGenderStat() {
-  const [search, setSearch] = useState('');
-  return (
-    <Box>
-      <HeaderSearch
-        title='Gender Stat'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListGender search={search} />
-    </Box>
-  );
-}
-
-function ListGender({ search }: { search: string }) {
-  const listState = useProxy(indeksKepuasanState.genderStatState)
-  const router = useRouter();
-  useEffect(() => {
-    listState.findMany.load()
-  }, [])
-
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.laki.toString().includes(keyword) ||
-      item.perempuan.toString().includes(keyword)
-    );
-  });
-
-  if (!listState.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Gender Stat'
-            href='/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Laki Laki</TableTh>
-                  <TableTh>Perempuan</TableTh>
-                  <TableTh>Persentase Laki Laki</TableTh>
-                  <TableTh>Persentase Perempuan</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.laki}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.perempuan}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.percentLaki}%</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.percentPerempuan}%</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default ListGenderStat;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/edit/page.tsx

@@ -1,122 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-
-
-function EditListSurvey() {
-  const editState = useProxy(indeksKepuasanState.surveyState)
-  const params = useParams()
-  const router = useRouter()
-  const [formData, setFormData] = useState({
-    title: editState.edit.form.title || '',
-    totalRespondents: editState.edit.form.totalRespondents || 0,
-    averageScore: editState.edit.form.averageScore || 0,
-  })
-
-  useEffect(() => {
-    const loadSurvey = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            title: data.title || '',
-            totalRespondents: data.totalRespondents || 0,
-            averageScore: data.averageScore || 0,
-          });
-        }
-      } catch (error) {
-        console.error("Error loading list survey:", error);
-        toast.error("Gagal memuat data list survey");
-      }
-    };
-
-    loadSurvey();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
-  
-      try {
-        // edit global state with form data
-        editState.edit.form = {
-          ...editState.edit.form,
-          title: formData.title,
-          totalRespondents: formData.totalRespondents,
-          averageScore: formData.averageScore,
-        };
-  
-        await editState.edit.update();
-        toast.success("list survey berhasil diperbarui!");
-        router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey");
-      } catch (error) {
-        console.error("Error updating list survey:", error);
-        toast.error("Terjadi kesalahan saat memperbarui list survey");
-      }
-    };
-
-  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"}>Edit List Survey</Text>
-            <Paper>
-              <Stack gap={"xs"}>
-                <TextInput
-                  value={formData.title}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      title: val.target.value
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-                  placeholder='Masukkan judul'
-                />
-                <TextInput
-                  value={formData.totalRespondents}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      totalRespondents: Number(val.target.value)
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-                  placeholder='Masukkan total responden'
-                />
-                <TextInput
-                  value={formData.averageScore}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      averageScore: Number(val.target.value)
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Skor Rata-rata</Text>}
-                  placeholder='Masukkan skor'
-                />
-                <Group>
-                  <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditListSurvey;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/page.tsx

@@ -1,109 +0,0 @@
-'use client'
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function DetailKegiatanDesa() {
-  const detailState = useProxy(indeksKepuasanState.surveyState)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
-
-  const handleHapus = () => {
-    if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey")
-    }
-  }
-
-  if (!detailState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.title}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Total Responden</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.totalRespondents}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Rata-rata Skor</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.averageScore}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.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 list survey ini?'
-      />
-    </Box>
-  );
-}
-
-export default DetailKegiatanDesa;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/create/page.tsx

@@ -1,78 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-
-function CreateListSurvey() {
-  const router = useRouter();
-  const stateCreate = useProxy(indeksKepuasanState.surveyState)
-
-
-  useEffect(() => {
-    stateCreate.findMany.load();
-  }, []);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      title: "",
-      totalRespondents: 0,
-      averageScore: 0,
-    };
-  };
-  const handleSubmit = async () => {
-    await stateCreate.create.create();
-    resetForm();
-    router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create List Survey</Title>
-          <TextInput
-            value={stateCreate.create.form.title}
-            onChange={(val) => {
-              stateCreate.create.form.title = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-            placeholder='Masukkan judul'
-          />
-           <TextInput
-            value={stateCreate.create.form.totalRespondents}
-            onChange={(val) => {
-              stateCreate.create.form.totalRespondents = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-            placeholder='Masukkan tahun'
-          />
-           <TextInput
-            value={stateCreate.create.form.averageScore}
-            onChange={(val) => {
-              stateCreate.create.form.averageScore = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Skor</Text>}
-            placeholder='Masukkan skor'
-          />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateListSurvey;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/page.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
-import JudulList from '../../../_com/judulList';
-
-
-
-function ListSurveyLandingPage() {
-  const [search, setSearch] = useState('');
-  return (
-    <Box>
-      <HeaderSearch
-        title='List Survey'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListSurvey search={search} />
-    </Box>
-  );
-}
-
-function ListSurvey({ search }: { search: string }) {
-  const listState = useProxy(indeksKepuasanState.surveyState)
-  const router = useRouter();
-  useEffect(() => {
-    listState.findMany.load()
-  }, [])
-
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.title.toLowerCase().includes(keyword) ||
-      item.totalRespondents.toString().includes(keyword) ||
-      item.averageScore.toString().includes(keyword)
-    );
-  });
-
-  if (!listState.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Survey'
-            href='/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Total Responden</TableTh>
-                  <TableTh>Skor Rata-rata</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.title}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.totalRespondents}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.averageScore}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default ListSurveyLandingPage;

src/app/admin/_com/list_PageAdmin.tsx

@@ -103,7 +103,7 @@ export const navBar = [
       {
         id: "Desa_3",
         name: "Berita",
-        path: "/admin/desa/berita"
+        path: "/admin/desa/berita/list-berita"
       },
       {
         id: "Desa_4",

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

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

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

@@ -1,5 +1,4 @@
 import Elysia, { t } from "elysia";
-import kategoriBeritaFindMany from "./category";
 import beritaFindMany from "./find-many";
 import beritaCreate from "./create";
 import beritaDelete from "./del";
@@ -9,7 +8,6 @@ import beritaFindFirst from "./findFirst";
 import findRecentBerita from "./findRecent";
 
 const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
-  .get("/category/find-many", kategoriBeritaFindMany)
   .get("/find-many", beritaFindMany)
   .get("/:id", async (context) => {
       const response = await findBeritaById(new Request(context.request));

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

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    name: string;
+}
+
+export default async function kategoriBeritaCreate(context: Context) {
+    const body = (await context.body) as FormCreate;
+
+    try {
+        const result = await prisma.kategoriBerita.create({
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil membuat kategori berita",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error creating kategori berita:", error);
+        throw new Error("Gagal membuat kategori berita: " + (error as Error).message);
+    }
+}

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

@@ -0,0 +1,16 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function kategoriBeritaDelete(context: Context) {
+    const id = context.params.id as string;
+
+    await prisma.kategoriBerita.delete({
+        where: { id },
+    });
+
+    return {
+        status: 200,
+        success: true,
+        message: "Success delete kategori berita",
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/findMany.ts

@@ -0,0 +1,11 @@
+import prisma from "@/lib/prisma";
+
+export default async function kategoriBeritaFindMany() {
+  const data = await prisma.kategoriBerita.findMany();
+
+  return {
+    success: true,
+    message: "Success get all kategori berita",
+    data,
+  };
+}

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function kategoriBeritaFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+    
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.kategoriBerita.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get kategori berita",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+import Elysia, { t } from "elysia";
+import kategoriBeritaCreate from "./create";
+import kategoriBeritaDelete from "./del";
+import kategoriBeritaFindMany from "./findMany";
+import kategoriBeritaFindUnique from "./findUnique";
+import kategoriBeritaUpdate from "./updt";
+
+const KategoriBerita = new Elysia({
+    prefix: "/kategoriberita",
+    tags: ["Desa / Berita / Kategori Berita"],
+})
+
+ .post("/create", kategoriBeritaCreate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+
+  .get("/findMany", kategoriBeritaFindMany)
+  .get("/:id", async (context) => {
+    const response = await kategoriBeritaFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put("/:id", kategoriBeritaUpdate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+  .delete("/del/:id", kategoriBeritaDelete);
+
+export default KategoriBerita;

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

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+    name: string;
+}
+
+export default async function kategoriBeritaUpdate(context: Context) {
+    const body = (await context.body) as FormUpdate;
+    const id = context.params.id as string;
+
+    try {
+        const result = await prisma.kategoriBerita.update({
+            where: { id },
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil mengupdate kategori berita",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error updating kategori berita:", error);
+        throw new Error("Gagal mengupdate kategori berita: " + (error as Error).message);
+    }
+}

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

@@ -8,6 +8,7 @@ import GalleryVideo from "./gallery/video";
 import LayananDesa from "./layanan";
 import Penghargaan from "./penghargaan";
 import KategoriPotensi from "./potensi/kategori-potensi";
+import KategoriBerita from "./berita/kategori-berita";
 
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
@@ -20,5 +21,6 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(LayananDesa)
   .use(Penghargaan)
   .use(KategoriPotensi)
+  .use(KategoriBerita)
 
 export default Desa;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/create.ts

@@ -1,33 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const ageStatCreate = async (context: Context) => {
-  const body = (await context.body) as {
-    group: string;
-    count: number;
-    monthlyStatId: string;
-  };
-
-  try {
-    const created = await prisma.ageStat.create({
-      data: {
-        group: body.group,
-        count: body.count,
-        monthlyStatId: body.monthlyStatId,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Age Stat berhasil dibuat",
-      data: created,
-    };
-  } catch (error) {
-    console.error("Gagal create age stat:", error);
-    return {
-      success: false,
-      message: "Gagal membuat data age stat",
-    };
-  }
-};
-export default ageStatCreate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/del.ts

@@ -1,24 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const ageStatDelete = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    await prisma.ageStat.delete({
-      where: { id },
-    });
-
-    return {
-      success: true,
-      message: "Data age berhasil dihapus",
-    };
-  } catch (error) {
-    console.error("Gagal hapus Age Stat:", error);
-    return {
-      success: false,
-      message: "Gagal menghapus data age stat",
-    };
-  }
-};
-export default ageStatDelete;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/findMany.ts

@@ -1,26 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export const ageStatFindMany = async () => {
-  try {
-    const result = await prisma.ageStat.findMany({
-      include: {
-        MonthlyStat: true,
-      },
-      orderBy: {
-        id: "desc",
-      },
-    });
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Age Stat:", error);
-    return {
-      success: false,
-      message: "Gagal mengambil data age stat",
-    };
-  }
-};
-export default ageStatFindMany;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/findUnique.ts

@@ -1,34 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const ageStatFindUnique = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    const result = await prisma.ageStat.findUnique({
-      where: { id },
-      include: {
-        MonthlyStat: true,
-      },
-    });
-
-    if (!result) {
-      return {
-        success: false,
-        message: "Data age tidak ditemukan",
-      };
-    }
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Age Stat:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mengambil data age stat",
-    };
-  }
-};
-export default ageStatFindUnique;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/index.ts

@@ -1,31 +0,0 @@
-import Elysia, { t } from "elysia";
-import ageStatCreate from "./create";
-import ageStatDelete from "./del";
-import ageStatFindMany from "./findMany";
-import ageStatFindUnique from "./findUnique";
-import ageStatUpdate from "./updt";
-
-
-const age = new Elysia({
-  prefix: "/age",
-  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Age"],
-})
-  .post("/create", ageStatCreate, {
-    body: t.Object({
-      monthlyStatId: t.String(),
-      group: t.String(),
-      count: t.Number(),
-    }),
-  })
-  .get("/findMany", ageStatFindMany)
-  .get("/:id", ageStatFindUnique)
-  .put("/:id", ageStatUpdate, {
-    body: t.Object({
-      group: t.String(),
-      count: t.Number(),
-      monthlyStatId: t.String(),
-    }),
-  })
-  .delete("/del/:id", ageStatDelete);
-
-export default age;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/updt.ts

@@ -1,35 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const ageStatUpdate = async (context: Context) => {
-  const { id } = context.params as { id: string };
-  const body = (await context.body) as {
-    group?: string;
-    count?: number;
-    monthlyStatId?: string;
-  };
-
-  try {
-    const updated = await prisma.ageStat.update({
-      where: { id },
-      data: {
-        group: body.group,
-        count: body.count,
-        monthlyStatId: body.monthlyStatId,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Data age berhasil diperbarui",
-      data: updated,
-    };
-  } catch (error) {
-    console.error("Gagal update Age Stat:", error);
-    return {
-      success: false,
-      message: "Gagal memperbarui data age stat",
-    };
-  }
-};
-export default ageStatUpdate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/gender/create.ts

@@ -1,40 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const genderStatCreate = async (context: Context) => {
-  const body = (await context.body) as {
-    laki: number;
-    perempuan: number;
-    monthlyStatId: string;
-  };
-
-  const total = body.laki + body.perempuan;
-  const percentLaki = total > 0 ? Number(((body.laki / total) * 100).toFixed(2)) : 0;
-const percentPerempuan = total > 0 ? Number(((body.perempuan / total) * 100).toFixed(2)) : 0;
-
-  try {
-    const created = await prisma.genderStat.create({
-    data: {
-      laki: body.laki,
-      perempuan: body.perempuan,
-      total,
-      percentLaki: Number(percentLaki),
-      percentPerempuan: Number(percentPerempuan),
-      monthlyStatId: body.monthlyStatId,
-    },
-  });
-
-    return {
-      success: true,
-      message: "Gender Stat berhasil dibuat",
-      data: created,
-    };
-  } catch (error) {
-    console.error("Gagal create gender stat:", error);
-    return {
-      success: false,
-      message: "Gagal membuat data gender stat",
-    };
-  }
-};
-export default genderStatCreate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/gender/del.ts

@@ -1,24 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const genderStatDelete = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    await prisma.genderStat.delete({
-      where: { id },
-    });
-
-    return {
-      success: true,
-      message: "Data gender berhasil dihapus",
-    };
-  } catch (error) {
-    console.error("Gagal hapus Gender Stat:", error);
-    return {
-      success: false,
-      message: "Gagal menghapus data gender",
-    };
-  }
-};
-export default genderStatDelete;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/gender/findMany.ts

@@ -1,26 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export const genderStatFindMany = async () => {
-  try {
-    const result = await prisma.genderStat.findMany({
-      include: {
-        MonthlyStat: true,
-      },
-      orderBy: {
-        id: "desc",
-      },
-    });
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Gender Stat:", error);
-    return {
-      success: false,
-      message: "Gagal mengambil data gender stat",
-    };
-  }
-};
-export default genderStatFindMany;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/gender/findUnique.ts

@@ -1,34 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const genderStatFindUnique = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    const result = await prisma.genderStat.findUnique({
-      where: { id },
-      include: {
-        MonthlyStat: true,
-      },
-    });
-
-    if (!result) {
-      return {
-        success: false,
-        message: "Data gender tidak ditemukan",
-      };
-    }
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Gender Stat:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mengambil data gender stat",
-    };
-  }
-};
-export default genderStatFindUnique;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/gender/index.ts

@@ -1,37 +0,0 @@
-import Elysia, { t } from "elysia";
-import genderStatCreate from "./create";
-import genderStatDelete from "./del";
-import genderStatFindMany from "./findMany";
-import genderStatFindUnique from "./findUnique";
-import genderStatUpdate from "./updt";
-
-
-const gender = new Elysia({
-  prefix: "/gender",
-  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Gender"],
-})
-  .post("/create", genderStatCreate, {
-    body: t.Object({
-      monthlyStatId: t.String(),
-      laki: t.Number(),
-      perempuan: t.Number(),
-      total: t.Number(),
-      percentLaki: t.Number(),
-      percentPerempuan: t.Number(),
-    }),
-  })
-  .get("/findMany", genderStatFindMany)
-  .get("/:id", genderStatFindUnique)
-  .put("/:id", genderStatUpdate, {
-    body: t.Object({
-      laki: t.Number(),
-      perempuan: t.Number(),
-      monthlyStatId: t.String(),
-      total: t.Number(),
-      percentLaki: t.Number(),
-      percentPerempuan: t.Number(),
-    }),
-  })
-  .delete("/del/:id", genderStatDelete);
-
-export default gender;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/gender/updt.ts

@@ -1,42 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const genderStatUpdate = async (context: Context) => {
-  const { id } = context.params as { id: string };
-  const body = (await context.body) as {
-    laki?: number;
-    perempuan?: number;
-    monthlyStatId?: string;
-  };
-
-  const total = (body.laki ?? 0) + (body.perempuan ?? 0);
-  const percentLaki = total > 0 ? Number(((body.laki ?? 0) / total) * 100).toFixed(2) : 0;
-  const percentPerempuan = total > 0 ? Number(((body.perempuan ?? 0) / total) * 100).toFixed(2) : 0;
-
-  try {
-    const updated = await prisma.genderStat.update({
-      where: { id },
-      data: {
-        laki: body.laki,
-        perempuan: body.perempuan,
-        total,
-        percentLaki: Number(percentLaki),
-        percentPerempuan: Number(percentPerempuan),
-        monthlyStatId: body.monthlyStatId,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Data gender berhasil diperbarui",
-      data: updated,
-    };
-  } catch (error) {
-    console.error("Gagal update Gender Stat:", error);
-    return {
-      success: false,
-      message: "Gagal memperbarui data gender stat",
-    };
-  }
-};
-export default genderStatUpdate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/index.ts

@@ -1,20 +0,0 @@
-import Elysia from "elysia";
-import gender from "./gender";
-import monthlyStat from "./monthly-stat";
-import survey from "./survey";
-import response from "./response";
-import age from "./age";
-
-
-const IndeksKepuasanMasyarakat = new Elysia({
-  prefix: "/indekskepuasanmasyarakat",
-  tags: ["Landing Page/Profile/Indeks Kepuasan Masyarakat"],
-})
-.use(gender)
-.use(monthlyStat)
-.use(survey)
-.use(response)
-.use(age)
-
-
-export default IndeksKepuasanMasyarakat

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/monthly-stat/create.ts

@@ -1,33 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const createMonthlyStat = async (context: Context) => {
-  const body = await context.body as {
-    month: string;
-    respondentsCount: number;
-    surveyId: string;
-  };
-
-  try {
-    const created = await prisma.monthlyStat.create({
-      data: {
-        month: body.month,
-        respondentsCount: body.respondentsCount,
-        surveyId: body.surveyId,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Monthly stat berhasil dibuat",
-      data: created,
-    };
-  } catch (error) {
-    console.error("Gagal create monthly stat:", error);
-    return {
-      success: false,
-      message: "Gagal membuat monthly stat",
-    };
-  }
-};
-export default createMonthlyStat;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/monthly-stat/del.ts

@@ -1,26 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const deleteMonthlyStat = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    await prisma.monthlyStat.delete({
-      where: { id },
-    });
-
-    return {
-      success: true,
-      message: "Data statistik bulanan berhasil dihapus",
-    };
-  } catch (error) {
-    console.error("Gagal hapus MonthlyStat:", error);
-    return {
-      success: false,
-      message: "Gagal menghapus data statistik bulanan",
-    };
-  }
-};
-
-export default deleteMonthlyStat;
-

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/monthly-stat/findMany.ts

@@ -1,26 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export const findManyMonthlyStat = async () => {
-  try {
-    const result = await prisma.monthlyStat.findMany({
-      include: {
-        survey: true,
-      },
-      orderBy: {
-        id: "desc",
-      },
-    });
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data MonthlyStat:", error);
-    return {
-      success: false,
-      message: "Gagal mengambil data statistik bulanan",
-    };
-  }
-};
-export default findManyMonthlyStat;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/monthly-stat/findUnique.ts

@@ -1,35 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const findUniqueMonthlyStat = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    const result = await prisma.monthlyStat.findUnique({
-      where: { id },
-      include: {
-        survey: true,
-      },
-    });
-
-    if (!result) {
-      return {
-        success: false,
-        message: "Data tidak ditemukan",
-      };
-    }
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data MonthlyStat:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mengambil data",
-    };
-  }
-};
-export default findUniqueMonthlyStat;
-

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/monthly-stat/index.ts

@@ -1,31 +0,0 @@
-import Elysia, { t } from "elysia";
-import createMonthlyStat from "./create";
-import deleteMonthlyStat from "./del";
-import findManyMonthlyStat from "./findMany";
-import findUniqueMonthlyStat from "./findUnique";
-import updateMonthlyStat from "./updt";
-
-
-const surveyResponse = new Elysia({
-  prefix: "/monthlystat",
-  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Survey Response"],
-})
-  .post("/create", createMonthlyStat, {
-    body: t.Object({
-      month: t.String(),
-      respondentsCount: t.Number(),
-      surveyId: t.String(),
-    }),
-  })
-  .get("/findMany", findManyMonthlyStat)
-  .get("/:id", findUniqueMonthlyStat)
-  .put("/:id", updateMonthlyStat, {
-    body: t.Object({
-      month: t.String(),
-      respondentsCount: t.Number(),
-      surveyId: t.String(),
-    }),
-  })
-  .delete("/del/:id", deleteMonthlyStat);
-
-export default surveyResponse;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/monthly-stat/updt.ts

@@ -1,34 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const updateMonthlyStat = async (context: Context) => {
-  const { id } = context.params as { id: string };
-  const body = await context.body as {
-    month?: string;
-    respondentsCount?: number;
-  };
-
-  try {
-    const updated = await prisma.monthlyStat.update({
-      where: { id },
-      data: {
-        month: body.month,
-        respondentsCount: body.respondentsCount,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Data MonthlyStat berhasil diupdate",
-      data: updated,
-    };
-  } catch (error) {
-    console.error("Gagal update MonthlyStat:", error);
-    return {
-      success: false,
-      message: "Gagal mengupdate data statistik bulanan",
-    };
-  }
-};
-
-export default updateMonthlyStat;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/response/create.ts

@@ -1,33 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const responseStatCreate = async (context: Context) => {
-  const body = (await context.body) as {
-    label: string;
-    count: number;
-    monthlyStatId: string;
-  };
-
-  try {
-    const created = await prisma.responseStat.create({
-      data: {
-        label: body.label,
-        count: body.count,
-        monthlyStatId: body.monthlyStatId,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Response Stat berhasil dibuat",
-      data: created,
-    };
-  } catch (error) {
-    console.error("Gagal create response stat:", error);
-    return {
-      success: false,
-      message: "Gagal membuat data response stat",
-    };
-  }
-};
-export default responseStatCreate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/response/del.ts

@@ -1,24 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const responseStatDelete = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    await prisma.responseStat.delete({
-      where: { id },
-    });
-
-    return {
-      success: true,
-      message: "Data response berhasil dihapus",
-    };
-  } catch (error) {
-    console.error("Gagal hapus Response Stat:", error);
-    return {
-      success: false,
-      message: "Gagal menghapus data response stat",
-    };
-  }
-};
-export default responseStatDelete;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/response/findMany.ts

@@ -1,26 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export const responseStatFindMany = async () => {
-  try {
-    const result = await prisma.responseStat.findMany({
-      include: {
-        MonthlyStat: true,
-      },
-      orderBy: {
-        id: "desc",
-      },
-    });
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Response Stat:", error);
-    return {
-      success: false,
-      message: "Gagal mengambil data response stat",
-    };
-  }
-};
-export default responseStatFindMany;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/response/findUnique.ts

@@ -1,34 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const responseStatFindUnique = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    const result = await prisma.responseStat.findUnique({
-      where: { id },
-      include: {
-        MonthlyStat: true,
-      },
-    });
-
-    if (!result) {
-      return {
-        success: false,
-        message: "Data response tidak ditemukan",
-      };
-    }
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Response Stat:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mengambil data response stat",
-    };
-  }
-};
-export default responseStatFindUnique;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/response/index.ts

@@ -1,31 +0,0 @@
-import Elysia, { t } from "elysia";
-import responseStatCreate from "./create";
-import responseStatDelete from "./del";
-import responseStatFindMany from "./findMany";
-import responseStatFindUnique from "./findUnique";
-import responseStatUpdate from "./updt";
-
-
-const response = new Elysia({
-  prefix: "/response",
-  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Response"],
-})
-  .post("/create", responseStatCreate, {
-    body: t.Object({
-      monthlyStatId: t.String(),
-      label: t.String(),
-      count: t.Number(),
-    }),
-  })
-  .get("/findMany", responseStatFindMany)
-  .get("/:id", responseStatFindUnique)
-  .put("/:id", responseStatUpdate, {
-    body: t.Object({
-      label: t.String(),
-      count: t.Number(),
-      monthlyStatId: t.String(),
-    }),
-  })
-  .delete("/del/:id", responseStatDelete);
-
-export default response;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/response/updt.ts

@@ -1,35 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const responseStatUpdate = async (context: Context) => {
-  const { id } = context.params as { id: string };
-  const body = (await context.body) as {
-    label?: string;
-    count?: number;
-    monthlyStatId?: string;
-  };
-
-  try {
-    const updated = await prisma.responseStat.update({
-      where: { id },
-      data: {
-        label: body.label,
-        count: body.count,
-        monthlyStatId: body.monthlyStatId,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Data response berhasil diperbarui",
-      data: updated,
-    };
-  } catch (error) {
-    console.error("Gagal update Response Stat:", error);
-    return {
-      success: false,
-      message: "Gagal memperbarui data response stat",
-    };
-  }
-};
-export default responseStatUpdate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/survey/create.ts

@@ -1,42 +0,0 @@
-import prisma from "@/lib/prisma";
-import { Context } from "elysia";
-
-const surveyCreate = async (context: Context) => {
-  const body = await context.body as {
-    title: string;
-    totalRespondents: number;
-    averageScore: number;
-  };
-
-  // Validasi
-  if (!body.title || !body.totalRespondents || body.averageScore === undefined) {
-    return {
-      success: false,
-      message: "Field title, tahun, dan skor wajib diisi",
-    };
-  }
-
-  try {
-    const created = await prisma.survey.create({
-      data: {
-        title: body.title,
-        totalRespondents: body.totalRespondents,
-        averageScore: body.averageScore,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Survey  berhasil dibuat",
-      data: created,
-    };
-  } catch (error) {
-    console.error("Gagal create survey :", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat membuat survey ",
-    };
-  }
-};
-
-export default surveyCreate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/survey/del.ts

@@ -1,24 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const surveyDelete = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    await prisma.survey.delete({
-      where: { id },
-    });
-
-    return {
-      success: true,
-      message: "Survey berhasil dihapus",
-    };
-  } catch (error) {
-    console.error("Gagal hapus survey:", error);
-    return {
-      success: false,
-      message: "Gagal menghapus survey",
-    };
-  }
-};
-export default surveyDelete;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/survey/findMany.ts

@@ -1,28 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export const surveyFindMany = async () => {
-  try {
-    const surveys = await prisma.survey.findMany({
-      include: {
-        monthlyStats: true,
-      },
-      orderBy: {
-        createdAt: "desc",
-      },
-    });
-
-    return {
-      success: true,
-      data: surveys,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data survey:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mengambil data survey",
-    };
-  }
-};
-
-export default surveyFindMany;
-

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/survey/findUnique.ts

@@ -1,34 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const surveyFindUnique = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    const survey = await prisma.survey.findUnique({
-      where: { id },
-      include: {
-        monthlyStats: true,
-      },
-    });
-
-    if (!survey) {
-      return {
-        success: false,
-        message: "Survey tidak ditemukan",
-      };
-    }
-
-    return {
-      success: true,
-      data: survey,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data survey:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mengambil data survey",
-    };
-  }
-};
-export default surveyFindUnique;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/survey/index.ts

@@ -1,30 +0,0 @@
-import Elysia, { t } from "elysia";
-import surveyCreate from "./create";
-import surveyUpdate from "./updt";
-import surveyFindMany from "./findMany";
-import surveyFindUnique from "./findUnique";
-import surveyDelete from "./del";
-
-const survey = new Elysia({
-  prefix: "/survey",
-  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Survey "],
-})
-  .post("/create", surveyCreate, {
-    body: t.Object({
-      title: t.String(),
-      totalRespondents: t.Number(),
-      averageScore: t.Number(),
-    }),
-  })
-  .get("/findMany", surveyFindMany)
-  .get("/:id", surveyFindUnique)
-  .put("/:id", surveyUpdate, {
-    body: t.Object({
-      title: t.String(),
-      totalRespondents: t.Number(),
-      averageScore: t.Number(),
-    }),
-  })
-  .delete("/del/:id", surveyDelete);
-
-export default survey;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/survey/updt.ts

@@ -1,49 +0,0 @@
-import prisma from "@/lib/prisma";
-import { Context } from "elysia";
-
-type FormUpdateSurvey = {
-  title?: string;
-  tahun?: number;
-  totalRespondents?: number;
-  averageScore?: number;
-};
-
-const surveyUpdate = async (context: Context) => {
-  const id = context.params?.id as string;
-  const body = await context.body as FormUpdateSurvey;
-
-  if (!id) {
-    return {
-      success: false,
-      message: "ID survey wajib diisi",
-    };
-  }
-
-  try {
-    const updated = await prisma.survey.update({
-      where: { id },
-      data: {
-        title: body.title,
-        totalRespondents: body.totalRespondents,
-        averageScore: body.averageScore,
-      },
-      include: {
-        monthlyStats: true,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Berhasil update survey ",
-      data: updated,
-    };
-  } catch (error) {
-    console.error("Gagal update survey :", error);
-    return {
-      success: false,
-      message: "Gagal update survey ",
-    };
-  }
-};
-
-export default surveyUpdate;

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

@@ -8,7 +8,6 @@ import SDGSDesa from "./sdgs-desa";
 import APBDes from "./apbdes";
 import PrestasiDesa from "./prestasi-desa";
 import KategoriPrestasi from "./prestasi-desa/kategori-prestasi";
-import IndeksKepuasanMasyarakat from "./indeks-kepuasan-masyarakat";
 
 const LandingPage = new Elysia({
     prefix: "/api/landingpage",
@@ -24,6 +23,5 @@ const LandingPage = new Elysia({
 .use(APBDes)
 .use(PrestasiDesa)
 .use(KategoriPrestasi)
-.use(IndeksKepuasanMasyarakat)
 
 export default LandingPage

src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+import BackButton from '../../layanan/_com/BackButto';
+
+type HeaderSearchProps = {
+  placeholder?: string;
+  searchIcon?: React.ReactNode;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  children?: React.ReactNode;
+};
+
+function LayoutTabsBerita({ 
+  children, 
+  placeholder = "pencarian",
+  searchIcon = <IconSearch size={20} />,
+  value,
+  onChange }: HeaderSearchProps) {
+
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "Semua",
+      value: "semua",
+      href: "/darmasaba/desa/berita/semua"
+    },
+    {
+      label: "Budaya",
+      value: "budaya",
+      href: "/darmasaba/desa/berita/budaya"
+    },
+    {
+      label: "Pemerintahan",
+      value: "pemerintahan",
+      href: "/darmasaba/desa/berita/pemerintahan"
+    },
+    {
+      label: "Ekonomi",
+      value: "ekonomi",
+      href: "/darmasaba/desa/berita/ekonomi"
+    },
+    {
+      label: "Pembangunan",
+      value: "pembangunan",
+      href: "/darmasaba/desa/berita/pembangunan"
+    },
+    {
+      label: "Sosial",
+      value: "sosial",
+      href: "/darmasaba/desa/berita/sosial"
+    },
+    {
+      label: "Teknologi",
+      value: "teknologi",
+      href: "/darmasaba/desa/berita/teknologi"
+    },
+
+  ];
+  const curentTab = tabs.find(tab => tab.href === pathname)
+  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value)
+    if (tab) {
+      router.push(tab.href)
+    }
+    setActiveTab(value)
+  }
+
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname)
+    if (match) {
+      setActiveTab(match.value)
+    }
+  }, [pathname])
+
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+    {/* Header */}
+    <Box px={{ base: "md", md: 100 }}>
+      <BackButton />
+    </Box>
+    <Container size="lg" px="md">
+      <Stack align="center" gap="0" >
+        <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+          Portal Berita Darmasaba
+        </Text>
+        <Text ta="center" px="md">
+          Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+        </Text>
+      </Stack>
+    </Container>
+      <Tabs color={colors['blue-button']} variant="pills" defaultValue="semua" value={activeTab} onChange={handleTabChange}>
+        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
+          <Grid>
+            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
+              <TabsList>
+                {tabs.map((e, i) => (
+                  <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                ))}
+              </TabsList>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
+                <TextInput
+                  radius="lg"
+                  placeholder={placeholder}
+                  leftSection={searchIcon}
+                  w="100%"
+                  value={value}
+                  onChange={onChange}
+                />
+            </GridCol>
+          </Grid>
+        </Box>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value}>
+            {/* Konten dummy, bisa diganti tergantung routing */}
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
+}
+
+export default LayoutTabsBerita;

src/app/darmasaba/(pages)/desa/berita/layout.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import LayoutTabsBerita from './_lib/layoutTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabsBerita>
+      {children}
+    </LayoutTabsBerita>
+  );
+}
+
+export default Layout;

src/app/darmasaba/(pages)/desa/berita/page.tsx

@@ -1,102 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
-import { IconSearch } from '@tabler/icons-react';
-import BackButton from '../layanan/_com/BackButto';
-import Budaya from './(tabs)/budaya';
-import Ekonomi from './(tabs)/ekonomi';
-import Pemerintahan from './(tabs)/pemerintahan';
-import Semua from './(tabs)/semua';
-import Sosial from './(tabs)/sosial';
-import Teknologi from './(tabs)/teknologi';
-import Pembangunan from './(tabs)/pembangunan';
-
-
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md">
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Portal Berita Darmasaba
-          </Text>
-          <Text ta="center" px="md">
-            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
-          </Text>
-        </Stack>
-      </Container>
-
-      {/* Tabs Menu */}
-      <Tabs color={colors['blue-button']} variant="pills" defaultValue="semua">
-        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
-          <Grid>
-            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
-              <TabsList>
-                <TabsTab value="semua">
-                  Semua
-                </TabsTab>
-                <TabsTab value="pemerintahan">
-                  Pemerintahan
-                </TabsTab>
-                <TabsTab value="pembangunan" >
-                  Pembangunan
-                </TabsTab>
-                <TabsTab value="ekonomi" >
-                  Ekonomi
-                </TabsTab>
-                <TabsTab value="sosial" >
-                  Sosial
-                </TabsTab>
-                <TabsTab value="budaya" >
-                  Budaya
-                </TabsTab>
-                <TabsTab value="teknologi" >
-                  Teknologi
-                </TabsTab>
-              </TabsList>
-            </GridCol>
-            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
-              <TextInput
-                w={{ base: "100%", md: "100%" }}
-                radius="lg"
-                placeholder="Cari Berita"
-                leftSection={<IconSearch size={18} />}
-              />
-            </GridCol>
-          </Grid>
-        </Box>
-
-        <TabsPanel value='semua'>
-          <Semua />
-        </TabsPanel>
-        <TabsPanel value='pemerintahan'>
-          <Pemerintahan />
-        </TabsPanel>
-        <TabsPanel value="pembangunan" >
-          <Pembangunan />
-        </TabsPanel>
-        <TabsPanel value="ekonomi" >
-          <Ekonomi />
-        </TabsPanel>
-        <TabsPanel value="sosial" >
-          <Sosial />
-        </TabsPanel>
-        <TabsPanel value="budaya" >
-          <Budaya />
-        </TabsPanel>
-        <TabsPanel value="teknologi" >
-          <Teknologi />
-        </TabsPanel>
-
-      </Tabs>
-
-
-
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/berita/page2.txt

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import colors from '@/con/colors';
+import { Box, Container, Grid, GridCol, Skeleton, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import BackButton from '../layanan/_com/BackButto';
+import Budaya from './budaya/page';
+import Ekonomi from './ekonomi/page';
+import Pemerintahan from './pemerintahan/page';
+import Semua from './semua/page';
+import Sosial from './sosial/page';
+import Teknologi from './teknologi/page';
+import Pembangunan from './pembangunan/page';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+
+
+function Page() {
+  const [selectedKategori, setSelectedKategori] = useState<string>('Semua');
+  const [loading, setLoading] = useState(false);
+  const state = useProxy(stateDashboardBerita);
+
+
+  useEffect(() => {
+    state.kategoriBerita.findMany.load()
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        await stateDashboardBerita.berita.findMany.load(1, 100);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadData();
+  }, []);
+
+  const data = state.berita.findMany.data || [];
+
+  const categories = [...new Set(
+    data
+      .filter(item => item.kategoriBerita?.name)
+      .map(item => item.kategoriBerita?.name)
+  )];
+
+  const filteredData = selectedKategori === 'Semua' 
+    ? data 
+    : data.filter(item => item.kategoriBerita?.name === selectedKategori);
+
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md">
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Portal Berita Darmasaba
+          </Text>
+          <Text ta="center" px="md">
+            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+
+      {/* Tabs Menu */}
+      <Tabs color={colors['blue-button']} variant="pills" defaultValue="semua">
+        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
+          <Grid>
+            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
+              <TabsList>
+                {categories.map((kategori) => (
+                  <TabsTab key={kategori} value={kategori || ''}>
+                    {kategori}
+                  </TabsTab>
+                ))}
+              </TabsList>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
+              {loading ? (
+                <Skeleton height={42} />
+              ) : filteredData.length > 0 ? (
+                <TextInput
+                  w={{ base: "100%", md: "100%" }}
+                  radius="lg"
+                  placeholder="Cari Berita"
+                  leftSection={<IconSearch size={18} />}
+                />
+              ) : (
+                <Text>Tidak ada data</Text>
+              )}
+            </GridCol>
+          </Grid>
+        </Box>
+
+        <TabsPanel value='semua'>
+          <Semua />
+        </TabsPanel>
+        <TabsPanel value='pemerintahan'>
+          <Pemerintahan />
+        </TabsPanel>
+        <TabsPanel value="pembangunan" >
+          <Pembangunan />
+        </TabsPanel>
+        <TabsPanel value="ekonomi" >
+          <Ekonomi />
+        </TabsPanel>
+        <TabsPanel value="sosial" >
+          <Sosial />
+        </TabsPanel>
+        <TabsPanel value="budaya" >
+          <Budaya />
+        </TabsPanel>
+        <TabsPanel value="teknologi" >
+          <Teknologi />
+        </TabsPanel>
+
+      </Tabs>
+
+
+
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx

@@ -8,7 +8,7 @@ function LambangDesa() {
       <Stack align='center' gap={0}>
         <Box pb={30}>
           <Center>
-          <Image src={"/api/img/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+          <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
           </Center>
           <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lambang Desa</Text>
         </Box>

src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx

@@ -7,7 +7,7 @@ function MaskotDesa() {
       <Stack align='center' gap={0}>
         <Box pb={30}>
           <Center>
-            <Image src={"/api/img/pudak-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+            <Image src={"/pudak-icon.png"} alt="" w={{ base: 200, md: 300 }} />
           </Center>
           <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Maskot Desa</Text>
         </Box>
@@ -29,7 +29,7 @@ function MaskotDesa() {
               <Center>
                 <Box>
                   <Paper p={"lg"}>
-                    <Image src={"/api/img/pohonpudak.png"} alt="" w={{ base: 150, md: 250 }} />
+                    <Image src={"/pohonpudak.png"} alt="" w={{ base: 150, md: 250 }} />
                     <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Pohon Pudak</Text>
                   </Paper>
                 </Box>
@@ -37,7 +37,7 @@ function MaskotDesa() {
               <Center>
                 <Box>
                   <Paper p={"lg"}>
-                    <Image src={"/api/img/bungapudak.png"} alt="" w={{ base: 150, md: 250 }} />
+                    <Image src={"/bungapudak.png"} alt="" w={{ base: 150, md: 250 }} />
                     <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Bunga Pudak</Text>
                   </Paper>
                 </Box>
@@ -64,7 +64,7 @@ function MaskotDesa() {
               <Box>
                 <Center>
                   <Paper p={"lg"}>
-                    <Image src={"/api/img/tarisekar.png"} alt="" w={{ base: 150, md: 250 }} />
+                    <Image src={"/tarisekar.png"} alt="" w={{ base: 150, md: 250 }} />
                     <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Tari Sekar Pudak</Text>
                   </Paper>
                 </Center>
@@ -72,7 +72,7 @@ function MaskotDesa() {
               <Box>
                 <Center>
                   <Paper p={"lg"}>
-                    <Image src={"/api/img/klimakstari.png"} alt="" w={{ base: 150, md: 250 }} />
+                    <Image src={"/klimakstari.png"} alt="" w={{ base: 150, md: 250 }} />
                     <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Pose Klimaks Tari </Text>
                     <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Sekar Pudak </Text>
                   </Paper>

src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx

@@ -8,7 +8,7 @@ function SejarahDesa() {
         <Stack align='center' gap={0}>
           <Box pb={30}>
             <Center>
-              <Image src={"/api/img/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+              <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
             </Center>
             <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Sejarah Desa</Text>
           </Box>

src/app/darmasaba/(pages)/desa/profile/ui/visimisiDesa.tsx

@@ -8,7 +8,7 @@ function VisimisiDesa() {
             <Box pb={30}>
                 <Stack align='center' gap={0}>
                     <Box pb={30}>
-                        <Image src={"/api/img/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                        <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
                     </Box>
                     <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
                         <Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Visi Desa</Text>

src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -28,7 +28,7 @@ function Page() {
         <BackButton />
       </Box>
       <Center>
-        <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 70, md: 100 }} alt='' />
+        <Image src={"/darmasaba-icon.png"} w={{ base: 70, md: 100 }} alt='' />
       </Center>
       <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
         Daftar Informasi Publik Desa Darmasaba

src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx

@@ -1,6 +1,12 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
 import colors from '@/con/colors';
-import { Stack, Box, Paper, Text, Image } from '@mantine/core';
+import { Box, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
-import React from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
@@ -9,16 +15,107 @@ function Page() {
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+      <Title ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>Struktur PPID</Title>
-        Struktur PPID Desa Darmasaba
+        <StrukturOrganisasiPPID />
-      </Text>
+      
-      <Box px={{ base: "md", md: 100 }}>
-        <Paper p={"xl"} bg={colors['white-trans-1']}>
-          <Image src={"/api/img/struktur-ppid.png"} alt='' />
-        </Paper>
-      </Box>
     </Stack>
   );
 }
 
-      export default Page;
+function StrukturOrganisasiPPID() {
+  const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
+
+  useEffect(() => {
+    stateOrganisasi.findMany.load()
+  }, [])
+
+  if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    );
+  }
+
+  // Step 1: Group pegawai berdasarkan posisiId
+  const posisiMap = new Map<string, any>();
+
+  for (const pegawai of stateOrganisasi.findMany.data) {
+    const posisiId = pegawai.posisi.id;
+    if (!posisiMap.has(posisiId)) {
+      posisiMap.set(posisiId, {
+        ...pegawai.posisi,
+        pegawaiList: [],
+        children: []
+      });
+    }
+    posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
+  }
+
+
+  // Step 2: Buat struktur pohon berdasarkan parentId
+  const root: any[] = [];
+
+  posisiMap.forEach((posisi) => {
+    if (posisi.parentId) {
+      const parent = posisiMap.get(posisi.parentId);
+      if (parent) {
+        parent.children.push(posisi);
+      }
+    } else {
+      root.push(posisi);
+    }
+  });
+
+  // Step 3: Ubah struktur ke format OrganizationChart
+  function toOrgChartFormat(node: any): any {
+    return {
+      expanded: true,
+      type: 'person',
+      styleClass: 'p-person',
+      data: {
+        name: node.pegawaiList?.[0]?.namaLengkap || 'Tidak ada pegawai',
+        status: node.nama,
+        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png'
+      },
+      children: node.children.map(toOrgChartFormat)
+    };
+  }
+
+
+  const chartData = root.map(toOrgChartFormat);
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors.grey} p="md" style={{ overflowX: 'auto' }}>
+        <OrganizationChart style={{ color: colors['blue-button'] }} value={chartData} nodeTemplate={nodeTemplate} />
+      </Paper>
+    </Box>
+  );
+}
+
+
+function nodeTemplate(node: any) {
+  const imageSrc = node?.data?.image || '/img/default.png';
+  const name = node?.data?.name || 'Tanpa Nama';
+  const status = node?.data?.status || 'Tidak ada deskripsi';
+
+  return (
+    <Stack pos={"relative"} py={"xl"} gap={"22"}>
+      <Stack align="center" gap={4}>
+        <Image
+          src={imageSrc}
+          alt={name}
+          radius="xl"
+          w={120}
+          h={120}
+          fit="cover"
+        />
+        <Text fw={600} ta="center">{name}</Text>
+        <Text size="sm" c="dimmed" ta="center">{status}</Text>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default Page;

src/con/navbar-list-menu.ts

@@ -66,7 +66,7 @@ const navbarListMenu = [
             {
                 id: "2.3",
                 name: "Berita",
-                href: "/darmasaba/desa/berita"
+                href: "/darmasaba/desa/berita/semua"
             },
             {
                 id: "2.4",