API & UI Admin Menu Desa, Submenu Pengumuman

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

@@ -0,0 +1,53 @@
+'use client'
+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 '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+
+function EditPengumuman() {
+  const router = useRouter();
+  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}>Edit Pengumuman</Title>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
+          />
+          <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'
+          />
+          <Box>
+          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+          <KeamananEditor
+          showSubmit={false}
+          />
+          </Box>
+
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditPengumuman;

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

@@ -0,0 +1,110 @@
+'use client'
+
+import { Box, Button, Paper } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+import colors from '@/con/colors';
+
+
+function DetailPengumuman() {
+  // const pengumumanState = useProxy(stateDesaPengumuman)
+  // const [modalHapus, setModalHapus] = useState(false)
+  // const [selectedId, setSelectedId] = useState<string | null>(null)
+  // const params = useParams()
+  const router = useRouter()
+
+  // useShallowEffect(() => {
+  //   pengumumanState.pengumuman.findUnique.load(params?.id as string)
+  // }, [])
+
+
+  // const handleHapus = () => {
+  //   if (selectedId) {
+  //     pengumumanState.pengumuman.delete.byId(selectedId)
+  //     setModalHapus(false)
+  //     setSelectedId(null)
+  //     router.push("/admin/desa/pengumuman")
+  //   }
+  // }
+
+  // if (!pengumumanState.pengumuman.findUnique.data) {
+  //   return (
+  //     <Stack py={10}>
+  //         <Skeleton h={400} />
+  //     </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 Pengumuman</Text>
+          {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"}>{pengumumanState.pengumuman.findUnique.data?.CategoryPengumuman?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: pengumumanState.pengumuman.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    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={() => {
+                    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} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack> */}
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailPengumuman;

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

@@ -0,0 +1,111 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import colors from '@/con/colors';
+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 { useProxy } from 'valtio/utils';
+
+
+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} />
+        </Button>
+      </Box>
+
+      <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'
+            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'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+            }}
+          />
+          <Box>
+            <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 onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </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"
+    />
+  );
+}
+
+export default CreatePengumuman;

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

@@ -0,0 +1,122 @@
+'use client'
+import colors from '@/con/colors';
+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 { useState } from 'react';
+import HeaderSearch from '../../../_com/header';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
+
+
+function Pengumuman() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='List Pengumuman'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPengumuman search={search} />
+    </Box>
+  );
+}
+
+function ListPengumuman({ search }: { search: string }) {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const router = useRouter()
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    pengumumanState.pengumuman.findMany.load()
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  const filteredData = (pengumumanState.pengumuman.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.judul.toLowerCase().includes(keyword) ||
+      item.CategoryPengumuman?.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!pengumumanState.pengumuman.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/pengumuman/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={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                  <TableTd >
+                    <Box w={100}>
+                      <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 */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus pengumuman ini?'
+      />
+    </Box>
+  )
+}
+
+export default Pengumuman;