Jumat, 30 May 2025 :

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

Yang Lagi Dikerjakan:
* Progress Tampilan UI Admin Di Menu Lingkungan

Yang Akan Dikerjakan:
* API Menu Lain
* Tampilan UI Admin Di Menu Pendidikan

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

@@ -0,0 +1,177 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import stateDashboardBerita from '../../../_state/desa/berita';
+import { BeritaEditor } from '../_com/BeritaEditor';
+
+export default function CreateBerita() {
+  const beritaState = useProxy(stateDashboardBerita);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    // Reset state di valtio
+    beritaState.berita.create.form = {
+      judul: "",
+      deskripsi: "",
+      kategoriBeritaId: "",
+      imageId: "",
+      content: "",
+    };
+
+    // Reset state lokal
+    setPreviewImage(null);
+    setFile(null);
+    if (editorInstance) {
+      editorInstance.commands.setContent(""); // Kosongkan editor
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+    if (!editorInstance) return toast.error("Editor belum siap");
+
+    const htmlContent = editorInstance.getHTML();
+    if (!htmlContent || htmlContent === "<p></p>") return toast.warn("Konten tidak boleh kosong");
+
+    beritaState.berita.create.form.content = htmlContent;
+
+    // Upload gambar dulu
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    // Simpan ID gambar ke form
+    beritaState.berita.create.form.imageId = uploaded.id;
+
+    // Submit data berita
+    await beritaState.berita.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/desa/berita")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+      <Button variant="subtle" onClick={() => router.back()}>
+        <IconArrowBack color={colors['blue-button']} size={25} />
+      </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Berita</Title>
+          <TextInput
+            value={beritaState.berita.create.form.judul}
+            onChange={(val) => {
+              beritaState.berita.create.form.judul = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <SelectCategory
+            onChange={(val) => {
+              beritaState.berita.create.form.kategoriBeritaId = val.id;
+            }}
+          />
+          <TextInput
+            value={beritaState.berita.create.form.deskripsi}
+            onChange={(val) => {
+              beritaState.berita.create.form.deskripsi = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <BeritaEditor
+              showSubmit={false}
+              onEditorReady={(ed) => setEditorInstance(ed)}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+
+  function SelectCategory({
+    onChange,
+  }: {
+    onChange: (value: Prisma.KategoriBeritaGetPayload<{
+      select: {
+        name: true;
+        id: true;
+      };
+    }>) => void;
+  }) {
+    const categoryState = useProxy(stateDashboardBerita.category);
+  
+    useShallowEffect(() => {
+      categoryState.findMany.load();
+    }, []);
+  
+    if (!categoryState.findMany.data) {
+      return <Skeleton height={38} />;
+    }
+  
+    return (
+      <Select
+        label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+        placeholder="Pilih kategori"
+        data={categoryState.findMany.data.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }))}
+        onChange={(val) => {
+          const selected = categoryState.findMany.data?.find((item) => item.id === val);
+          if (selected) {
+            onChange(selected);
+          }
+        }}
+        searchable
+        nothingFoundMessage="Tidak ditemukan"
+      />
+    );
+  }
+}

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

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

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

@@ -29,7 +29,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import { BeritaEditor } from "../../_com/BeritaEditor";
 import colors from "@/con/colors";
 
-function BeritaEdit() {
+function EditBerita() {
   const beritaState = useProxy(stateDashboardBerita);
   const router = useRouter();
   const params = useParams();
@@ -51,7 +51,7 @@ function BeritaEdit() {
     const loadBerita = async () => {
       const id = params?.id as string;
       if (!id) return;
-  
+
       try {
         const data = await stateDashboardBerita.berita.edit.load(id); // akses langsung, bukan dari proxy
         if (data) {
@@ -62,7 +62,7 @@ function BeritaEdit() {
             content: data.content || '',
             imageId: data.imageId || '',
           });
-  
+
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
           }
@@ -72,17 +72,17 @@ function BeritaEdit() {
         toast.error("Gagal memuat data berita");
       }
     };
-  
+
     loadBerita();
   }, [params?.id]); // ✅ hapus beritaState dari dependency
-  
+
 
 
   // Handle editor ready
   const handleEditorReady = (editor: any) => {
     setEditorInstance(editor);
     setIsEditorReady(true);
-    
+
     // Set initial content if exists
     if (formData.content) {
       editor.commands.setContent(formData.content);
@@ -94,35 +94,27 @@ function BeritaEdit() {
       return toast.error("Editor belum siap");
     }
 
+    const htmlContent = editorInstance.getHTML();
+    if (!htmlContent || htmlContent === "<p></p>") {
+      return toast.warn("Konten tidak boleh kosong");
+    }
+
     try {
-      const htmlContent = editorInstance.getHTML();
-      if (!htmlContent || htmlContent === "<p></p>") {
-        return toast.warn("Konten tidak boleh kosong");
-      }
-
-      // Update form data with editor content
-      const updatedFormData = {
-        ...formData,
-        content: htmlContent
-      };
-
       // Update global state with form data
       beritaState.berita.edit.form = {
-        judul: updatedFormData.judul,
-        deskripsi: updatedFormData.deskripsi,
-        content: updatedFormData.content,
-        kategoriBeritaId: updatedFormData.kategoriBeritaId || '',
-        imageId: beritaState.berita.edit.form.imageId // Keep existing imageId if not changed
+        ...beritaState.berita.edit.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: htmlContent,
+        kategoriBeritaId: formData.kategoriBeritaId || '',
+        imageId: formData.imageId // Keep existing imageId if not changed
       };
 
       // Jika ada file baru, upload
       if (file) {
-        const res = await ApiFetch.api.fileStorage.create.post({
-          file,
-          name: file.name,
-        });
-
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
+
         if (!uploaded?.id) {
           return toast.error("Gagal upload gambar");
         }
@@ -131,7 +123,6 @@ function BeritaEdit() {
         beritaState.berita.edit.form.imageId = uploaded.id;
       }
 
-
       await beritaState.berita.edit.update();
       toast.success("Berita berhasil diperbarui!");
       router.push("/admin/desa/berita");
@@ -142,14 +133,18 @@ function BeritaEdit() {
   };
 
   return (
-    <Box py={10}>
-      <IconArrowBack color={colors["blue-button"]} size={30} onClick={() => router.back()}/>
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
       <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
         <Stack gap={"xs"}>
           <Title order={3}>Edit Berita</Title>
           <TextInput
             value={formData.judul}
-            onChange={(e) => setFormData({...formData, judul: e.target.value})}
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
@@ -166,7 +161,7 @@ function BeritaEdit() {
 
           <TextInput
             value={formData.deskripsi}
-            onChange={(e) => setFormData({...formData, deskripsi: e.target.value})}
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
             label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
             placeholder="masukkan deskripsi"
           />
@@ -198,11 +193,14 @@ function BeritaEdit() {
               initialContent={formData.content}
               onEditorReady={handleEditorReady}
               showSubmit={false}
-              onUpdate={(content) => setFormData({...formData, content})}
+              onUpdate={(content) => {
+                setFormData((prev) => ({ ...prev, content }));
+                beritaState.berita.edit.form.content = content;
+              }}
             />
           </Box>
 
-          <Button onClick={handleSubmit}>Simpan Perubahan</Button>
+          <Button onClick={handleSubmit}>Edit Berita</Button>
         </Stack>
       </Paper>
     </Box>
@@ -237,9 +235,9 @@ function SelectCategory({
     return <Skeleton height={38} />;
   }
 
-  
+
   const selectedValue = value || defaultValue;
-  
+
   return (
     <Select
       label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
@@ -266,4 +264,4 @@ function SelectCategory({
   );
 }
 
-export default BeritaEdit;
+export default EditBerita;

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

@@ -1,146 +1,38 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import ApiFetch from '@/lib/api-fetch';
-import { ActionIcon, Box, Button, Center, FileInput, Flex, Image, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import { IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import stateDashboardBerita from '../../_state/desa/berita';
-import { BeritaEditor } from './_com/BeritaEditor';
+
 
 function Page() {
   return (
     <Box>
-      <Title order={3}>Berita</Title>
-      <BeritaCreate />
+      <Grid>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Title order={3}>Berita</Title>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <Paper radius={"lg"} bg={colors['white-1']}>
+            <TextInput
+              radius={"lg"}
+              placeholder='pencarian'
+              leftSection={<IconSearch size={20} />}
+            />
+          </Paper>
+        </GridCol>
+      </Grid>
       <BeritaList />
     </Box>
   );
 }
 
-function BeritaCreate() {
-  const beritaState = useProxy(stateDashboardBerita);
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-  const [editorInstance, setEditorInstance] = useState<any>(null);
 
-  const resetForm = () => {
-    // Reset state di valtio
-    beritaState.berita.create.form = {
-      judul: "",
-      deskripsi: "",
-      kategoriBeritaId: "",
-      imageId: "",
-      content: "",
-    };
-
-    // Reset state lokal
-    setPreviewImage(null);
-    setFile(null);
-    if (editorInstance) {
-      editorInstance.commands.setContent(""); // Kosongkan editor
-    }
-  };
-
-  const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
-    }
-    if (!editorInstance) return toast.error("Editor belum siap");
-
-    const htmlContent = editorInstance.getHTML();
-    if (!htmlContent || htmlContent === "<p></p>") return toast.warn("Konten tidak boleh kosong");
-
-    beritaState.berita.create.form.content = htmlContent;
-
-    // Upload gambar dulu
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    });
-
-    const uploaded = res.data?.data;
-    if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar");
-    }
-
-    // Simpan ID gambar ke form
-    beritaState.berita.create.form.imageId = uploaded.id;
-
-    // Submit data berita
-    await beritaState.berita.create.create();
-
-    toast.success("Berita berhasil disimpan!");
-
-    // Reset form setelah submit
-    resetForm();
-  };
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Berita</Title>
-          <TextInput
-            value={beritaState.berita.create.form.judul}
-            onChange={(val) => {
-              beritaState.berita.create.form.judul = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
-          />
-          <SelectCategory
-            onChange={(val) => {
-              beritaState.berita.create.form.kategoriBeritaId = val.id;
-            }}
-          />
-          <TextInput
-            value={beritaState.berita.create.form.deskripsi}
-            onChange={(val) => {
-              beritaState.berita.create.form.deskripsi = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
-            <BeritaEditor
-              showSubmit={false}
-              onEditorReady={(ed) => setEditorInstance(ed)}
-            />
-          </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
 
 
 
@@ -228,9 +120,7 @@ function BeritaList() {
   if (!beritaState.berita.findMany.data) {
     return (
       <Stack py={10}>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton h={500} />
       </Stack>
     )
   }
@@ -239,41 +129,49 @@ function BeritaList() {
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>List Berita</Text>
-          <SimpleGrid cols={{ base: 1, md: 4 }}>
-            {beritaState.berita.findMany.data?.map((item) => (
-              <Paper key={item.id} bg={colors['BG-trans']} p={'md'}>
-                <Box>
-                  <Flex justify="flex-end" mt={10}>
-                    <ActionIcon
-                      onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}
-                      disabled={beritaState.berita.delete.loading}
-                      color={colors['blue-button']} variant='transparent'
-                    >
-                      <IconX size={20} />
-                    </ActionIcon>
-                    <ActionIcon
-                      onClick={() => router.push(`/admin/desa/berita/edit/${item.id}`)}
-                      color={colors['blue-button']} variant='transparent'
-                    >
-                      <IconEdit size={20} />
-                    </ActionIcon>
-                  </Flex>
-                  <Text fw={"bold"} fz={"sm"}>Kategori</Text>
-                  <Text>{item.kategoriBerita?.name}</Text>
-                  <Text fw={"bold"} fz={"sm"}>Judul</Text>
-                  <Text>{item.judul}</Text>
-                  <Text lineClamp={1} fw={"bold"} fz={"sm"}>Deskripsi</Text>
-                  <Text size='sm' lineClamp={2}>{item.deskripsi}</Text>
-                  <Text fw={"bold"} fz={"sm"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={item.image?.link} alt="gambar" />
-                </Box>
-              </Paper>
-            ))}
-          </SimpleGrid>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/berita/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}> 
+              <TableThead>
+                <TableTr>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Kategori</TableTh>
+                  <TableTh w={250}>Image</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {beritaState.berita.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd >
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd >{item.kategoriBerita?.name}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="gambar" />
+                    </TableTd>
+                    <TableTd>
+                      <Button bg={"green"} onClick={() => router.push(`/admin/desa/berita/detail/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table> </Box>
         </Stack>
       </Paper>
 
@@ -288,45 +186,4 @@ function BeritaList() {
   )
 }
 
-
-function SelectCategory({
-  onChange,
-}: {
-  onChange: (value: Prisma.KategoriBeritaGetPayload<{
-    select: {
-      name: true;
-      id: true;
-    };
-  }>) => void;
-}) {
-  const categoryState = useProxy(stateDashboardBerita.category);
-
-  useShallowEffect(() => {
-    categoryState.findMany.load();
-  }, []);
-
-  if (!categoryState.findMany.data) {
-    return <Skeleton height={38} />;
-  }
-
-  return (
-    <Select
-      label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
-      placeholder="Pilih kategori"
-      data={categoryState.findMany.data.map((item) => ({
-        label: item.name,
-        value: item.id,
-      }))}
-      onChange={(val) => {
-        const selected = categoryState.findMany.data?.find((item) => item.id === val);
-        if (selected) {
-          onChange(selected);
-        }
-      }}
-      searchable
-      nothingFoundMessage="Tidak ditemukan"
-    />
-  );
-}
-
 export default Page;