UI admin bagian pengumuman dan backendnya

2025-06-04 17:24:32 +08:00
parent f56c5b3532
commit 7d58513e33
11 changed files with 513 additions and 153 deletions
--- a/src/app/admin/(dashboard)/desa/pengumuman/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/[id]/edit/page.tsx
@@ -3,7 +3,7 @@ import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';

 function EditPengumuman() {
  const router = useRouter();
--- a/src/app/admin/(dashboard)/desa/pengumuman/detail/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/detail/page.tsx
@@ -1,15 +1,14 @@
 'use client'

-import { Box, Button, Flex, Image, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { Box, Button, Paper } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';

 import colors from '@/con/colors';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-// import stateDashboardBerita from '../../../_state/desa/berita';
+

 function DetailPengumuman() {
-  // const pengumumanState = useProxy(stateDashboardpengumuman)
+  // const pengumumanState = useProxy(stateDesaPengumuman)
  // const [modalHapus, setModalHapus] = useState(false)
  // const [selectedId, setSelectedId] = useState<string | null>(null)
  // const params = useParams()
@@ -32,9 +31,7 @@ function DetailPengumuman() {
  // if (!pengumumanState.pengumuman.findUnique.data) {
  //   return (
  //     <Stack py={10}>
-  //       {Array.from({ length: 10 }).map((_, k) => (
-  //         <Skeleton key={k} h={40} />
-  //       ))}
+  //         <Skeleton h={400} />
  //     </Stack>
  //   )
  // }
@@ -47,51 +44,47 @@ function DetailPengumuman() {
        </Button>
      </Box>
      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
+        {/* <Stack>
          <Text fz={"xl"} fw={"bold"}>Detail Pengumuman</Text>
-            <Paper bg={colors['BG-trans']} p={'md'}>
+          {pengumumanState.pengumuman.findUnique.data ? (
+            <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
              <Stack gap={"xs"}>
                <Box>
                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
-                  <Text fz={"lg"}>Pendidikan</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.CategoryPengumuman?.name}</Text>
                </Box>
                <Box>
                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi Singkat</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.judul}</Text>
                </Box>
                <Box>
                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>2025-06-04</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Waktu</Text>
-                  <Text fz={"lg"}>08:00 - 17:00</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={"/"} alt="gambar" />
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.deskripsi}</Text>
                </Box>
                <Box>
                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: pengumumanState.pengumuman.findUnique.data?.content }} />
                </Box>
                <Flex gap={"xs"} mt={10}>
                  <Button
-                    onClick={() => router.push("/admin/desa/pengumuman")}
+                    onClick={() => {
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        setSelectedId(pengumumanState.pengumuman.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={pengumumanState.pengumuman.delete.loading || !pengumumanState.pengumuman.findUnique.data}
                    color={"red"}
                  >
                    <IconX size={20} />
                  </Button>
                  <Button
-                    onClick={() => router.push("/admin/desa/pengumuman/edit")}
+                   onClick={() => {
+                    if (pengumumanState.pengumuman.findUnique.data) {
+                      router.push(`/admin/desa/pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
+                    }
+                   }}
+                    disabled={!pengumumanState.pengumuman.findUnique.data}
                    color={"green"}
                  >
                    <IconEdit size={20} />
@@ -99,7 +92,8 @@ function DetailPengumuman() {
                </Flex>
              </Stack>
            </Paper>
-        </Stack>
+          ) : null}
+        </Stack> */}
      </Paper>

      {/* Modal Konfirmasi Hapus
--- a/src/app/admin/(dashboard)/desa/pengumuman/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/create/page.tsx
@@ -1,52 +1,109 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';

 function CreatePengumuman() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
  const router = useRouter();
+
+  const handleSubmit = async () => {
+    await pengumumanState.pengumuman.create.create()
+    resetForm()
+    router.push("/admin/desa/pengumuman")
+  }
+
+  const resetForm = () => {
+    pengumumanState.pengumuman.create.form = {
+      judul: "",
+      deskripsi: "",
+      content: "",
+      categoryPengumumanId: "",
+    };
+  };
  return (
    <Box>
      <Box mb={10}>
        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
        </Button>
      </Box>

-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
        <Stack gap={"xs"}>
          <Title order={4}>Create Pengumuman</Title>
          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-          placeholder='Masukkan judul'
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.judul = val.target.value
+            }}
+          />
+          <SelectCategory
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id;
+            }}
          />
          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
-          placeholder='Masukkan deskripsi singkat'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-          placeholder='Masukkan tanggal'
-          />
-           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Waktu</Text>}
-          placeholder='Masukkan waktu'
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+            placeholder='Masukkan deskripsi singkat'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+            }}
          />
          <Box>
-          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-          <KeamananEditor
-          showSubmit={false}
-          />
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={pengumumanState.pengumuman.create.form.content}
+              onChange={(htmlContent) => {
+                pengumumanState.pengumuman.create.form.content = htmlContent;
+              }}
+            />
          </Box>

          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
-       </Stack>
+        </Stack>
      </Paper>
-   </Box>
+    </Box>
+  );
+}
+
+function SelectCategory({
+  onChange,
+}: {
+  onChange: (value: Prisma.CategoryPengumumanGetPayload<{ select: { name: true; id: true; } }>) => void;
+}) {
+  const categoryState = useProxy(stateDesaPengumuman.category);
+
+  useShallowEffect(() => {
+    categoryState.findMany.load();
+  }, []);
+
+  return (
+    <Select
+      label={<Text fw={"bold"} fz={"sm"}>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"
+    />
  );
 }

--- a/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
@@ -1,9 +1,14 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
+import stateDesaPengumuman from '../../_state/desa/pengumuman';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import { useState } from 'react';


 function Page() {
@@ -20,31 +25,31 @@ function Page() {
 }

 function PengumumanList() {
-  // const pengumumanState = useProxy(stateDashboardPengumuman)
-  // const [modalHapus, setModalHapus] = useState(false)
-  // const [selectedId, setSelectedId] = useState<string | null>(null)
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)

-  // useShallowEffect(() => {
-  //   pengumumanState.pengumuman.findMany.load()
-  // }, [])
+  useShallowEffect(() => {
+    pengumumanState.pengumuman.findMany.load()
+  }, [])

  const router = useRouter()

-  // const handleHapus = () => {
-  //   if (selectedId) {
-  //     pengumumanState.pengumuman.delete.byId(selectedId)
-  //     setModalHapus(false)
-  //     setSelectedId(null)
-  //   }
-  // }
+  const handleHapus = () => {
+    if (selectedId) {
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }

-  // if (!pengumumanState.pengumuman.findMany.data) {
-  //   return (
-  //     <Stack py={10}>
-  //       <Skeleton h={500} />
-  //     </Stack>
-  //   )
-  // }
+  if (!pengumumanState.pengumuman.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }

  return (
    <Box py={10}>
@@ -66,42 +71,39 @@ function PengumumanList() {
                <TableTr>
                  <TableTh w={250}>Judul</TableTh>
                  <TableTh w={250}>Kategori</TableTh>
-                  <TableTh w={250}>Image</TableTh>
                  <TableTh w={200}>Detail</TableTh>

                </TableTr>
              </TableThead>
              <TableTbody >
-
-                <TableTr>
+                {pengumumanState.pengumuman.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
                  <TableTd >
                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd >Kesehatan</TableTd>
-                  <TableTd>
-                    <Image w={100} src={"/"} alt="gambar" />
+                      <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                    </Box>  
                  </TableTd>
+                  <TableTd >{item.CategoryPengumuman?.name}</TableTd>
                  <TableTd>
                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/detail`)}>
                      <IconDeviceImacCog size={25} />
                    </Button>
                  </TableTd>
                </TableTr>
+                ))}
              </TableTbody>
            </Table>
          </Box>
        </Stack>
      </Paper>

-      {/* Modal Konfirmasi Hapus
+      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
        text='Apakah anda yakin ingin menghapus berita ini?'
-      /> */}
+      />
    </Box>
  )
 }